PCインストラクターの川上です。
実は、昨日から私のブログのフォントの一部を、メイリオフォントに変更しました^^
って、別に気づいた、気づかない、ということを論ずるわけではありませんので^^;
もう変わっているので、
あれっ、前はどうでしたか～？
という感じですよね。
そう、以前はこんな感じでした。
（今回変更したのは、下の赤い枠のところ･･･１．メニューバー、２．記事タイトル、３．記事本文）
いや、見ても違いがわかりませ～ん、と言われると思いますが・・・^^;
メイリオフォントは、通常のフォントよりもなんかやさしい感じがするのです。
そもそも、「メイリオ」の語源は「明瞭」がモトなのですね。
画面上で見ても印刷しても極めて明瞭で読みやすい所から、そう名付けられたようです。
でも、メイリョウでなく「メイリオ」であるのはエキゾチックな響きであること、および1文字少ないためであることが理由とされているようです。（Wikipediaより）
ウンチクはこのくらいにして、進みます（笑）
ブログのある箇所（もちろん全体もOKですが）をメイリオフォントに変更する方法はいくつかあります。
まず、1つ目の方法を記事本文で試してみます。
元々のフォントはこんな感じ↓
まずは、「カスタム可能」でないデザインにしている方向けに。
フリースペース編集で、
<style type="text/css">.articleText{font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif;}</style>を入れてあげます。（入力、またはコピペ）
「保存」をクリックして、ブログを更新（F5キー or command＋R）すると、
記事本文がメイリオフォントに変わります。
今度はメニューバーの項目名をメイリオフォントに変更してみます。
まず、最初のフォントはこんな感じでした↓
それをこのようにメイリオフォントに変更します↓
ここでは、［CSSの編集］デザインを使用している場合で説明します。
（？という方は『「CSSの編集」をクリックするとは』をご覧になってください^^）
元々のCSSソース↓を
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:3.5px; /*メニューのスキマ*/
background-color:;/*背景色（）*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
display:inline;
list-style:none;
float:left;
background-image:url(画像url);/*背景イメージ*/
}次のように変更します。
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:3.5px; /*メニューのスキマ*/
background-color:;/*背景色（）*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
display:inline;
list-style:none;
float:left;
background-image:url(画像url);/*背景イメージ*/
}そう、
font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;を追加したのです。
記事タイトルも同様に追加して
/* 記事タイトル */
.skinArticleHeader2 {
font-size :1.0em; /* 文字サイズ */
font-weight :bold; /* 文字の太さ */
font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
margin :20px 0px 0px 0px; /* 上 右 下 左 */
padding :20px 0px 0px 10px;/* 上 右 下 左*/
}このように↓変更されます。
このように、3か所メイリオフォントに変更することができました。
なお、ブログ全体をメイリオフォントにしたい場合は、
・「カスタム可能」デザインでない場合
フリースペース編集で
<style type="text/css">body{font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;}</style>・「CSSの編集」デザインの場合
CSSソースに
/* 全体にメイリオ */
body{
font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}を追加することになります。
さらに･･･
ブログの方ではなくて、プロフィールページの方もメイリオフォントにしたい場合は･･･
こちらのやさしいあのお方がすでに書かれていました～(@_@)
ですので、ご覧になってみてくださいませ^^!
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大