カスタマイズ4：フッターにコンテンツを表示

ブログの一番下、フッターもカスタマイズしてみましょう。普段は目立たないところですが、ここにこだわると「やるな」と思われますよ。

フッターのカスタマイズ

まずはブログのデザイン設定を開き、スパナマークのカスタマイズタブを開きます。

その中のフッタを開き、入力欄をクリックします。

そしてここにhtmlコードを入力します。入力するコードは以下を参考にしてください。

<div class="three-footer">
    <div class="footer-1">1つ目の内容</div>
    <div class="footer-2">2つ目の内容</div>
    <div class="footer-3">3つ目の内容</div>
</div>

なお、このサンプル用のサイトでは以下のように設定しています。

<div class="three-footer">
<div class="footer-1">
    <div class="footer-h"><i class="blogicon-help-alt lg"></i> ABOUT</div>
    <p>ZENO TEALはトップページをカード型にしたはてなブログ用テーマです。全体的にはフラットにまとめています。テーマをもとに、いろいろカスタマイズして自分に使いやすいようにカスタマイズしてみてください。</p>
</div>

<div class="footer-2">
    <div class="footer-h"><i class="blogicon-account lg"></i> CREATOR</div>
    <p>製作者：orefolder</p>
    <p>茨城県つくば市在住のウェブサイト運営者。普段は<a href="http://www.orefolder.net">orefolder.net</a>というAndroidスマートフォンの情報サイトをメインに活動しています。はてな歴は2017年で13年ほどの中堅。</p>
    <p>ブログ：<a href="http://www.foxism.jp">FOXISM</a></p>
</div>

<div class="footer-3">
    <div class="footer-h">LIFE <i class="blogicon-heart lg"></i><i class="blogicon-heart lg"></i><i class="blogicon-heart-alt lg"></i><i class="blogicon-heart-alt lg"></i><i class="blogicon-heart-alt lg"></i></div>
    <p>書くことがない…。</p>
</div>
</div>

.footer-hクラスで見出しのようなスタイルを指定してあります。よかったらご活用ください。

まとめ

フッターと言っても、何を置いたらいいか、わからないかもしれませんね。プロフィールはサイドバーではなくコチラに持ってくるだとか、主なコンテンツのリストを載せるだとか、いろいろあると思います。他のサイトのフッターに注目してみると、何を於けばいいのか見えてくるかもしれません。