photo credit: Nick Sherman via photopin cc
どうも！Hayabusa(@hayabusa_823z)です。今回は、はてなブログでWebフォントを使用して、ブログの見栄えを変更する方法についてご紹介します。
Webフォントについて
今回は、使いやすいWebフォントであるGoogleFontを使用します。
Webフォントは、個人的なイメージとしては、サーバーに置いたフォントを読み込ませてページに適用して表示している仕組みみたいです。
私の場合、タイトル部分に適用しています。これを使うと、文字であるため、高解像度ディスプレイ環境で、画像を使うよりもくっきり表示できたり、閲覧環境に依存せず自分の使ったフォントが表示されるメリットがあります。
Webフォントを変更する方法
※テンプレートをすでにカスタマイズ済みの場合、デザインCSSの記述を全コピーして、変更前に、すぐにもとの状態にもどせるよう控えをとっておくことをおすすめします。
まず、準備段階として、以下のサイトを参考にさせていただきました。
はてなブログ開設しました！Webフォント「Google web fonts」の導入メモ。 - Gadget Girl
ページを参考にしながら、設定→デザイン→PC版のデザインのタブ→デザインCSSに、Webフォントを読み込ませる記述を行い、保存します。 その後は、以下を参考に、変えたい要素を記述し、GoogleFontから その変えたい要素の名前＋｛ ｝で囲んだ中にコピーの指示がある記述を貼り付けます。
ブログの主なCSSの要素（Class)
ヘッダー系
- ブログタイトル(PC版)
#title→タイトル部分
#blog-description→ブログ説明部分
- ブログタイトル（スマートフォン）
a.blog-title→ブログタイトル
.entry-title→記事タイトル名
p>
※スマートフォン版は、設定→詳細設定 のHead要素を記述する部分で、Styleタグで囲んだなかに、PC版と同様の方法で記述します。 また、フォントを変えるとサイズが小さくなる場合があるので、font-size: ◯◯px;という記述（◯にはサイズの数字が入ります）をフォントをfont familyの記述を貼り付けた下に追加すると見やすくなるかもしれません。
- 記事エントリ部分
.entry-title→記事タイトル名
.date-year→記事投稿の年
.date-month→記事投稿の月
.date-day→記事投稿の日
.entry-content→記事本文
- サイドバー部分
.hatena-module-title→サイドバーの各項目のタイトル
.profile-description→サイドバーのプロフィール記述部分
p>
以上がよく見える部分の主な要素になります。
あとがき
フォントを変えてみると、ブログの印象ががらっと変わるので、新鮮な気分になってきますね。ただ、やりすぎると、読み込みに時間がかかる可能性があるので、どこかワンポイントに絞ると良いかもしれませんね^^