[ライブドアブログ]フッターのデザインをカスタマイズしよう

注記:16年9月、当ブログはライブドアブログからWordPressに移転しました。現在はライブドアブログではありませんが、引き続き、ライブドアブログを使っている方のお役に立てれば幸いです。ライブドアブログからWordPressへの移転方法の解説はこちら。

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

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

このページでは、フッター部分のデザインのカスタマイズについて解説します。

フッターというのは、ブログの一番下の「Powered by ライブドアブログ」と書かれている部分です。

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

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

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

144-2

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

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

フッターのデザインをカスタマイズする

フッター部分のデザインをカスタマイズするには、CSSの中にある、

#blog-footer {
}
#blog-footer a {
}
※{ }内は省略しています。

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

フッターの背景色、文字色を変更する

難易度:★★☆☆☆

フッター部分の背景色(塗りつぶし)や文字の色を変更するには、

#blog-footer {
    background: #fff; /*フッターの背景色*/
    color:#555;  /*フッター内の文字色*/
}
#blog-footer a {
    color:#555;  /*フッター内のリンク付の文字色*/
}

上の太字部分を変更していきます。

もし該当する行が無ければ、付け加えてもOKです。

色は全て、16進数カラーコード(#+英数字6ケタ)で指定します。

(参考:WEB色見本 原色大辞典

そもそも、ライブドアブログのテンプレートの中には、他の部分と色を同じにして、フッターが目立たないようにデザインされているものも多いです。

その場合は、 background の部分の色を変更してみれば、はっきりと位置が分かるはずです。

フッターの位置をはっきりさせる

また、文字の色に関してですが、全てのテンプレートには「Powered by ライブドアブログ」と書かれていますが、その中でも「ライブドアブログ」の文字列にはリンクが貼ってあります。

つまりは、

#blog-footer {
    color:#555;  /*「Powered by」の文字色*/
}
#blog-footer a {
    color:#555;  /*「ライブドアブログ」の文字色*/
}

を、それぞれ指定していることになります。

フッター内の文字(テキスト)の書式を変更する

難易度:★☆☆☆☆

文字(テキスト)の書式を変更するには、

#blog-footer {
    font-size: 16px;
    font-weight: bold;
    font-family: ‘HGP行書体’;
}

上の太字部分を変更していきます。

もし該当する行が無ければ、付け加えてもOKです。

  • font-size: 文字の大きさを数値で指定
  • font-weight: 文字の太さを指定
    • normal 普通
    • bold 太字
  • font-family: 字体を指定

    字体(フォント名)を記述するとき、 Arial Boldのように2語以上のものや、MSゴシックのように日本語のフォントの場合は、“Arial Bold”, ‘MS ゴシック’のように引用符で囲う必要があります。

フッターのサイズ(横幅、高さ)を変更する

難易度:★★☆☆☆

フッター部分のサイズ(横幅、高さ)を変更するには、

#blog-footer {
    width: 940px;
    height: 150px;
}

上の太字部分を変更していきます。

もし該当する行が無ければ、付け加えてもOKです。

  • width: フッターの横幅を数値で指定します。画面いっぱいにフッターの横幅を広げたい場合は、 100% と記述します。
  • height: フッターの高さを数値で指定します。

フッター内の文字(テキスト)の位置を調整する

難易度:★★★☆☆

フッター内で、文字(テキスト)の位置を調整するには、

#blog-footer {
    text-align: center;
    padding: 50px 0;
}

上の2つを組み合わせて、位置を調整することが出来ます。

もし該当する行が無ければ、付け加えてもOKです。

  • text-align: テキストの左右の位置を選択。
    • center 左右中央
    • left 左寄せ
    • right 右寄せ
  • padding: フッター内部の余白を数値で指定。
    • 数値が1つの場合: 上下左右の余白を指定
      (例)padding: 20px →上下左右に20px の余白
    • 数値が2つの場合: ①上下、②左右の余白を指定
      (例)padding: 20px 0 →上下に20pxの余白、左右は余白なし
    • 数値が3つの場合: ①上、②左右、③下の余白を指定
      (例)padding: 20px 0 10px →上下に20pxの余白、左右は余白なし、下に10pxの余白
    • 数値が4つの場合: ①上、②右、③下、④左の余白を指定
      (例)padding: 20px 0 10px 5px →上に20px、右は0px、下に10px、左に5pxの余白

言葉での説明だけだと分かりづらいので、例を出します。

例えば、「Powered by ライブドアブログ」の文字を左に寄せたいと思って、

#blog-footer {
    text-align: left;
}

とだけ指定すると、テキストの位置はこのようになります。

右端により過ぎてしまったテキスト

さすがに、これだと左端過ぎるので、ここでpadding の出番です。

#blog-footer {
    text-align: left;
    padding: 20px;
}

と指定すると、上にも左にも20px の余白が出来ることになるので、テキストの位置はこのように移動します。

paddingで移動したテキスト

このようにして、text-alignpadding を組み合わせて、テキストの位置を調整することが出来ます。

フッターの上部(下部、左右)に線を加える

難易度:★★☆☆☆

よくフッター部分の上部に線を入れているWebサイトが多く見られます。

フッター上部に線を追加

フッター部分の上下左右に線を加えるには、

#blog-footer {
    border-top: 5px solid #000000;
}

上の太字部分を変更していきます。

もし該当する行が無ければ、付け加えてもOKです。

  • 線の位置: 次の中から選択
    • border: 上下左右
    • border-top: 上線
    • border-bottom: 下線
    • border-left: 左線
    • border-right: 右線
  • 線の太さ: 数字(px) で指定
  • 線の種類: 次の中から選択
    • solid: 一重線(普通の線)
    • double: 二重線
    • dashed: 破線
    • dotted: 点線
      他にも、立体的に見せるような線の種類もあります。詳しくは「スタイルシートリファレンス(外部サイト)」が参考になります。
  • 線の色: 16進数カラーコード(#+英数字6ケタ)で指定
    (参考:WEB色見本 原色大辞典

まとめ

今回は、ライブドアブログの「フッター部分」のデザインをカスタマイズする方法をまとめました。

このブログでは、初心者向けにライブドアブログのカスタマイズ方法を紹介しています。

別の部分のデザインのカスタマイズ方法もまとめていますので、合わせて参考にしてください。

ブログの各パーツと目次

【ブログデザインのカスタマイズ方法 もくじ】

★.スマホ向けページのカスタマイズについての解説
★.ライブドアブログのメリットまとめ

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

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