読者です 読者をやめる 読者になる 読者になる

日めくりインドア女子

いろいろかいてみる

【無料版でも】はてなブログのカスタマイズ備忘録【初心者でも】

先達のありがたいテーマや教えを参考に、はてなブログデザインを変更しました。
はてなブログ無料コースでのカスタマイズ記録になります。

はてなブログカスタマイズ

デザインテーマの設定

ブログのデザイン→テーマストアにて「Innocent」をダウンロードします。

テーマを新しくダウンロードする場合は、今までのデザインに加えたCSSのカスタマイズ部分等がすべてリセットされてしまうので、バックアップをとっておいたほうがよいです。 

▼「Innocent」作者様による詳しい説明はこちら

テーマ「Innocent」の素晴らしい点のひとつは、レスポンシブデザインでスマホからの見た目があらかじめ調整されているところです。

これによって、無料版ではほとんどカスタマイズできないスマホからの見た目がぐっと変わり、PCではサイドバーにあたる部分が記事下に表示されるようになります。

 

グローバルメニューの設置

ヘッダーと記事のあいだにグローバルメニューを設置します。

導入したテーマ「Innocent」の素晴らしい部分その2、グローバルメニューが内蔵されているので簡単な記述ですぐに設定ができるのです。

「Innocent」作者様によるグローバルメニュー設置の解説

グローバルメニューを表示させたら、リンク先を任意の個別記事やカテゴリ別記事に設定します。

スマホからの見た目がハンバーガーメニューとなってメニューバーに格納されるのも素晴らしいです。

 

こまごまとしたカスタマイズ

各種ボタンや記事下部分モジュールの変更についてです。

「続きを読む」ボタン

記事のコンテンツを分けた場合の「続きを読む」の部分の変更。

▼こちらを参考にさせていただきました

 

「読者になる」ボタン

デフォルトの「読者になる」ボタンの表示が重い気がしたので変更しました。

▼こちらの記事を参考にさせていただきました

 

Twitterのフォロー」ボタン

読者登録ボタンを変えたらこちらも変えたくなりました。

▼こちらを参考にさせていただきました

 

はてなスター」の見た目

星を眺めるのが趣味なんです。(いつもありがとうございます!)

▼こちらをコピらせていただきました

 

個別記事ページの下に関連記事を表示

来てくださったかたの心(ページ滞在時間)をグッとつかみたくて…。

▼こちらから使わせていただきました

 

さいごに一句

記したものの他に、シェアボタンやカエレバリンクのデザインcssなどもあちこち参考にさせていただきました。

先輩方が残してくださった伝説の書のおかげでここまでこれた感が半端ないです。本当にありがとうございます。

 

そして今回はこれを締めの一句とさせていただきます。

 

デザインで 困ったときは F12

 

初心者がデザイン設定と向き合うときのラーの鏡ですね。

 

ではでは、お読みいただきありがとうございました。