見やすいブログ ~CSS フォント一括変更~

前に、見やすいブログ ~見た目は大事~という記事で、本文記事のフォントの変更方法を紹介させて頂き、プロフィールとかも同じように変更をしていました。

でも、個別にフォントを指定していくと「あれっ?ここ出来ていない?」という箇所も出てきて、CSS設定に慣れていない私としては簡単な方法がないものかなと模索しておりました。

するとCSSも“*”が使えるんですね。

“*(半角アスタリスク)”はワイルドカード。どんな文字にもどんな文字数にもなれるんです。

だから、

* {
font-family:"メイリオ",Meiryo;
}

CSSに付け加えれば、ブログ内のフォントを一括指定

できるんですね。

それと私のブログでは、これにフォントの第2候補をプラス(もし、フォント“メイリオ”が入っていない場合に第2候補のフォントで表示させる)して、以下のようにしました。


* {
font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
}

これを(ウェブリブログ)CSSの出だしの部分に入れて、以下のようにしています。


/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
/* 一括フォント変換 */
* {
font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
}


/* 上記のこの両方の記号にはさまれている部分はコメントです */
※ブログには表示されず設定に影響しません。
※自ら何の為に行ったか判るように入れています。

これで、ブログ全体のフォントを一括変更しちゃいました。


いやぁ~っ、便利便利(^-^)


ついでに、行間も気になっていたので、本文記事の行間を若干広げるため以下の設定を追加

/*------------------ 記事本体 ------------------*/
#blog-body{
font-size:15px;
line-height:1.7em;
}

赤文字の部分に以前はフォントを指定する一文が入っていましたが、一括でフォントを指定し、不要となったため削除し、行間を指定する一文を入れました。
※1.7を変更する事で行間が変わります。
※フォントの大きさについては過去記事(見やすいブログ ~幅・フォント変更(ウェブリブログ)~)を参照ください。


もう、どんどん進化していって楽しいです。

一人で喜んでおります。

いろいろとCSSをいじって、ブログが自分好みに近づくとうれしくなりますね。

それと、前からこのブログは、ちょっと冷たい感じがするなと思っていたので、右上に家の相棒の写真とコメントを入れてみました。知恵を絞って作りましたw

次回は、これをどのようにして作ったか、せん越ながらお伝えしたいと思います。


いやぁ、素人ながらがんばっております(^-^)


関連記事:
見やすいブログ ~幅・フォント変更(ウェブリブログ)~
見やすいブログ ~広告も大事でしょ?~
見やすいブログ ~フォントの話~


 ・ブログ 記事一覧
  ―こんな記事も読まれています―

この記事へのコメント

このブログへのお問い合わせ

ブログ名:
きになるてん
読者メッセージを送る
パンチが効いていれば人気ブログランキング