【決定版】はてなブログで他のブログのフォント設定をコピペして、自分のブログに設定する方法

ブロブのフォントを変えたら、PV（ページビュー）が増えるかもしれない。

だけど、CSSの勉強はあまりしたくない。

そんな方向け。

『他人のブログのフォント設定を、コピペして自分のはてなブログに設定する方法』

をご紹介します。

気に入ったブログのフォントを調べる方法

[WHATFONT]をインストール

1.まず、下記英語ページで『WHATFONT TOOL』をダウンロードします。

http://www.chengyinliu.com/whatfont.html

『WHATFONT』を使って他の人のWebページに使われているフォントを調べることができます。

2.インストールすると、Safariの場合なら拡張機能として、『B!』ボタンの隣に『f?』ボタンが並びます。

f:id:meikellog:20170907020052p:plain

3.他人のページの利用フォントを調べるには、『f?』ボタンを押してから、ページの知りたいフォントにカーソルを置き、クリックします。

f:id:meikellog:20170907022017p:plain 　　 f:id:meikellog:20170907022142p:plain

こんな感じで、利用しているフォントがわかるので、”Font Family（フォント）”、”Font Size（大きさ）”、”Line Height（文字間隔）”をコピーして後ほど自分のブログに貼り付けます。

”Font Family”にはいくつかのフォントが入っていますが、カナだけのフォントなどもあるため、記載の順に試していって、あったものがブラウザに表示される仕組みです。

下記のページにも『WHATFONT』の解説があります。フォントを多用しているので、『WHATFONT』の試用にはピッタリです。よくデザインされたブログです。

blog.petitboys.com

自分のブログのフォントを変える方法

f:id:meikellog:20170905114256j:plain

それぞれの変更箇所に対応したCSSコードをはてなブログの「デザイン」→「カスタマイズ（スパナ）」→「{ }デザインCSS」に貼り付けます。

①ブログのタイトル

/* ---------タイトルのフォントを変更------------ */
#title a {
 font-family:　'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
}

②説明文

/* ---------説明文のフォントを変更------------ */
#blog-description {
 font-family:　'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
}

③記事タイトル

/* ---------記事タイトルのフォントを変更------------ */
.entry-title {
 line-height: 30px;
 font-family:　'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
}

④見出し

/* ---------ブログの見出しのフォントを変更------------ */ 
.entry-content h3,.entry-content h4,.entry-content h5{  
 line-height: 30px;
 font-family:　'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
}

⑤本文

/* ---------ブログの本文のフォントを変更------------ */
body {
 font-size: 16px;
 line-height: 27px;
 font-family:　'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
}

この時に、先ほどコピーした”Font Family（フォント）”、”Font Size（大きさ）”、”Line Height（文字間隔）”を貼り付けます。