スティンガー8

STINGER8でフッター用ウィジェットを追加して足元をオシャレに演出!

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

STINGER8のフッター部分には各メニューやブログ名、説明文がデフォルトで表示されるようになっています。

 

フッターはヘッダーと違ってあまり目立つエリアではないので、特に手を加えることもなくそのままの設定で使用されていませんか?

 

現在ではフッターエリアをデザインされているブログをよく見かけるようになりましたが、オシャレにカスタマイズされているとユーザーの印象にも残りやすくなります。

私自身のブログもSTINGER8で少なからずカスタマイズを行ってきましたが、フッター部分はまだ手つかずの状態でしたので、そろそろ足元もオシャレにデザインしていこうかと思います。

 

今回はワードプレスにフッター用ウィジェットを新たに追加して、カスタマイズしていきますのでSTINGER8を利用されている方は、ご紹介する方法をぜひ参考にしていって下さい。

フッターのデザインについて

STINGER8のデフォルト仕様で表示した場合は以下のデザインになります。

 

 

フッターはどのテンプレートを利用しても、基本的には上記のような表示になるかと思います。

このいたって普通感のあるイメージを、以下のように独自性のあるものにカスタマイズしていきます。

 

 

もともとSTINGER8にはフッター用のウィジェットがない為、これを追加して3カラムに対応したフッターに編集したいと思います。

ウィジェットを使用できるようにすれば、テキストを使って好きなコンテンツを表示させることができるようになります。

 

フッター用ウィジェットの追加方法

まずはフッターで使用するウィジェットを追加する為には、子テーマの「functions.php」ファイルにコードを追加する必要があります。

 

ただ、注意点として「functions.php」の編集で誤ったコードを入力してしまうと、画面が真っ白になりワードプレスにアクセスできなくなります。

「functions.php」を編集する際は、必ずバックアップファイルを用意しておくことをオススメします。

 

もしエラーが起きてしまった時は、落ち着いて以下の記事内容を参考に復旧作業を進めて頂ければと思います。

参考:functions.phpのエラーで画面が真っ白に!その原因と対処法について

 

また、親テーマにしかファイルがない場合は、FTPソフトで子テーマ内にアップロードしておきましょう。

 

「functions.php」を編集する

ワードプレスの管理画面メニューから、「外観」⇒『テーマの編集』をクリックします。

 

 

子テーマの「functions.php」ファイルを開いて、一番下の空いているスペースに以下のコードをコピー&ペーストします。

 

 

掲載コードは「STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法」でご紹介されているものをそのままお借りしました。

 

ファイルを更新すればワードプレスのウィジェット内に、「フッター左・中央・右」の3項目が追加されているはずです。

 

 

フッターエリアをカスタマイズ

後でデザインの編集で使用する「スタイルシート (style.css)」のコードを読み込ませる為に、「テーマフッター (footer.php)」ファイルを編集していきます。

 

「footer.php」を編集する

「footer.php」を開くとファイル内の上部に以下のコードがあるかと思います。

 

 

上記のコードに以下の色のついた部分のコードを追加していきます。

 

 

フッターエリアにブログのタイトルや説明文が必要ないという方は、以下の記述の最初の部分に「<?php /* ?>」、最後の部分に「<?php */ ?>」を追記して下さい。

 

 

コメントアウトでよく使われる「<!– –>」では上手く非表示にできないので、ここでは上記のコードを使用しています。

 

コードを削除して非表示にすることもできますが、私の場合はまた元に戻す可能性もありますのでコードは残す方法で対応しました。

 

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

フッター用のウィジェットとデザインをカスタマイズする準備ができましたので、ここからは「style.css」で3カラムに表示できるように編集していきます。

 

「style.css」を編集する

「style.css」ファイルを開いたら、以下のコードを追記していきましょう。

 

 

これで3カラムで表示できるようになりますので、後は好きなコンテンツをワードプレスのウィジェットから追加していきましょう。

 

また、すでにカテゴリーやプロフィールなどのデザインをCSSでカスタマイズされている場合は、そのデザインがフッターでも反映されてしまいます。

フッターエリアのデザインだけを変更したい時は、「style.css」に以下のように追記していきます。

 

 

上記のように「#footer」を追加したコードにすることで、フッターエリアのみに反映させることができます。

 

「#footer a」でメニューの配色を変更できますが、もし色コードを編集しても色が変わらない時は、「!important」を追記してコードの優先度を上げれば反映されるかと思います。

以上がSTINGER8のフッターエリアのカスタマイズになります。

 

まとめ

フッターエリアをカスタマイズして足元をオシャレに演出するだけでも、ブログやサイトの雰囲気がガラリと変わるのではないでしょうか。

 

また、コンテンツのアピールにも繋がりますし、ユーザビリティや回遊率の向上にも期待ができます。

デフォルトのまま使用するのは勿体無いので、STINGER8のフッターにウィジェットを追加してブログをアピールしていきましょう。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール