Blogのデザインにいくらこだわっても、表示フォントがダサいと台無しです。
私はMacユーザーなので、Windows PC で自分のBlogがどのように表示されているのか今までは知らなかった。しかし、去年末に自作PCを組んで自分のBlogを見てガッカリしましたよ。だせぇ・・・ フォントがMS P明朝体？ってので、なんかカクカクしてるｗ
livedoor Blogは、使用するテンプレート毎にデフォルトフォントが異なるのかどうかは知りませんが、私が使っているテンプレートだとWindowsとMacで表示した際のイメージがまるで違っていました。
と、言うことでlivedoor Blog フォントのカスタマイズ方法をまとめました。
color: の後ろ『＃000000の箇所』に設定したいカラーコードを記述すれば色の指定ができます。
カラーコードを探すにはこちらのサイトが良いと思います。
カラーコード作成ツール
livedoor Blog 全体フォント 表示の変更方法
調べてみると、多くのWEBサイトで『メイリオ』という表示フォントを使用しています。私も会社の提案書を作るとき表示・印刷のイメージが綺麗なメイリオを愛用しています。
他にも『游ゴシック』ってフォントも良いらしいんだけれど、個人的にはメイリオが好きなのでこのフォントに統一する事にしました。
■ 設定方法（CSS編集画面）
そもそも、CSSとはなにかといと・・・（Cascading Style Sheets、カスケーディング・スタイル・シート）の略で、ウェブページのスタイルを指定するための言語です。文書のスタイルを指定する技術全般をスタイルシートといいます。
livedoor Blog のCSS編集は以下の通りの設定画面で編集が可能です。
① livedoorの管理画面から「ブログ設定」をクリック
② 保存/共有タブをクリックして現状を保存！（保険の為）
③ デザイン / ブログパーツ設定の「PC」をクリック
④「カスタマイズ」をクリック
⑤ 「CSS」タブをクリック
■字体の変更
CSS 編集画面内から以下の場所を探します。
/* 全体の文字色、リンク色
———————————————– */
body {
color: #000000;
font: 13px/1.2 ‘ヒラギノ明朝 Pro W3′,’Hiragino Mincho Pro’,’ＭＳ Ｐ明朝’,’MS PMincho’,sans-serif;
}
font:の後ろに、設定したいフォントを記述 して「保存」をクリックすれば設定が完了します。
私の場合「16px/1.2 ‘メイリオ’」と記述しました。
これで、Blog全体の基本フォントが変更されます。
私の場合「16px/1.2 ‘メイリオ’」と記述しました。
これで、Blog全体の基本フォントが変更されます。
『16px/1.2』は、フォントサイズと行の高さ指定なので、記述しなくてもいいですし変更しても構いません。 また、フォントとフォントの間を『;』セミコロンで区切る事で複数のフォントを設定できます。
画像の通りメイリオを先頭に記述する事で、メイリオが優先的に利用されるフォントとなります。
また、PCにメイリオが無い場合はヒラギノ明朝が利用され、それもない場合は、MS P明朝と、順番で利用されます。
設定する際には、フォント変更、サイズや高さの数値入力の度に、表示確認をしながら微調整するのが良いと思います。
■文字色の変更
color: の後ろ『＃000000の箇所』に設定したいカラーコードを記述すれば色の指定ができます。
カラーコードを探すにはこちらのサイトが良いと思います。
カラーコード作成ツール
body {
color: #000000;
}
}
bodyは、Blogの基本色の指定です。
a {
a:link {
a:link {
color: #000000;
}
}
リンクの文字色の指定です。
a:visited {
color: #000000;
}
}
訪問済みのリンクの文字色を指定します。
■オンマウス時の装飾
リンクが貼られている文字にカーソルを合わせた時の装飾です、オンマウス時の文字変化を設定します。
a:hover {
background: #000000;
text-decoration: underline;
}
text-decoration: underline;
}
background： 背景色をカラーコードで記述します。
text-decoration： 文字装飾の指定です。
none： 装飾なし
none： 装飾なし
underline： 下線を引く
まとめ
ライブドアブログのフォントカスタマイズの方法をまとめました。
「全体の設定」をしても、「個別の設定」がある場合にはそちらが優先されます、その場合は、「個別の設定」を変更する必要があるので注意です。
そして今回は、軽い気持ちで記事を書いていたら結構な時間が掛かってしまいました ^^;
livedoor Blog Customize 他の記事はこちら
ユーザー投稿