そこそこの頻度で自分が使っているサイトやアプリなどの設定を最適にするためにいじり倒すのが好きなんですが、それが原因で誤って設定をまっさらにしてしまうことも少なからずあり、このブログのデザイン設定も暇つぶしでなんとなく触っていたら、テーマの変更でデザインCSSが破棄されることを忘れたまま勢いで変更してしまって「あー……」となりました。たいていそのときは直前までの記憶を手がかりに元に戻してるんですが、それに取り組んでるあいだの心境はなんというかとにかく"無"です。時間の無駄すぎる……。
さいわいCSSの知識がそこまでじゃなかったのと、簡単な設定しかしていなかったので忘れないうちに手早くやっておきたい一方で、「再発防止のために設定の手順をブログに書いておくのもいいのでは？」という案も思いついたので、その線でやっていこうと思います。これで未来の私が懲りずにやらかしてしまい復旧で泣きを見る世界線は完全に死滅したといえます。逆に言えば書き残してるんだからいくらでも失敗できる！
テーマを選ぶ
これを機にはてな公式テーマのSmoothを使ってみようと思います。シンプルかつ見やすくていいですねこれ。本当はテーマも自分でカスタマイズしてみたい気持ちがなくはないんですが、いまのところさっぱりわかってないのと面倒くさいのとで後回しにしようと思います。いつかやる。
フォントの種類を指定する
前提として今回主に貼るコードの種類はCSSなので、ブログにある（ダッシュボード→）デザイン→カスタマイズ→デザインCSSを開いて、そこにそのままコピペするだけです。
CSSのfont-familyを使って表示させるフォントの種類を決めます。font-familyの詳細についてはここのページに任せます。三時間ぐらいさんざん迷ったあげく、フォントは游ゴシックに決めました。
/*フォントの種類を指定*/ body { font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Verdana", sans-serif; }
一度やってみたかったんですよねこういうコード表示形式。「游ゴシック Medium」と「Yu Gothic Medium」がWindowsへの指定、「游ゴシック体」と「YuGothic」がMacへの指定になっています。どうしてWindowsに対する指定に「游ゴシック」だけでなくMedium が追加されてるかというと、Windowsではfont-weight（文字の太さ）が通常の場合だと細くかすれてしまうからです。
*1
これが嫌で一時はメイリオにしようかと思ったんですけど、その必要がない解決法を見つけられてよかったです。
同じフォントの指定でも日本語と英語を併記するのは、使用するブラウザによってはどちらか一方しか認識してくれない場合があるからです。ただし、今後の環境によってはどちらか片方だけでいいかもしれません。 *2 游ゴシックのほかに複数のフォントが指定されているのは、webページを見ている個々人のOSによって搭載されてるフォントが異なるからで、もしも游ゴシックが利用できない環境があった場合、それをカバーするために別のフォントが用意されています。左から記述されてるフォントほど表示の優先順位が高いです。 *3
フォントサイズと行間を指定する
.entry-content p {}を使ってフォントサイズと行間を調整します。.entry-content p {}というのは「記事内のpタグ内（本文）に対して」と解釈しておけば特に問題ないと思います。括弧内でfont-familyと同じように記述していきます。
/*フォントサイズと行間の指定*/ .entry-content p { font-size: 17px; line-height: 1.75; }
上から順に、font-sizeでフォントサイズ、line-heightで行間を調整できます。調べてみるとフォントサイズは16px以上が読みやすいとあったので17pxにしてみました。読みやすい行間は0.7行とあったので、それよりもほんのちょっと広い0.75になるように値を1.75にしています。
*4
line-heightの値の指定はpxやemなどの単位を付けた決め方が数パターンありますが、単位なしで書くと小要素への思わぬ影響を防げるのでそれを採用してます。
*5
終わり
/*<system section="theme" selected="smooth">*/ @import "/css/theme/smooth/smooth.css"; /*</system>*/ /*フォントの種類を指定*/ body { font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Verdana", sans-serif; } /*フォントサイズと行間の指定*/ .entry-content p { font-size: 17px; line-height: 1.75; }
終わりです。ブログのデザインCSSに貼り付けたときの見た目としては上記のようになると思います。個人的にはすごい良くなりました。ほかに何か追記事項があれば気が向いたときに書くと思います。
参考サイト
参考サイトは以下になります。ありがとうございました。
フォントの種類を指定する
font-family－スタイルシートリファレンス
フォントの選び方－伝わるデザイン
おすすめフォント－伝わるデザイン
CSSでのフォント指定について考える（2014年）
font-familyの書き方まとめ：CSSでフォント種類を指定しよう
WEBサイト構築時によく使うゴシック体のフォント指定
フォントサイズ・行間・余白を指定する
font-size－スタイルシートリファレンス
line-height－スタイルシートリファレンス
CSSのセレクタとは？覚えておきたい25種類と書き方
テキストを読みやすくする5つのポイント
Webサイトを読みやすくする、「行間」「段落」「カーニング」の法則
文章－伝わるデザイン
1-1-03. 読みやすい行間は0.7行である
【CSS】line-heightで行間を調整する方法：おすすめの値は？
【CSS】CSSのline-heightで単位を指定しない理由 - Qiita
*1: WEBサイト構築時によく使うゴシック体のフォント指定から引用。「Windowsへの指定は単純に「游ゴシック」だけではなく「Medium」が追加されています。これは、Windowsではfont-weightが通常の場合は細くかすれてしまうためです」
*2:同記事から引用。「ヒラギノとメイリオは、日本語での指定と、英語での指定の2つが書かれています。これは、ブラウザによってはどちらか一方しか認識しないものが存在するためです。しかし、最近は改善傾向にあるようで、今後はどちらか片方だけでよくなるかもしれません」
*3:同記事から引用。「font-familyでは、指定されているフォントを左から順番に確認し、入っているフォントが見つかった段階でそのフォントを使用して表示されます。
（左に記述されているフォントほど表示の優先度が高いということです。）」
font-familyの書き方まとめ：CSSでフォント種類を指定しようから引用。「なぜ複数書くのかというと、OSによって入っているフォントが異なるからです。言い換えると、Windowsなのか、Macなのか、iPhone/iPad（iOS）なのかで搭載されているフォントが異なるのです。Macにしか入っていないフォントを指定しても、Windowsパソコンからはそのフォントでウェブページを見ることはできません。そこで複数のフォントを書いて対応します。MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバーするというイメージですね」
*4:テキストを読みやすくする5つのポイントから引用。「一般的に、行間（行と行のあいだ）はフォントサイズの75%前後が適切だと言われています。CSSの設定でいうと、line-height : 1.75 くらい」
1-1-03. 読みやすい行間は0.7行であるから引用。「文章を読む際には、文字の大きさに加え行間も重要な要素となる。行間が狭い文章は、「読み進む際に上下の行がノイズとなる」、「改行時に視線が同じ行に行ってしまう。」などの問題点を持っている。さらに、狭い場合だけでなく、広すぎる場合も読みにくいという調査結果も公表されており、「読みやすさ」の、許容範囲は0.4～0.9行である」
*5:【CSS】line-heightで行間を調整する方法：おすすめの値は？から引用。「emや%よりも「単位なし指定」がオススメです。なぜかというとemや%だと親要素で計算された行高が、子要素にそのまま引き継がれてしまうからです。つまり、親要素のフォントサイズが40px、子要素のフォントサイズが20pxの場合にも、子要素には親要素と同じ行間が適用されてしまうのです」
