アメブロのフォントをメイリオや游ゴシックに変更し、文字を大きくする方法　CSSブログカスタマイズ

読者目線で読みやすいブログにカスタマイズ。

ブログご訪問ありがとうございます。
営業とネット集客に強い個人事業主向けビジネス心理コンサルタント漆沢英一です。

アメブロカスタマイズで最初に行うこと

アメブロカスタマイズでの最優先事項は、ブログ記事の文字の大きさとフォントの変更です。

標準の文字の大きさやフォントでは、パソコンでは読みづらく感じます。

読者目線で、読みやすく伝わりやすくることが、アクセスアップにつながるアメブロカスタマイズの基本です。

文字を大きくしフォントを変える方法

文字を大きくしフォントを変える方法は、大きく分けて二つあります。

ブログデザイン⇒デザインの変更から、カスタマイズできるCSS編集のデザインに変更してフォントを指定する
フリープラグインにCSSを書いてフォントを指定する

CSSで変更する場合

当ブログのフォント指定および文字の大きさ指定は下記のとおりです。

下記のタグをCSSに追加しています。

/* フォント変更*/

body{
font-family: Arial, Roboto, "Droid Sans","メイリオ", Meiryo,"游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif;
}

/* 記事、メッセージボードの文字 */

.articleText{
  font-size: 1.2em; /* 文字サイズ */
  line-height:1.2; /* 行の高さ*/
  color:#333333;/* 文字の色*/
}
div.skinMessageBoard{
  font-size: 1.17em; /* 文字サイズ */
  line-height:1.2; /* 行の高さ*/
  color:#333333;/* 文字の色*/
}

フォントは、見ている人のパソコンやスマートフォンに入っているフォントで表示されます。

そのため、沢山の人のパソコンやスマートフォンに入っているフォントを指定することで、同じデザイン・雰囲気で読んでいただけます。

このブログで指定しているフォントの説明

body{
font-family: Arial, Roboto, "Droid Sans","メイリオ", Meiryo,"游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif;
}

font-family:の後ろが指定しているフォントで、左から優先的に表示されます。

まず、最初のArialは、WindowsとMac共通の欧文フォントです。

欧文に関しては、これでWindowsとMac同じ表示になるように設定しています。

そして、RobotoとDroid Sansは、スマートフォンのことを考えた対応です。

”Hiragino Kaku Gothic ProN”はiOS　MacやiPhone、iPadなどを考慮した対応です。

パソコンの表示フォントは、メイリオを優先して指定しています。

メイリオは、非常にきれいで優しい雰囲気のフォントです。

しかし、WindwosのみでMacには標準では対応していません。

OS X Mavericks以上で閲覧している方向けには、游ゴシックを指定しています。

游ゴシックや游明朝は、Windows 8.1以上やOS X Mavericks以上で共通で表示できます。

●このブログのパソコンフォント優先順位

メイリオ（Windows)
游ゴシック（Windows 8.1以上やOS X Mavericks以上）
"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN(Mac)

メイリオを優先したい場合は

body{
font-family: Arial, Roboto, "Droid Sans","メイリオ", Meiryo,"游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,sans-serif;
}

游ゴシックを優先したい場合は

body{
font-family: Arial, Roboto, "Droid Sans",游ゴシック", YuGothic,"メイリオ", Meiryo,""ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,sans-serif;
}

明朝系にする場合は

body{
font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
}

CSSの一番最後に追記します。

ちなみに、游ゴシックだとメイリオより少し小さく表示されます。

フリープラグインで変更する場合

カスタマイズできるCSS編集のデザインにされていない方は、下記のタグをフリープラグインに張っていただくと当ブログと同じフォントで表示されます。

フリープラグインは文字数が少ないため、一列でコードを書いています。

<style>body{font-family: Arial, Roboto, "Droid Sans","メイリオ", Meiryo,"游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,sans-serif;}</style>

文字の大きさは、新デザインの場合,16PXで指定されていますので、そのままでも十分だと存じます。

旧デザインの場合は下記をフリープラグインに追記して保存すると、このブログと同じように表示されます。

<style>.articleText{font-size:1.2em; line-height:1.2; color:#333333;}div.skinMessageBoard{font-size:1.17em; line-height:1.2;　color:#333333;}</style>

外部のWebフォントサービス

＊アメブロでは、2017年3月以降仕様変更のため、フリープラグインによる外部フォントが使えなくなりました。

読者目線で、一番最初に行うカスタマイズ

それが、「フォントと文字の大きさ変更」です。

ヘッダをつけたり、メニューをつけるより「読みやすさが」カスタマイズの最優先事項です。

自分好みのデザインで文字を小さくしたり、特殊なフォントを指定することは、読者やお客様の事を優先していません。

読者目線で読みやすいブログにカスタマイズすることをお勧めします。

読者やお客様目線で発信していくことが集客にもつながります。

▼最後までお読み頂き、ありがとうございます▼