STINGER3のフッターを3カラムにカスタマイズしてみた

      2014/08/06

stinger-footer
個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタマイズしないといけませんよね。ブログのデザインが良くなると、訪問してくれた読者への印象がよくなりますし、なにより記事を書くブロガー本人にしても、気持ちが良いものです。

「そんなの自己満足じゃん」と言われればそれまでかも知れませんが、気持よく記事を書くことができればモチベーションのアップにも繋がりますし、それだけでも十分カスタマイズする意味はありますよね。

ということで、当ブログでもちょこちょことデザインに手を加えて行っていますが、やりたいやりたいと思っていてずっと手を付けられていなかった、フッターのデザインをカスタマイズしてみました。今回は、その内容をご紹介します。

スポンサーリンク

あ、そうそう、「フッターをカスタマイズしよう!」と思い立たせてくれたきっかけになった記事がありますのでご紹介しておきます。今回、大いに参考にさせていただきました、ありがとうございます!

http://laugh-raku.com/archives/4123「えっ!?ブログのフッター活用できてなさすぎ!」ってことで急いでカスタマイズしました 【Stinger】|らふらく^^

http://naifix.com/stinger-footer/おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP

フッターのカスタマイズでやったこと

  • フッターの背景を変更
  • フッター上部の記事タイトルとキャッチフレーズを削除
  • フッターを3カラムに変更

以上が今回のお品書きになります。それぞれやったことはすごくシンプルなのですが、見た目の印象は結構変わってくれますよ。

では早速、順に見ていくとしましょう。

 

フッターのカスタマイズ全手順

フッターの背景を変更

「style.css」の最下部に、以下の設定を追加しました。

ちなみに今回、わたしは背景に画像を利用しましたが、「画像とかいらんねん。色だけ変更したいねん。」という場合は、

といったような背景色だけの設定でも、もちろんOKです。あと、スマートフォン用のサイトにも同じ変更を行う場合は、「smart.css」にも同様の設定を追加してください。

フッター上部の記事タイトルとキャッチフレーズを削除

STINGER3にはなぜか、フッターの上部に記事のタイトルとブログのキャッチフレーズが表示されます。もしかするとSEO的な意図かなにかがあってのことなのかもしれませんが、個人的には「いらねーなーー」という感じなので、ここはバッサリ削除しちゃいました。

削除するには「footer.php」に変更を加えますが、ここで注意点をひとつ。「.php」の拡張子がつくファイルはプログラムが記述されているファイルになりますので、変更をミスるとサイトが表示されないことになってしまいます。ですので、万一に備えて必ずファイルのバックアップをとってから変更を加えるようにしましょう。

さて変更内容ですが、「footer.php」に、以下のような箇所があるのが割とすぐ見つかると思います。

こちらの前後1行ずつを残して、あとはガッツリ削除しました。すると、以下のようになります。

これだけでOKです。チョー簡単ですね!

フッターを3カラムに変更

今回メインのカスタマイズ部分ですね。個人的には、コピーライトだけのあっさりしたフッターより、情報が詰まったボリュームのある縦長フッターが好みなので、3カラムにしてみました。

先ず、「functions.php」に変更を加えます。(バックアップを忘れずに!)以下のような箇所があります。もし見つけるのが難しい場合は、
「ウイジェット」もしくは「dynamic_sidebar」でソース内を検索してみてください。

こちらへの変更は2点あります。先ずは、

(4)(7)に変更しました。

次に、以下のソースを追加しました。

以上の2点を変更すると、最終的に以下のようなソースになります。

続いて、「footer.php」に変更を加えます。さきほど、記事のタイトルとブログのキャッチフレーズを削除したところが、

の状態になっていると思いますが、この2行の間に以下のソースを追加しました。

最終的に、以下のようなソースになります。

はい!あともう一息です。最後に、CSSでフッター部分のデザインを整えます。先ずはPC用の「style.css」から。最初に、

を、

に変更して、最下部に以下の設定を追加しました。

一応、フッター全体の幅を1000pxとし、3カラムそれぞれの幅を320pxにしています。まぁ、このあたりのCSSはフォント色や余白設定などになりますので、お好みで変更しちゃってください。

同じ要領でスマートフォンの「smart.css」にも変更を加えました。

に変更し、

を追加しました。なお、スマートフォンは3カラムそれぞれの幅を100%にしているので、縦並びで表示されます。

以上で、今回のカスタマイズは終了です。おつかれさまでした!

さいごに

如何でしょうか?ちょっと長くなってしまいましたが、割と簡単にできるカスタマイズです。わたしのようにボリュームがあるフッターが好きな方は、是非お試しあれ。

こちらの記事もいかがですか?

そのほか、STINGER3のカスタマイズについてまとめてみました。

わたしがSTINGERでカスタマイズしたことをまとめてみた

 - ブログカスタマイズ

スポンサーリンク

  関連記事

気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になっ …

わたしがSTINGERでカスタマイズしたことをまとめてみた
わたしがSTINGER3でカスタマイズしたことをまとめてみた

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …