deCo..boCo..

でこぼこな人生。もっと楽しく…。

日本語対応グーグルフォントを導入してブログの印象を変えよう!【はてなブログ】

f:id:nishi244455666:20171001125541p:plain

ブログを立ち上げた当初の話ですが。

ふと自分の書いた記事を読んでいると…以下のように感じました。

なんだか、読みづらい…。

この事実について客観的に考え、次の様な仮説を立てました。

文字のゴツゴツとした感じが堅苦しい印象を与えている。

構成要素のそのほとんどが『文字』であるブログにとって、これは死活問題です。

f:id:nishi244455666:20171001131146p:plain

ブログジャンルによっては明朝体のような淡々としたイメージのフォントの方が趣旨にマッチしている場合もあると思いますが、

筆者のメインブログである【ぽぷらいふ!】は、うさぎの飼い方や生活について綴ったいわゆるペットブログ。

丸みを帯びたフォントでやわらかい印象を与えられる方法は無いか?

と検討したところ、グーグル日本語フォントの導入が最適解だという答えに辿り着きました。

そこで今回はWebフォントであるグーグルフォントの導入方法について解説をしていきます。

Webフォントってなに?

f:id:nishi244455666:20171001134525p:plain

元々Web上で表示されるフォントは、それぞれの端末にインストールされているフォントを呼び起こして文字として表示されています。

Windows、Mac、iPhone、Androidのような代表的な端末によってもOSが異なることで標準搭載されているフォントも異なり、それぞれ違ったフォントで表示されてしまうのです。

 f:id:nishi244455666:20171001134200p:plain

『Webフォント』を導入する事で、これらの問題を解決することが出来ます。

つまり『サーバーで管理されているフォントデータを読み込み、ブログに反映させる』ことが出来る訳です。

端末やOSの種類に関係なく、フォントをサーバーから読み込んで表示するので、すべてのデバイスで共通のフォントを表示させる事が可能になります。

f:id:nishi244455666:20171001134844p:plain

Webフォントサービスを提供するサイトは多く存在し、中にはページの表示速度が遅延してしまうなどのデメリットもあるようですが…

今回はGoogleが提供する『可読性が良く、遅延が少ない』Webフォントを導入していきましょう!

(他でもないGoogleのWebフォントですから、SEO的に優遇して欲しいなぁ…とか思ったり思わなかったり…)

フォントを導入しよう!

f:id:nishi244455666:20171001140700p:plain

2017年10月現在、Googleでは9種類の日本語対応フォントを試験的に公開しています。

左から『漢字、ひらがな、カタカナ』と全ての表示例が書かれているフォントは全ての文字種に対応していますが、

『ひらがな、カタカナ』のフォントは漢字には対応しておらず、

『カタカナ』のみのフォントはカタカナのみのフォローとなっています(9種類のうち“ニクキュウ”のみ)。

それでは導入方法を解説していきます。

①表示するフォントを選ぼう!

f:id:nishi244455666:20171001141746p:plain

まずは下記のリンクから『ブログイメージ合うフォント』『ブログで表示したいフォント』をお選びください。

googlefonts.github.io

当ブログでは記事の見出しや本文で『Rounded M+ 1c』を採用していますので、そちらを例に解説をしていきます。

②コードをコピペしよう!

リンク先から使いたいフォントを選んだら、次はコードをコピペしましょう!

ページを下にスクロールすると、フォントごとに表記例とコードが記載されていますが、画面右側にあるコードをコピーします。

f:id:nishi244455666:20171001142724p:plain

HTMLと書いてある方のコードをコピー出来たら、今度はコードを貼り付けます。

はてなブログのダッシュボードを開き、設定>詳細設定の『headに要素を追加』という欄にコードを貼り付けます。

f:id:nishi244455666:20171001142953p:plain

ここまでの作業で全行程の1/2は完了しました!

もう一息ですので頑張っていきましょう。

③デザインCSSにフォント名を追加!

ここまでの作業であなたのブログは『サーバーからフォントを読み込む』事が出来るようになりました。

次はその読み込んだフォントを『どこに表示させるのか』について作業をする必要があります。

見出しや本文記事に反映させたい場合

ブログの中の文字の99%以上は見出しや本文にあると言っても過言ではないと思います。

なので印象をがらりと変えたい方はこのコードをコピペして、見出しや本文のフォントを変更してしまいましょう!

今回は例としてRounded M+1cを使っていますので、違うフォントを使いたい方は下記のコードを書き変えて使ってください!

以下のコードを『デザインCSS』の欄に貼り付けます。

 

他のフォントを使いたい方は…

f:id:nishi244455666:20171001144905p:plain

 先ほどのコピーした欄の下にあるCSSの中からフォント名をコピーして…

 

f:id:nishi244455666:20171001145005p:plain

オレンジ色の枠内を書き変えて使ってください。

ブログ本文のフォントを比較すると

f:id:nishi244455666:20171001150817p:plain

このように受け手に伝わる印象が変わりますね。

変更後の方がやや丸みを帯びたフォントでやわらかい印象を受けます。

さて同じように、タイトルや説明文のフォントも変えていきましょう!

ブログタイトルや説明文に反映させたい場合

この場合も手順は同じです。

デザインCSSにコードを追加して、どこに表示させたいのかをブログに教えてあげる必要があります。

ブログタイトルに表示させる場合は…

ブログ説明文に表示させる場合は…

と表示したい場所ごとに、使いたいフォント名を書き変えてあげると表示されます!

f:id:nishi244455666:20171001145905p:plain

ちなみに…

  • 3行目は表示位置(例は左寄せ。centerだと中央、rightだと右寄せになる。)
  • 4行目はフォントの大きさ

を調整できるコードですので、不要であれば消して頂いてもOKです。

ブログの顔ともいえるタイトルや説明文を変更すると…

f:id:nishi244455666:20171001150526p:plain

サンプルでは『ニコモジ』と『ニクキュウ』の個性的なフォントを使ってみました。

デフォルトに比べると、ポップな印象が強いと思います。

おわりに。

今回はグーグルが提供する可読性の高いWebフォントをご紹介しました。

ここまで工程で作業はすべて終了しましたが、お使いのブログのフォントは変更できたでしょうか?

フォントを変更しブログデザインを煮詰めることで、 ブログに個性が生まれると思います。

フォントだけでなく、ブログをカスタマイズしたいという方は以下の記事を参考にしてください!

以上!deCo..boCo..でした!