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

はてな速度アップ

はてなブログを初めてすぐの方に、是非おすすめしたいカスタマイズ方法をまとめました。実は、とっても簡単です。

実は簡単!すぐにできる技をご紹介します

やってみて分かった、まずやるべきカスタマイズはこれ!

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

ネットには沢山のカスタマイズの方法がありますが、やってみると分かりますが、その半分は自分でやってみてもうまくいきません。ここで紹介するものは、すべてほぼコピペでできる & ちゃんとカスタマイズできたモノです。厳選したカスタマイズ方法をご紹介します。

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

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

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

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

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。

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

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

No.2 トップを記事一覧ページにしよう

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

f:id:akiakigogogo:20180224120510j:plain

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

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

トップページを記事一覧に変更してスッキリさせる方法

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

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

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

No.4 パンくずリストを導入し、カテゴリを階層化・表示させよう

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

はてなブログでGoogleにパンくずリストを認識させるカスタマイズ

No.5 見出しのデザインを変更

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

中見出し

小見出し

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

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です