ブログの理想的なレイアウトを考える

理想のサイトデザイン

ブログの投稿記事数が10を超えましたが，悩んでることが．．．．

めっちゃ見ずらい！

デザインを勉強したことはないですが，自分なりに色々調べて理想のレイアウトを追い求めていきたいと思います．

ちなみに当サイトはgoolge提供のbloggerというサービスを使っています．正直使い勝手良くないので，WordPressとかの方が良かったかも

デザインを変更するには

という訳で，最初に選択したテンプレートはこちら．

ちょっと見ずらいというか，退屈なレイアウト．

今回はこれを何とかしてみます．

カスタマイズするには，左のタブからテーマを選択し

テーマ選択画面

カスタマイズ をクリックするとカスタマイズ用のページに移行します． 

カスタマイズ画面

ここで，左の詳細設定のタブの中に，"CSSを追加"という項目があります．ここから，CSS記法を使って細かいデザインを行うことが出来ます．覚えておきましょう．

基本的なレイアウト

ページの記事の幅

記事部分の表示幅狭いなーと思ったので，調べてみると色んな有名サイトは500px ~ 750pxで収まっているみたいです(参考元サイト)．意外．広すぎると目が疲れるので読んでくれなくなるそうです．

googleのサービスであるbloggerではデフォルトが860px．このままちょっと大きいですが変更せずにいきます．

文字サイズ

次に変更するのは文字サイズ．これも調べてみると13~18pxが多いですが，googleは16pxが推奨だそう．16pxに変更します．

行間の余白は1.5em．つまり1.5文字分の間隔が最適．だそうです．

行間は "CSSを追加" の欄に以下の通りに書き加えることで，変更できます．

カラーデザイン

サイトのデザインにおいて，

• ベース (70%)
• メイン (25%)
• アクセント (5%)

の3色を予め決めておくと，統一感のあるデザインに仕上がります．

ベース

サイトの背景色で，全体の70%を占めます．白・黒・グレーなど，邪魔しない色を選択しましょう．

メイン

サイトのテーマカラーです．見出しやヘッダーに使用します．今回は#00ADB5を選択しました．

アクセント

ワンポイント入れる時の色です．明るい目立つ色，メインの対照色を選択しましょう．今回は#F9AA33を選択しました．

見出しのカスタマイズ

この単調すぎる見出しのデザインを何とかしていきます．

大見出し・見出しは文章の要点をまとめたもので，文章のブロックが区切られます．なので目立つようなデザインに変更します．

小見出し・準見出しでは記事を構造化し，読みやすくさせる役割が大きいです．シンプルなデザインにすることで，文章の流れを邪魔しないことを意識しましょう．

"CSSを追加"の欄に

.post-body h2{ 

  marigin: 0.25rem 0.5rem;

  padding: 1rem 2rem;

  color: #ffffff;

  background: #00ADB5;

  -webkit-box-shadow: 5px 5px 0 #007B7F;

  box-shadow: 5px 5px 0 #007B7F;

  font-size: 1.5rem;

}

.post-body h3{

  padding: 0.25rem 0.5rem;

  margin: 0.5rem 0;

  border-bottom: 5px solid #00ADB5;

  font-size: 1.2rem;

}

.post-body h4{

  padding: 0.25rem 0.5rem;

  margin: 0.5rem 0;

  border-left: 5px solid #00ADB5;

  font-size: 1.2rem;

}

を書き加えます．

完成したのがこちら

見出しである<h2>はサイドバーのタイトル部分にも使用されているので，変更が上手く反映されません．HTMLの編集画面から直接変更を加えれば何とかなりそうですが，素人は怖いので止めておきます．

<h1>は通常ブログタイトルとかでメインに使用されるらしいので使用は控える方向でやっていきます．

文装飾のデザイン

アンダーライン

一部分を強調したい時に使いたいのがアンダーラインです．

ただ，デフォルトだと地味でイマイチ．

"CSSを追加"の欄に

.post-body u{

  background: linear-gradient(transparent 50%, #89E3FF 50%);

  text-decoration: none;

}

完成形がこちら．目立つようになりましたね

箇条書き

次は箇条書きです．デフォルトがコレ．

普通です．

"CSSを追加"の欄に

.post-body ul{

  border: 3px solid #000000;

  padding: 2rem 2rem;

}

これで

こう変わります．分かりやすくなったでしょう．多分．

文章のルールを決める

文章を書く時のルールを決めて，記事を構造化し読みやすくします．やっていない人が多いけど意外と大事．

見出しのルール

見出し<h2>

見出し<h2>の役割はその章の要約です．

• "何について話しているか" を書く．
• 1センテンスに収める．
• 見出し以下の文章が１ブロックとして完結していて，記事の途中から読み進めても理解できるようにする．
• 他の見出しと情報の粒度を揃える．

見出し<h3><h4>

見出し<h3><h4>の役割は文章の構造化です．

• "その章の結論は何か" を書く．
• <h2>でのトピックを細分化し，整理する．
• <h3>以下で書く結論は1つに絞る．

文章装飾のルール

太字部分と下線部分だけでその記事の大枠を掴めるような構造を意識しましょう．

太字

キーワードや主語が太字になります．

下線

結論部分や目的語が下線になります．