[ライブドアブログ]全体のフォント（書体、文字色）をカスタマイズしよう

こんにちは。ユージーン(@Eugene_no2)です！

ライブドアブログの初心者向けに、デザインをカスタマイズする方法をまとめています。

このページでは、ブログ全体のフォント（書体や色）のカスタマイズについて解説します。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

まず、ブログのCSS編集画面を開こう

まず、ライブドアのブログ管理画面の【ブログ設定】→デザイン / ブログパーツ設定の【PC】→【カスタマイズ】→【CSS】と進みます。

ブログ全体のフォントを変更するには、主にこのCSSの中の記述をいじっていきます。

CSSって何？という方でも分かるように解説していますが、もう少し詳しく知りたいという方は、「HTMLとCSSのこれだけは知っておこう！」をご覧ください。

「全体の設定」と「個別の設定」の関係について知ろう

まず、フォントを設定する際に知っておくべきことがあります。それは、全体の設定と、個別の設定の関係性について。

このページでは、ブログ全体のフォントの設定を変更する方法を解説していますが、例えばブログ全体の字体を、‘メイリオ’ と指定すると、ブログのほぼ全体が、 ‘メイリオ’ になります。

ただし、個別のパーツ、例えばブログタイトルだけは、 ‘HGPｺﾞｼｯｸE’ にしたいという場合は、CSS内の、

#blog-title {}

の部分で個別に指定することが出来ます。

（詳細は「ヘッダー(タイトル)のデザインをカスタマイズしよう」を参照）

つまり、全体の設定よりも、個別の設定のほうが優先されてサイトに反映されるんです。

もし、個別の設定がない場合は、全体の設定が反映されるということになります。

逆を言えば、このページの説明に従って全体の設定を変えても、実際に反映されない場合は、個別の設定がされている可能性が考えられます。　→個別の設定の目次へ

全体のフォントをカスタマイズする

全体のフォントをカスタマイズするには、CSSの中にある、

/* 全体の文字色、リンク色
———————————————– */
body {
    color: #000;
    font: 14px/1.2 Verdana,sans-serif;
}
a {
    color: #0000cd;
}
a:link {}
a:visited {
    color: #0000cd;
}
a:hover {
    text-decoration: none;
}

という感じの部分を見つけてください。

字体の設定を変更する

難易度：★★☆☆☆

全体の字体を変更するには、

body {
    font: 18px/1.2 ‘メイリオ’,sans-serif;
}

という部分を変更していきます。

‘メイリオ’,sans-serif　とカンマ区切りで字体が複数並んでいます。場合によっては5つくらい並んでいることもあります。

なぜ複数あるかというと、パソコンによってインストールされているフォントが同じとは限らないからなんですね。

なので、もし最初の字体が無かったら次の字体、それもなかったらその次の字体…

というように、パソコンの環境によって字体を切り替えられるようになっているのです。

ひとまずは、よっぽど珍しい字体でなければ、最も優先させたい字体を一番最初に入力してあげれば良いかと思います。

なお、フォント名を記述するには、 Arial Boldのように２語以上のものや、MSゴシックのように日本語のフォントの場合は、“Arial Bold”, ‘MS ゴシック’のように引用符で囲う必要がありますので、ご注意ください。

文字色の設定を変更する

難易度：★★☆☆☆

全体の文字色を変更するには、次の太字の部分を変更します。

body {
    color: #000;    /* 通常の文字色 */
}
a {
    color: #0000cd;     /* リンクの文字色 */
}
a:link {}
a:visited {
    color: #0000cd;     /* 訪問済みのリンクの文字色 */
}

上記の通り、文字色は大きく三種類あります。

リンクの文字色は、ライブドアブログで選んでいるテンプレートによって、a { } で指定されていたり、a:link { } で指定されていたりしますが、ひとまずは指定されているほうのコードを書き換えればOKです。どうしても違いが知りたい方はこちら（外部サイトへ）

文字の色については、16進数カラーコード（#＋英数字6ケタ）で指定します。

（参考：WEB色見本 原色大辞典）

オンマウス（カーソルを乗せた状態）時の装飾を変更する

難易度：★★☆☆☆

Webサイトを閲覧する際、リンクが貼られている文字にカーソルを合わせた時（オンマウス）に、文字が変化することがありますよね。

このように、カーソルを合わせた時のデザインを変更するには、

a:hover {
    background: #d3d3d3;
    color: #000000;
    text-decoration: underline;
}

という部分を変更していきます。

• background：　背景色を16進数カラーコード（#＋英数字6ケタ）で指定
  
  （参考：WEB色見本 原色大辞典）
• color：　文字の色を16進数カラーコード（#＋英数字6ケタ）で指定
  
  （参考：WEB色見本 原色大辞典）
• text-decoration：　文字の装飾を指定
  • none：　装飾なし
  • underline：　下線を引く

まとめ

今回は、ライブドアブログの「全体のフォント（書体、文字色）」をカスタマイズする方法をまとめました。

冒頭でも書きましたが、「全体の設定」をしても、別に「個別の設定」がある場合には、そちらが優先されるため、変更が実際のページに反映されません。

その場合には、「個別の設定」を変更する必要があります。

このブログでは、各パーツごとに、「個別の設定」方法も紹介していますので、合わせて参考にしてください。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

では、今日も頑張らずに楽しんでいきましょう～！