自分のSo-netブログはメイリオフォントを指定してみよう

前回は、ブラウザのフォント設定をすることで、表示フォントをメイリオに変えました。メイリオは読みやすくていいな～と思った方もいると思います。
そこで今回は、ブラウザの設定がMS Pゴシックでも、自分のSo-netブログをメイリオで表示するための設定を行ってみます。
さっそくやってみましょう。
まず、So-netブログの管理ページを開いて、デザインのページを開きます。
テンプレート管理をクリックします。


テンプレート名の横の編集をクリックします。下の画像では、石畳の横にある編集です。


スクロールバーで一番下に移動します。


以下の3行を追記します。そのあとで保存ボタンをクリックします。
body{
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}


「設定を変更しました。」と表示されればOKです。
これでCSS（カスケーディング・スタイル・シート）が変更されました。


さあ、比べてみましょう。
CSSの変更前は、上段のMS Pゴシック、CSSの変更後は下段のメイリオになりました。



自分のSo-netブログをメイリオで表示させたい方は設定してみてくださいね。
メイリオが入っていないWindows XPでは、MS Pゴシックで表示されます。

次回もお楽しみに!!

コメント 34

ブログのフォントも変えられるんですね(^-^)
参考になります(^-^)
by fullmoon (2014-01-19 09:49) 

むむっ(￣△￣；）
ちょっと高度なワザだわ・・
と思いつつ、やってみたら
簡単に出来ました。
ブログ、可愛いフォントになりました♡
有難うございます＼(≧▽≦)丿
by まこ (2014-01-19 10:13) 

fullmoonさん、いつもnice!&コメントありがとうございます。
ブログのフォントもCSSで簡単に指定できます。
ぜひ、やってみてください。
by assimane (2014-01-19 10:17) 

まこさん、いつもnice!&コメントありがとうございます。
もうやっていただけたのですね。嬉しい。
結果もいい感じなので、さらに嬉しいです(*^_^*)

by assimane (2014-01-19 10:18) 

こういうのも変更できるなんて知りませんでした。
為になります。
by ぷち (2014-01-19 10:44) 

ぷちさん、いつもnice!&コメントありがとうございます。
できるんですよ。
僕も知りませんでしたが、ちょっと調べたらわかりました。
良かったら、やってみてください。
by assimane (2014-01-19 11:26) 

PCに詳しくていいですね～
色々勉強になります^^;
by libre* (2014-01-19 15:30) 

libre*さん、いつもnice!&コメントありがとうございます。
褒めていただいてありがとうございます。
これからも楽しい情報を提供したいと思います。
by assimane (2014-01-19 16:33) 

ブログ、色々カスタマイズしてますが、
フォントはまだやったことなかったです～
簡単だしやってみようかな♪
by デルフィー (2014-01-19 19:18) 

デルフィーさん、いつもnice!&コメントありがとうございます。
いろいろカスタマイズされていますね。
フォントをカスタマイズすると、とっても優しくなると思います。
簡単なので、ぜひ、やってみてください。
by assimane (2014-01-19 19:26) 

いつか時間見つけて試してみたいです。
by サニー (2014-01-19 20:35) 

サニーさん、いつもnice!&コメントありがとうございます。
簡単なので、ぜひ、試してみてください。
分からないことがあれば、コメントかメールフォームで聞いてください。
by assimane (2014-01-19 20:47) 

ご教示に沿ってやってみました＾＾）☆
有難うございます☆☆☆

by 獏 (2014-01-19 21:04) 

獏さん、いつもnice!&コメントありがとうございます。
いかがですか。いい感じになりましたか。
試していただいて、ありがとうございます。
by assimane (2014-01-19 21:26) 

(@_@)できました！見やすくなりました。メイリオという言葉も初めて知りました。ありがとうございました。
by ロゼ (2014-01-19 23:29) 

ロゼさん、いつもnice!&コメントありがとうございます。
良かったです。うまくいって嬉しいです。
これからも訪問してくださいね。
by assimane (2014-01-19 23:38) 

　こんばんは。
変更すると、見やすくなりますね。
トライしてみようと思います！
by まる (2014-01-19 23:48) 

ブログのフォントもCSSで簡単に指定できるんですね。
時間のあるときに試してみますね。
by しろうさぎ (2014-01-20 00:10) 

まるさん、いつもnice!&コメントありがとうございます。
フォントが変わると見やすくなりますね。
ぜひ、やってみてください。
by assimane (2014-01-20 06:20) 

しろうさぎさん、いつもnice!&コメントありがとうございます。
CSSで簡単に指定できます。いちいち本文で書かなくていいので便利です。
ぜひ、やってみてください。
by assimane (2014-01-20 06:21) 

おはようございます！
いつもご訪問ありがとうございます♪
これはいいですねぇ〜
早速帰ったら設定変更してみます！
by るぐっちぃ (2014-01-20 08:13) 

メイリオは読みやすいですね。
他の特徴のある別のフォントにもできる？のでしょうか？

表示（変更）されない場合もあるのですね。
by サンダーソニア (2014-01-20 08:32) 

るぐっちぃさん、いつもnice!&コメントありがとうございます。
おはようございます。
ぜひ、やってみてください。
by assimane (2014-01-20 08:43) 

サンダーソニアさん、いつもnice!&コメントありがとうございます。
メイリオは読みやすいフォントです。
別のフォントも指定できますが、見る人のPCに指定したフォントがインストールされている必要があります。
by assimane (2014-01-20 08:47) 

変更後　読みやすいですね。
私も　がんばってやってみようかな。
by だいず (2014-01-20 11:09) 

再びすみません。
私にもできた！
ありがとうございます♪
by だいず (2014-01-20 11:35) 

わたしもやってみようかなぁ～♪♪
by yacco71 (2014-01-20 11:46) 

だいずさん、いつもnice!&コメントありがとうございます。
やってみていただけて嬉しいです(*^_^*)
うまくいって良かったです。
by assimane (2014-01-20 12:49) 

yacco71さん、いつもnice!&コメントありがとうございます。
設定は簡単です。
ぜひ、やってみてください。
わからないことがあれば、コメントかメールフォームで聞いてください(^^)
by assimane (2014-01-20 12:51) 

お尋ねします^^
昨日の午後あたりから？i-PhoneでPC版の管理画面をみると
フォントとレイアウトが変わっています。
フォントも明朝のような細い字体になってしまい><見にくいですが。
PCでは何ら変化なし…（みなさん…そうなんでしょうかね…）
そんな場合もこのフォント変更で見やすくなるでしょうかねぇ…
by orange (2014-01-22 13:58) 

orangeさんは、僕のブログのようにフォントの設定をしましたか？
もし、設定したのなら、元に戻してください。
記述した3行を消すだけです。
僕はAndroidなので変化はないです。
by assimane (2014-01-22 18:58) 

iOS6のSafariのデフォルトフォントが明朝のようですよ。
http://ofsilvers.hateblo.jp/entry/font-family-for-ios6

by assimane (2014-01-22 22:00) 

お疲れ様です。
お忙しいトコ質問してよろしいでしょうか。
今、ウチが使うとるのはテンプレートの「白」で「2カラム左 ／ 記事：ワイド ／ サイドバー：ワイド」です。
文字書体を「あんず文字」にしたいのですが、CSS（テンプレート編集）で変更できるものなのでしょうか。
パソコン自体にはすでにダウンロードしてあります。
OSはChromeです。
せっかくメイリオに関する記事を書いてらっしゃるのに｡｡すみません。
時間あったら教えてもらえないでしょうか。
by suzu* (2015-06-30 12:17) 

視力の悪い私でも

とても見やすいです。

ありがとうございました。
by たあさん (2016-03-10 21:52)