4連休で時間ができたぞー！
今日から特別な4連休ですね。
本当なら東京オリンピックが開催され日本中が世紀の祭典に熱狂していたはずなのですが、特に予定もない体育の日という響きだけが虚しく響きます。
しかし嘆いても仕方ないので、この休みを充実させるべく一冊の本を買いました！
『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』著：Manaさんです。
ブログ運営にHTMLとCSSの知識が多少あったほうがいいのかなと思って本を探しました。
ちなみに知識レベルとしてはHTMLって何？CSSってどっかの報道局だっけ？というレベル。
この本にしたのは、Amazonでめっちゃ売れてたからという安直な理由です。
開けば読みやすくキレイなデザインになっています。
さすがデザインの本です。
太ったジムインストラクターが信用ならないように、デザインのことを書いてあるのに読みづらければ説得力無いですもんね。
出来ることから始める（フォント変更）
早速読んでみました！
おぉ！なるほど、まったくわからん！
今でこそ表計算ソフトの関数とかは使いこなせるようになりましたが、こういった新しいものは最初は呪文にしか見えませんね。
慣れるまで諦めずに触れるしかないのでとりあえず投げ出さないようにします。
何章もあるので、比較的簡単そうで効果も見えやすそうなところからやってみよう。
ということで今回挑戦するのが、フォントの変更です。
なぜフォントの変更かというと、理解ができそうということがひとつ。
そして、昨日から使い始めた公式テーマ『Smooth』が結構かっこいいんですけど、タイトルが明朝体で本文がゴシック体なんです。
んー、逆じゃね？
いやそんな決まりはないのかもしれませんが、個人的に文章は明朝体の方が締まって見えて好きです。長文だと読んでて疲れない字体だとも思います。
なので、タイトルはゴシック体、本文は明朝体に変えるべく本を見つつ、ネットで先人たちの知恵を借りつつ挑戦です。
文字の変更は、はてなブログの場合は、デザイン設定→カスタマイズ→デザインCSSから変更できます。
僕のように公式テーマを使っていると、既にコードが色々書かれているのですが、そこはスルーし、必要な部分だけ最後に書き足せばいいという優しい仕様でした。
例えば本文のフォントを明朝体にしたい場合は、明朝体のコードが 「serif」なので、
p {font-family: serif;}
こんな感じのコードを最後に追加すれば良いと理解し、書き加えました。
できたぞ！この調子でいこうと思いきや落とし穴が…
スマホ表示が変わらない
どれどれスマホでも確認してみるか。
変わっとらんやんけ！
PCでは表示できているのに不思議でしたが、調べたらこの方法だと端末側に対応するフォントがないと表示されないとのこと。
逆に僕の端末で表示されなかったことで、問題に気づけてよかったです。
なのでPCと同じフォントにするにはWebフォントというものを使って表示させてあげる必要がある。
本では『Google Fonts』を勧めていたので、従って使ってみました。
Google Fontsとは
文字通り、Googleが提供するWebフォントのサービスです。
無料で使えるところが嬉しい。さすがGoogle。
Googleのサービスにありがちですけどサイトは英語です。
日本語のフォントの種類は8種類ありました。
このGoogleフォントをはてなブログで使うには少し設定に癖があり、どうやればいいか理解するのに時間がかかりました。
簡単に説明すると、使いたいフォントを選んでいくと、「Linkのコード」と「CSSコード」の2つが出てくるので、
「Linkのコード」の方は、ブログ自体の詳細設定の「headに要素を追加」に貼り付け。
CSSコードの方は、デザイン設定カスタマイズの「デザインCSS」に貼り付け。
ということで反映ができました。
色々悩む
本文は明朝体にしようと思っていたのですが、2種類あってひとつめの『Noto Serif JP』は基本的な感じ。もうひとつの『さわらび明朝』というやつは、デザインに凝っている感じ。
せっかくなのでデザインが凝っている『さわらび明朝』にしようと思いましたが、スマホを見て比べてみたら『Noto Serif JP』の方が見やすく感じたのでこちらにしました。
左が『さわらび明朝』で右が『Noto Serif JP』です。
どちらがお好みでしょうか。
タイトルは『M PLUS 1p』というフォントにしました。
フォントの設定終わり！
以上で、今回行ったフォントの設定についてでした。
調べれば調べるほど奥の深さを感じますね。
まさに新しい設定で読んでいただきましたが、如何ですか？
このブログは6割以上の人がスマホから見てくださっています。
おそらくどこも今はスマホからのアクセスが多いのだと思います。
Webフォントを使えばスマホから見ている人にも、見せたいフォントで見てもらえるので、ぜひ使ってみてはいかがでしょうか。
さぁ、まだ連休は始まったばかりなので、もうちょい本読んで勉強しようと思います！
皆さんも良いお休みを！
