こんにちわ。
アメブロカスタマイズ制作DaitenshI+(ダイテンシプラス)のあさくらです。

アメブロをはじめてもうすぐ一か月になります。
最近読者になってくれる皆様から


「参考にします」


と、嬉しいメッセージを沢山いただきました。
ありがとうございます。

参考になればと、簡単に見やすくなる方法などを不定期ですがご紹介していこうかと思いますので、ご興味ありましたらご覧ください。

アメブロ講座-フォント(2)


最近よく、この書体のホームページやブログをみかけませんか?

こちらの書体は『メイリオ』と言って、Windows Vistaより標準の書体となりました。
今までのMS Pゴシックの書体よりも見やすく、小さくなっても読みやすい書体です。
わたくしのアメブロもこの『メイリオ』という書体にしています。

ブラウザや、環境によって書体も変わってしまいますが、Windows環境の方も多いですので、書体をまず変えてみましょう音譜


アメブロ講座-CSS編集


『ブログを書く』の中に『デザインの変更』という項目があります。

そうすると上の画像の様なページが出てきますので、『CSSの編集』のリンクをクリックします。
すると、CSSの編集画面が出てきます。


■CSSを編集する前に
ウッカリ間違えてしまったら大変です!!
編集前に必ず、全部をコピーして、メモ帳にコピーしたCSSをペーストしておきましょう!


ではいきますよ。


【カスタム可能】ベーシックの場合のCSSファイルです。
大体100行目ぐらいのフォントの指定を変えたいと思います。

CSSの中にこうゆう部分があるかと思います。

------- C S S -------
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■ ブログデザイン基本設定 ■■■■■■■■■■*/

/*■■■基本設定 - ブログデザイン基本設定*/
/*■タグ初期化 - 基本設定 - ブログデザイン基本設定*/
html {
font-size:12px !important;
*font-size:75% !important;/*forIE6IE7*/
}
body{
margin:0;
padding:0;
text-align:center;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
}
  :
  :
------- C S S -------


↓ここの部分を↓

font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

   ↓↓

font-family: "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Helvetica;

に変更します。

他のテンプレートの場合は、bodyと書いてある部分にフォント青い部分を追加してみてください。

------- C S S -------
body{
margin:0;
padding:0;
text-align:center;
font-family: "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Helvetica;
}
  :
  :
------- C S S -------

どこを編集していいかわからない人は、こちらをCSSの一番下にコピペをしてください。

------- この下から -------
body {
font-family: "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Helvetica;
}
------- この上まで -------



追加をしたら『保存ボタン』をクリックして保存しましょう。

早速、ブログを確認してみてください。

こちらのMS Pゴシックの書体から
アメブロ講座-フォント(1)

メイリオの書体に!
アメブロ講座-フォント(2)


どうです?
MS Pゴシックの書体から丸みのあるメイリオに変わってみるとちょっと字が見やすくなったのではないでしょうか?

ご利用になってるパソコンにメイリオのフォントがない人は、Microsoftの公式ページからDL出来ますので、インストールしてみるのもよいかと思います。


フォントも変わりました。
が、アメブロの初期設定って文字の大きさ、小さいですよね。

次は、フォントの大きさを変更する方法をやってみましょう!

何かご質問があればコメント欄にご記入ください。

※一部、わかりやすく改正しました。