久しぶりのカスタマイズ記事だニャ!
ブログ「こわいものみたさ」を開設してちょうど1年たちました。この1年色々とブログのカスタマイズも実施してきましたので、当ブログで実施してきたブログカスタマイズのまとめ記事を書きたいと思います。1記事に書くと結構多くなってしまうので、パート1(ヘッダ部、トップページ部、サイドメニュー部)とパート2(共通部、記事部、フッター部)と2部構成にして紹介したいと思います。
ブログ1周年に書いて記事も是非一緒に読んでみてください!
なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。
ヘッダー部カスタマイズ
最初はヘッダー部分のカスタマイズをまとめてみました。下の画像の黄色枠部分のカスタマイズです。タイトル部分もヘッダーとして含めて書いてしまいます。
ヘッダーにオリジナル画像設定
当ブログの一番上のこわいものみたさという文字と猫と大福の画像のカスタマイズです。やっぱりブログの一番最初に見るものなので、特徴的にしたいですよね。猫のだいふくアイコンと、だいふく餅を入れてみました!カスタマイズ方法はブログ記事でアップしていますので該当の記事を参考にしてみてください。
レスポンシブなナビゲーションメニュー
タイトル画像下のHOMEやABOUT等のナビゲーションメニューのカスタマイズです。PCの時とスマホの時で見え方を変えています。こちらのカスタマイズ方法もブログ記事でアップしていますので、該当の記事を参考にしてください。
トップページ部カスタマイズ
次はブログの顔と言えるトップページ部のカスタマイズの紹介となります。下の画像の黄色枠部分の紹介となります。
ヘッダ下におすすめ記事を横並び
トップページのヘッダ画像の下にお勧め記事を4つ横並びで掲載しています。今は大体1週間に1回程度お勧め記事を更新しています。やっぱり古くなったけど読んでもらいたい記事を目立たせるにはトップの上の方に掲載するのが一番です!このカスタマイズのやり方は、Minimal Green様のブログを参考にさせて頂きましたのでリンクを貼っておきます。
カード型トップメニュー
当ブログはトップページの記事一覧をカード型に設定しています。この方法を行うには前提条件があり、ブログトップを一覧形式にする必要がありますが、はてなブログは有料会員でないとできないため、「はてなブログPRO」でないとできません。
カスタマイズの仕方に関しては、当ブログで記事を書いていますので、参考にしてください。この記事アクセス数が多く、結構真似されていらっしゃるブログが多くなってきましたが、当ブログも参考にさせてもらったものを微調整しただけですので、ご自由に使ってもらえればと思います。やっぱりカード型にするとスタイリッシュで見栄えが良いです!
サイドメニュー部カスタマイズ
次はサイドメニュー部のカスタマイズ方法です。サイドメニューは回遊率をアップするのにも重要ですよね!下の画像の黄色枠部分の紹介となります。
プロフィール変更
はてなブログのデフォルトのプロフィールって嫌だったので、結構自分好みに変えています。当ブログの設定を紹介してみます。なお、プロフィールは「記事の管理」→「デザイン」→「カスタマイズ」→「サイドバー」→「プロフィールモジュールの編集」をすると、以下のようなモジュール編集画面に行きます。
当ブログは、まずすべてのチェックマークを外しています。その理由ははてなが用意したものを表示させたくなかったからです。そして、注目はプロフィールの自己紹介の部分です。こちら文字でなくHTMLが書けるのです!え、HTMLと言っても書けないよ!って方、全然大丈夫です。
普通にブログの新規記事を立ち上げて、編集方法見たまま設定で、普通にブログを書くように自分の自己紹介を作ってください。この時にはてな読者ボタンやSNSシェアボタンを自分好みに設定するのもいいですね!SNSシェアボタンのデザインは色んな所で紹介されているので、探してみると良いかと思います!
自己紹介が完成したら、HTMLを丸々コピーして置いて、プロフィールの自己紹介に貼り付けるだけでOKです!
サイドバーメニューをタブ形式
サイドバーに色々掲載したいけど、縦長になるのは防ぎたいという方向けの設定です。はてなブログ設定のサイドバーで表示させたいメニューが多い方に向けとなります。カスタマイズ方法は記事にしていますので、参考にしてください。
カテゴリーの階層化
カテゴリーを階層化したいと思ったので、カスタマイズしています。カテゴリー階層化することでサイドメニューが縦長にならず見栄えが良くなります。ただし2階層目は▶ボタンをクリックすると見れるようになるため、クリックされやすさは落ちてしまいますので要注意です。
こちらのカスタマイズ方法も記事にしています。上述したサイドバーメニューをタブ形式に掲載している「サイドメニューを工夫して回遊率アップを目指す!」記事に一緒に書かれていますので参考にしてください。
サイドメニューで目次固定(PCのみ)
サイドメニューに目次を表示できるようにして、記事スクロールした時に目次だけ固定して表示しっぱなしになる設定です。記事を読んでいるとかなり下にスクロールされると思いますが、目次が固定されるので上部の目次に戻れるといった便利な仕様です。
固定はPCのみで、スマホの時はサイドメニューがブログの下部に表示されるので、下部に目次が表示されるだけです。
こちらのカスタマイズ方法も記事にしています。上述したサイドバーメニューをタブ形式に掲載している「サイドメニューを工夫して回遊率アップを目指す!」記事に一緒に書かれていますので参考にしてください。
まとめとパート②予告
パート①では、当ブログのヘッダー部、トップページ部、サイドメニュー部のカスタマイズを赤裸々に紹介しました!デフォルトのままで使うのもいいのですが、やっぱり自分好みで個性的なブログを目指すのもいいと思いますので、カスタマイズあまりやられていないって方は是非試してみてください。なお当ブログと同じようにしてもらっても全然問題ないですが、他のカスタマイズ紹介とかも探してもらって、自分好みのカスタマイズを色々混ぜていくことをお勧めします!
裸を見られたみたいではずかしぃにゃ!
さて、パート②は、共通部、記事部、フッター部を紹介したいと思います。何気にリンク切れとかに出る、Not Foundページにお勧め記事が出るようなカスタマイズ入れたりしています<NoT Found見る>ので、その辺も紹介できればと思いますのでお楽しみに!