まさくまの日記

日々の暮らしの中で感じたことなど自由に綴っています

【はてなブログ】サイトデザインの効率的な決定方法

自分のブログにどのデザインを適用するか、悩みますよね。(ちなみに当サイトは「はてなブログ」で作成しています)

 

自分のイメージするデザインにピッタリあったデザインを探すのはなかなか難しいものです。

私もWordPressからはてなブログに移行後、デザインを決定するまで何やかやと3日もかかってしまいました。

 

いかに効率良く自分好みのデザインを見つけるか、私の経験をもとにその方法をお伝えしたいと思います。

 

私ははてなブログの初心者なので、はてなブログが提供している公式テーマのデザインを中心に探してみました。

 

そもそも、なぜデザインを決定するだけでこんなに時間がかかってしまったのか。

  • 全体のデザインだけで決めて記事を書いてみたら見出しのデザインが今一つだった。
  • 目次の表示方法が自分の期待と違っていた。
  • カスタマイズで設定した背景色の設定範囲が思っていたのと違っていた。
  • 記事と記事の境界が分かりづらかった。

など、理由がいくつかありました。

 

そして、デザインをいくつも試しているうちに、自分が重点をおきたいポイントが分かってきました。

 

 私がデザインを選択するうえでポイントを置いたのは次の5つです。

  • 記事欄の横幅が広めで、ヘッダーの高さは高過ぎないこと
  • 記事タイトルのフォントサイズが大見出しよりも大きいこと
  • 記事と記事の境界が分かりやすいこと
  • 見出しが分かりやすいこと(大見出し、中見出し、小見出しのフォントサイズ、下線の有無、見出しの先頭の記号の有無など)
  • 目次が見やすいこと

 

そこで、あらかじめテスト用として大見出し、中見出し、小見出し、標準を使った簡単な文章を入力し、目次も設定した記事を書いてみることにしました。

さらに背景色だけは「初期設定」ではなくカスタマイズで自分好みのものを設定しておきました。

 

例として書いた記事は次のとおりです。

f:id:kumarin20190604:20190609060210p:plain

デザイン決定用のテスト記事

 

このように入力すると、次のように表示されます。

1.大見出し

1.中見出し

1.小見出し(1)

小見出し(1)内の文章です。

2.小見出し(2)

小見出し(2)内の文章です。

 

次に目次を設定してみます。この見出しでは目次は次のように作成されます。

 

デザインを変更するとこれらの部分がパッと変更されるので、自分好みのデザインを効率良く見つけることができました。

 

ちなみに、最終的に私が選んだデザインは公式テーマの「Afternoon」です。

背景色についてのみ、初期設定ではなく水色をベースに模様が少し入ったものにカスタマイズしてみました。

 

もしデザインの選択にお悩み中でしたら、ここで紹介した方法も取り入れてみるといいかもしれませんね。

お役に立てれば幸いです。