カメラと週末旅行

一眼レフカメラを片手に週末に旅行するブログ

はてなブログのデザインをシンプルにカスタマイズするためにやった5つのこと

f:id:akiakigogogo:20180518194552p:plain

はてなブログのデザインをシンプルにカスタマイズしました。

このブログを開設して3ヵ月が経ちました。コンテンツが大切なことは勿論ですが、その見せ方もとても大切。アクセスして頂いた方に、静岡の自然の良さを分かりやすくお伝えしたいです。そこで、このブログを「シンプルで整ったデザイン」にするべく、はてなブログをカスタマイズしてみました。

 

①デザインテーマ変更とレスポンシブへ対応

シンプルで優しい印象のMinimalism

ブログ開設当初は「Brooklyn」を使用していました。シンプルで見やすいザインなのですが、もう少し優しい雰囲気にしたいのと、個性を出したくなったので「Minimalism」をチョイス。

作成者のこどみす氏に感謝。

レスポンシブデザインにも対応

このデザインはレスポンシブに対応していますので、PC用に作成すれば、スマホ用にも自動で表示を最適化してくれてます。PC/スマホ両方をメンテしなくてよいので助かります。デザイン→スマホアイコン→詳細設定でレスポンシブデザインにチェックを入れるだけでOKです。

 

②トップを記事一覧ページにした

はてなブログのトップページ(http://akiakigogogo.hatenablog.com/)を記事一覧にしました。見出しの一覧にしないと、記事の全コンテンツを読まないと次の記事に行けず見にくかったので。

f:id:akiakigogogo:20180224120510j:plain

やり方は簡単。はてなProに登録し、設定→詳細設定→トップページの表示形式(PC版)で、全文形式から一覧形式に変えるだけ。

はてなProに登録しなくてもできる方法もあります。

 

③サイドバーにコンテンツを表示、追加する

PC用のサイドバーは最新の記事以外のコンテンツを表示することができ、目にも入りやすく、とても大切な場所です。ここに、プロフィール、ウィークリー人気記事TOP5、カテゴリ、月別アーカイブ、検索、リンクの順で表示しました。

サイドバーにコンテンツを表示

 

④パンくずリストを導入し、カテゴリを階層化・表示させた

はてなブログはカテゴリを大カテゴリ、中カテゴリ、小カテゴリと階層化ができません。こちらの記事を参考にさせていただき、入れ子式のパンくずリストを表示させました。

 

⑤見出しのデザインを変更

ふんわり優しめの雰囲気を目指して、デザインを変えました。こんな感じ。色は水色で統一。

中見出し

小見出し

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

 

まとめ

「シンプルで整ったデザイン」を目指し、はてなブログをカスタマイズしてみました。
記事の一覧表示やサイドバーへのコンテンツの追加、パンくずリストの導入により、コンテンツへのアクセスのしやすさは改善されたと思います。また、デザインテーマや見出しデザインを変更することで、ふんわり優しめの雰囲気が出ました。

まだまだトライしたいことも、直したいところも沢山。もっともっと、勉強しなくては。