こんにちは。
こころ・え・ごころのキタガワです。
本日もスマホからご覧いただいてる方には、なんのことやら・・・の内容となっています。ぜひパソコンからご覧くださいませ。
さて、私自身ブログで一番こだわっている部分に、フォント設定があります。
コンテンツが主役。
読んでもらえて、なんぼのブログ。
ブログの読みやすさを改善することはデザインの仕事の一つです。
読みやすさの要素に、フォントの種類、サイズ、行間があります。
たとえば、現在のアメブロの各CSS編集用スキンの初期設定は以下の通りで、ついでに私のブログの数値も。
【ブログ記事本文のCSS設定】
たとえば、新スキンはデフォルトで16pxだけど、私は15pxにしています。
なぜ旧スキンで慣れた14pxではダメなのか。
それは新スキンでのサイドメニューにある文字のフォントサイズが14pxだからです。
サイドメニューも記事も、フォントサイズが同じだったら、ベターっとしたサイトになってしまいます。
どの要素を使うかはそれぞれに、「メリハリ」を意識するのも大事です。
フォントに関したCSS編集方法を旧スキンでは以前紹介したことがありましたが、新スキンも含めて改めてご紹介しようと思い、今回の記事となっています。
方法は以下の通り。
例として、私のブログの設定値にしています。
旧スキンのCSS編集用デザインを使用している場合
CSS編集画面を下にスクロール。下記の位置に挿入します。
ここに、下記CSSをコピペ。
.articleText{
font-size: 15px;
line-height: 1.8;
}
数値（太字）は半角数字でのみ変更可。
新スキンのCSS編集用デザインを使用している場合
新スキンの場合では、CSS編集画面の末尾に記載でOKです。
指定するCSSは次のようになります。
.skin-entryInner {
font-size: 15px;
line-height: 1.8;
}
※数値（太字）は半角数字でのみ変更可。
CSSを保存したあと、変更箇所をブログで確認するには
Windowsの人は Shift+F5キー
Macの人は ⌘+Shift+R
で、リロードを行ってみてください。
大きな違いはないように思えるかもしれませんが、やってみると、自分にとって気持ちの良いポイントが見えてきます。
その人の「ブログに合ったサイズ感」というのもありますし、読者の年齢層などによっての違いもありますよね。
私なんかは、こーいうのが「楽しい」んですが、なかなかわかってもらえないポイントだったりします（笑）
本日も最後までお読みいただきありがとうございました！
こころ・え・ごころのお知らせはメール・LINE@から配信しています。
バナー作りました！
