賢威のフッターをカスタマイズする

公開日: 2014年02月05日
最終更新日: 2014年06月09日

フッター

今回は、inosh blogに使用しているテーマ「賢威」のフッターをカスタマイズしていく様子をご紹介します。「アドレス」や「メニュー」の表示を消去、フッターのセンターにロゴを表示させる、フッターの各要素のカスタマイズなど。

もくじ

はじめに

今回は、賢威のフッターをカスタマイズしたいと思います。

現在のフッターはこのような状態↓
賢威のフッター

アドレス部分は賢威の初期設定をするで削除していますし、メニューの設定はしていませんので、現在フッターには何も表示されていません。

ちなみに、inosh blogのフッターには最終的に、アーカイブ・カテゴリー・お問い合わせフォーム・プロフィールなどの中のどれかを表示させたいと思っています。

が、現時点では記事投稿数が少ない(それに伴いアーカイブやカテゴリーも少ない)ため、何も表示させないようにしようと思います。

ただ、本当に何もなしだと寂しいので、ロゴだけでも軽く表示させて、後は前回まででヘッダー・コンテンツ・サイドバーをカスタマイズしてきたように、inosh blogのテーマカラーに合わせてデザインだけしておきます。

「アドレス」と「メニュー」の表示を消す

まず、「アドレス」と「メニュー」と表示されたサブタイトルのようなアレが邪魔なので、footer.phpのコードを一部削除します。

footer.php(賢威のデフォルト)

<!--▼フッター-->
<div id="footer">
<div id="footer-in">

<!--アドレスエリア-->
<div class="area01">
<h3>アドレス</h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
<!--/アドレスエリア-->

<!--フッターメニュー-->
<div class="area02">
<h3>メニュー</h3>
<div class="footer-menu">
<?php get_globalmenu_keni('footermenu1'); ?>
<?php get_globalmenu_keni('footermenu2'); ?>
</div>
</div>
<!--/フッターメニュー-->

</div>
</div>
<!--▲フッター-->

下矢印

footer.php(書き換え後)

<!--▼フッター-->
<div id="footer">
<div id="footer-in">

</div>
</div>
<!--▲フッター-->

アドレスエリアと、フッターメニューの部分をゴッソリ削除しちゃいました。

またいつか何かしらのコンテンツを表示させる際には、その時に自分が表示させたいコンテンツに合わせたPHPなりHTMLなりを記述しますので、とりあえず現段階ではまるごと削除です。

ただし、div要素のfooterとfooter-inに関しては、のちほどのスタイル定義などに使用しますので、そのまま残しておきます。

ちなみに、上記コードを削除したことにより、フッターはこのようになりました↓
何もないフッター

フッターのスタイル定義

フッターのスタイルは、mystyle.cssに以下のように記述しました。

mystyle.css

#footer {
    background:#222;
    border-top:3px solid #e41858; }

.copyright {
    color:#fff;
    font-size:14px;
    background:#222;
}

これだけですw
で、このようになりました↓
フッターをテーマカラーに合わせる

で、これだとさすがに寂しすぎるよな~ってことで、申し訳程度にロゴだけ表示させてみたいと思います。

フッターにロゴを表示させる

フッターにロゴを表示させるにあたり、まずfooter.phpにコードを追加します。

footer.php(現在の状態)

<!--▼フッター-->
<div id="footer">
<div id="footer-in">

</div>
</div>
<!--▲フッター-->

下矢印

footer.php(書き換え後)

<!--▼フッター-->
<div id="footer">
<div id="footer-in">
<p class="footer_logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images_my/footer_logo.png" alt="inosh blog" width="43" /></a></p>
</div>
</div>
<!--▲フッター-->

そして、ロゴを中央に配置するためにmystyle.cssに以下のコードを追加します。

mystyle.css

.footer_logo {
    text-align:center;
}

これで、フッターは以下のようになりました。
賢威のカスタマイズ後のフッター

おわりに

今日までで、ヘッダー・コンテンツ部分・サイドバー・フッターと、賢威をカスタマイズしてきました。

デザインの良し悪しは置いといて、大分”賢威っぽさ”をなくし、オリジナルなデザインに出来たと思います。

右下にある「このページの先頭へ」が浮いていますが、これは後日、ゆっくりとカスタマイズしたいと思っています。

ある意味、ここは1番”賢威っぽさ”が出るところだと思いますので、他のブログと同じデザインになってしまうことが嫌な方は、ここは絶対にカスタマイズした方が良いです。

賢威も今やSEOやWordpressを知る人はほとんどの人が知っている王道テンプレートになっていますので、あちらこちらで賢威を使用しているブログを見かけます^^;

HTMLやCSSの知識が無い方はそのまま使っていますし、もちろん知識がある方でもそのまま使っている方も多いです。

なので、訪問者の方々に「あれ?このブログどっかで見たっけ?」などと思われないように、ぜひともカスタマイズしておきたい部分と言えますね^^

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む