先達のありがたいテーマや教えを参考に、はてなブログデザインを変更しました。
はてなブログ無料コースでのカスタマイズ記録になります。
デザインテーマの設定
ブログのデザイン→テーマストアにて「Innocent」をダウンロードします。
テーマを新しくダウンロードする場合は、今までのデザインに加えたCSSのカスタマイズ部分等がすべてリセットされてしまうので、バックアップをとっておいたほうがよいです。
▼「Innocent」作者様による詳しい説明はこちら
テーマ「Innocent」の素晴らしい点のひとつは、レスポンシブデザインでスマホからの見た目があらかじめ調整されているところです。
これによって、無料版ではほとんどカスタマイズできないスマホからの見た目がぐっと変わり、PCではサイドバーにあたる部分が記事下に表示されるようになります。
グローバルメニューの設置
ヘッダーと記事のあいだにグローバルメニューを設置します。
導入したテーマ「Innocent」の素晴らしい部分その２、グローバルメニューが内蔵されているので簡単な記述ですぐに設定ができるのです。
▼「Innocent」作者様によるグローバルメニュー設置の解説
グローバルメニューを表示させたら、リンク先を任意の個別記事やカテゴリ別記事に設定します。
スマホからの見た目がハンバーガーメニューとなってメニューバーに格納されるのも素晴らしいです。
こまごまとしたカスタマイズ
各種ボタンや記事下部分モジュールの変更についてです。
「続きを読む」ボタン
記事のコンテンツを分けた場合の「続きを読む」の部分の変更。
▼こちらを参考にさせていただきました
「読者になる」ボタン
デフォルトの「読者になる」ボタンの表示が重い気がしたので変更しました。
▼こちらの記事を参考にさせていただきました
「Twitterのフォロー」ボタン
読者登録ボタンを変えたらこちらも変えたくなりました。
▼こちらを参考にさせていただきました
「はてなスター」の見た目
星を眺めるのが趣味なんです。（いつもありがとうございます！）
▼こちらをコピらせていただきました
さいごに一句
記したものの他に、シェアボタンやカエレバリンクのデザインcssなどもあちこち参考にさせていただきました。
先輩方が残してくださった伝説の書のおかげでここまでこれた感が半端ないです。本当にありがとうございます。
そして今回はこれを締めの一句とさせていただきます。
デザインで 困ったときは F12
初心者がデザイン設定と向き合うときのラーの鏡ですね。
ではでは、お読みいただきありがとうございました。
