【ブログデザイン】CSSを張り付けるだけ！このブログのデザイン設定を公開！！
こんばんは、ひでまるです。
今日はブログのデザインを一通り弄り終えたので、その内容とcssコードを公開していこうと思います。
約一週間かけてイジった内容ですが、一部上手くいかなくて断念した内容があるものの、概ね満足のいくデザインになりました。
色々な所からコードを拝借してきたので、引用元がわからなくなってしまったものに関しましては失礼ながら省略させて頂きます。申し訳ございません。
実際に使ってみる場合は、バックアップを取るなどして元に戻せるようにしておきましょう。
というわけで、早速見てみましょう！
ヘッダ設定
グローバルメニュー
こちらは、グローバルメニューの設定になります。
こんなやつですね。
『https://hidemaru-1988-sub.hatenablog.com/archive/category/自己紹介』の部分は、リンクさせるカテゴリのURLに変えてください。
『i class=" blogicon-user"』の部分はメニューの文字の横に表示させるアイコンの種類になります。コードは、こちらのサイトを参考にさせていただきました。
ブログ階層化
こちらは、ブログカテゴリを階層化する為の設定になります。
何も設定していないとカテゴリが階層化されませんが、この変更を行うことで下図でいうCSS部分のように階層化できる機能です。
この設定は、下記記事を参考にさせていただきました。
記事/記事上・記事上設定
読者登録ボタン
読者登録ボタンを表示する機能です。
記事上記事下ともに同じものが入っていました。
フッタ設定
上に戻るボタン
1～14行目は、ブログを下げていくと表示される『上に戻る』ボタンのための設定です。
下図でいうと、青丸の部分です。
15～17行目は、カテゴリ階層化のための設定です。
ヘッダと合わせて設定が必要です。
デザインCSS
ブログテーマ
こちらは、ブログテーマの設定です。
ブログテーマを変更すれば勝手に書き換わります。
私は割とシンプルかつレスポンシブ対応のデザインを選定しました。レスポンシブ対応ですと、携帯電話で見た時に同じようなデザインで表示させることが可能になります。
見出しデザイン
こちらは、この記事でいうと下記の装飾に当たります。
ここは正直改善の余地があるなと感じるところです。シンプルに見やすい感じのもので選んでいます。
大見出し、中見出しのみ設定しております。
これ以上の記事段落の階層化を行うと、階層毎の内容が薄くなってしまいそうなので、中見出しまでで十分かなと思っております。
サイドバー囲み&アイコン追加
こちらはサイドバーのモジュールを枠で囲むのとタイトルの横にアイコンを追加する機能です。
こちらのアイコンははてなブログのデフォルトアイコンではなく、『Awesome』というところのアイコンを使用しております。
contentより右側の4つの文字を変更することでアイコンを変更することができます。
無料で1700個近いアイコンを使用することが可能ですので、ご自身の趣味に合ったアイコンが見つかりやすいのではないでしょうか？
グローバルメニュー
ヘッダでの設定と合わせて設定を行います。
ボタンのデザインやカーソルが上に来た時の色の変更などの設定をしております。
TOPに戻るボタン
フッダでの設定と合わせて設定を行います。
記事一覧表示
ブログトップに戻った時や、カテゴリページに飛んだ時に記事を一覧にして表示する機能です。私は全くいじっていませんが、お気に入りの変更の一つです。
この変更は、この記事を参考にさせていただきました。
設定→詳細設定→<head>要素にメタデータを追加
Awesomeアイコン用設定
サイドバーで使ったアイコンを使うための設定です。
不明/Jクエリ
何のために書いてあるのか覚えていません。
記事一覧表示
デザインCSSの部分と合わせて設定が必要です。
まとめ
今回は、私が調べて実際に使っているブログデザインにかかわる部分の設定を全て公開しました。
ほとんどがコピペで色合いやサイズ感、うまく動かないところを微調整したのみで、ほとんどは、先人の方々の作ったコードとなっております。
まだまだCSSなどをマスターできるようになるには時間がかかりそうですね。
今週順調にいけばブログデザイン改善目標はストップになりますが、今後もちょこちょこいじっていく予定です。
引き続きブログの応援よろしくお願いいたします。
それではまた次の記事でお会いしましょう！アディオス！
