Theme Naked Blog

Nakedのカスタマイズを紹介するブログ

フッター部分を作り込む方法

カスタマイズ（Naked）

注：この記事ははてなブログテーマ「Naked」を利用されている方向けの記事です。（テーマのインストールはこちら）

このテーマには、フッターをよりリッチにしたい人向けに、CSSがあらかじめ組まれています。この記事ではフッターのカスタマイズのやり方を、書いていきます。

コードもいじる必要があるため、上級者向きの内容になります。

実装図と簡単な概要

この部分になります。どのブラウザサイズでも対応するようにしているので、PCの方は実際に横幅を変えて見てみてください。

PC

f:id:ftmaccho:20160522004307p:plain

タブレット

f:id:ftmaccho:20160522004256p:plain

スマホ

f:id:ftmaccho:20160521223738p:plain

概要

フッターの色を若干濃いめの灰色にしているので、ブログ全体の印象をしめることができ、また、よりたくさんの情報を入れることができます。

上の図にあるように、３カラムで、すべてのカラムは横幅300pxに設定されています。ちょうどサイドバーの横幅と同じであり、だいたいの広告のサイズに対応しています。サイドバーモジュールの「カスタムHTML」と同じ感覚で使うことができます。

記事部分と違い３カラムなので、ブレイクポイントは680pxと1110pxとなっており、記事部分とは違ったタイミングでレイアウトが変更されます。（記事部分は768pxと680px）

カスタマイズ

カスタマイズはこのようなものになります。

<div id="n-footer">
<div id="n-footer-inner">
<div class="content content1">
<!--左のHTML-->

</div><!--content1閉じ-->
<div class="content content2">
<!--真ん中のHTML-->

</div><!--content2閉じ-->
<div class="content content3">
<!--右のHTML-->

</div><!--content3閉じ-->
</div>
</div>

このHTMLを「フッター」の部分の一番上に入れ、それぞれ「左のHTML」、「真ん中のHTML」、「右のHTML」と書かれているところ（空行のところ）に、ご自身が入れたい内容を入れてください。

以上でカスタマイズは終了です。

その他のカスタム

タイトルを入れる

f:id:ftmaccho:20160521175454p:plain

タイトルを入れる場合は、HTMLの中に

<div class="hatena-module-title">Facebook</div>

と入れると、サイドバーのタイトルと同じデザインのものが出てきます。

色の変更

フッターの色が変わると、印象が大きく変わります。

f:id:ftmaccho:20160522003202p:plain

上のような色合いに変更するには、

#n-footer {
    background-color: #333;/*背景色*/
}
#n-footer .hatena-module-title {
    color: #eee;/*タイトル文字色*/
    border-color: #ccc;/*タイトル横のボーダーの色*/
}

とすることでできます。それぞれの変更する場所は上にメモしてあるので、

www.colordic.org

などから色のコードを入れてみてください。

注目記事モジュールを入れたい

f:id:ftmaccho:20160521175945p:plain

注目記事モジュールを入れたい場合は、

<div class="hatena-module-title">注目記事</div>
<div class="hatena-module hatena-module-entries-access-ranking"
     data-count="5"
     data-display_entry_category="1"
     data-display_entry_image="1"
     data-display_entry_image_size_width="60"
     data-display_entry_image_size_height="60"
     data-display_entry_body_length="0"
     data-display_entry_date="1"
     data-display_bookmark_count="1"
     data-source="access"
>
  <div class="hatena-module-body">
  </div>
</div>

を、入れたい位置にコピペで入れてください。