おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!

  最終更新日:2015/11/12


足元

おしゃれは足元から! ということで、Stinger3フッター部分のカスタマイズ をしてみましょう。すでに当ブログでもカスタマイズ適用済みとなっておりますので、よろしければぐわっとスクロールしてご覧ください。

追記現在はオリジナルテーマに変更しています。

最下部のフッターですが、意外と読まれる部分。でも、Stingerを利用している方はあまり力を入れていない部分かなと思います。

今回は左右2段組みとし、ただfooter.phpをいじるだけではなくウィジェットにも対応しました。変更箇所はコピペできるようにしていますが、解説を交えて進めていきます。

フッター部分を改造して見映えをかっこよくしよう!

まず、こちらはお馴染みのStinger3デフォルト画面。

stinger3デフォルト画面

フッター部分はこのようになっています。

stinger3デフォルトのフッター部分

最上部から最下部まで同じ背景色だとちょっと締まらない感じ。これをこのように改造してみます。

stinger3フッターカスタマイズ後

フッター部分だけ濃いめの色を使うとぐっと引き締まりますね。現状のまま色だけ変えたい場合はCSSで設定するだけでOK。もともとのCSSに一行追記してください。

あまりに濃い背景色を使う場合は、フッターに表示されているテキストを白系に変更したほうが良いです。CSSであらかじめ設定されている部分を抜粋しておきます(記述場所は分散しています)。

それでは、ウィジェットの設定から始めていきましょう。

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

追記一部修正しました(2014.05.05)

フッターでウィジェットを使えるようにする

まず、「フッター左」と「フッター右」のウィジェットエリアを作ります。

手を入れるのは『functions.php』。もとの内容は必ずバックアップしておいてください。カスタマイズに失敗するとブログが真っ白になる可能性もあります。。。

既に公開しているブログをいじるのではなく、カスタマイズ専用WordPressをPCにインストールするのがおすすめです。

参考PCにWordPressを!BitNamiインストールと日本語化までの全手順

Stingerでウィジェットを制御しているのは、この部分。

サイドバーやアドセンス・追尾広告用に4つのウィジェットが組み込まれています。ここに新たにフッター専用のウィジェットを作成してみましょう。

最初に二行目の()内の数字を4から6に変更。

つづいて、35行目の下に以下を追記します。

全体でこのようになればOKです。

これで管理画面からウィジェットを設定できるようになりました。でも、まだブログに表示されません。

ウィジェットをどこに表示するか、という設定を行います。今度は『footer.php』をいじります。

ウィジェット表示位置を指定する

『footer.php』内に、以下のような記述があります。

フッター部分のコードですが、上記のどこにウィジェットを挿入するか決めます。

今回は、見出しタグブロック(h3とh4)と著作権リンクの間にしました。挿入するのはこちらのコード。

イメージはこんな感じです。

stingerフッターイメージ

ウィジェットのタイトルには<h5>タグを設定したので、フッターの見出しタグは<h3>→<h4>→<h5>と順序良く並ぶ形になります。

フッター部分は全体としてこのようになります。

ここまできたら、あとはCSSで見映えを設定するだけです。

フッターデザインCSS設定(PC用)

PC用の表示は2段組のため、フロートで左右に配置します。最低限のコードがこちら。『style.css』の最下部にコピペしていただければ反映されます。

本当に必要最低限の指定しかしていません。

「フッター左」はバナーを貼ることを想定し、336pxとしました。Stinger3の場合、すでにアドセンスが3個配置されています。この部分にGoogleアドセンスのレクタングル(大)を入れる場合は、既存のアドセンスをどこか消してください。規約違反になります。

リスト(<ul>や<ol>)を使う場合は別途設定してください。

フッターデザインCSS設定(スマホ用)

『smart.css』の設定はこのようにしました。

スマホ版は、左右に分けていたdiv要素を上下に配置しています。

まとめ:フッターに何を書けばいいのか

Stinger3にオリジナルのフッターを設置する手順をまとめると、こうなります。

  • ウィジェットの設定をする
  • footer.php に追記する
  • CSSを調整する

あとは、フッターに書く内容を決めるだけですね。Stinger3は2カラムですから、サイドバーにたくさんパーツを置いてしまうと、メインコンテンツである本文より長くなってしまうことがあります。

広告、新着記事、カテゴリ、月別アーカイブ、カレンダー、タグ、管理人紹介、RSSボタン…となると、ごちゃごちゃして見づらいですよね。このうちいくつかを今日作ったフッターに持っていけば、ずいぶんスッキリするんじゃないでしょうか。

どのようなデザインにすれば良いか、何を書けば良いか迷った時はこちらを参考にすると良いでしょう。

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

知識のある方は、ぜひ3段組や4段組にチャレンジしてみてください。
ウィジェット作成に関する基礎知識はこちらが役立ちます。

WordPressのウィジェットを自作するためのTips

個性を活かした素敵なStingerブログになりますように!

それでは、また。

シェアありがとうございます


Ellora

Ellora

ブログ初心者を対象として、アクセス・収益アップ施策を配信中。目とデコルテが大好き。Twitterでは目のお化けと言われています。

2015年秋、「Ellora Bloggers Club」を発足。ブログ運営の悩みや疑問に対して、一人ひとりにアドバイスを行っています。

コメント一覧

  1. Stingerを使っていて素朴に「これいいな〜」と思ったこと。 #Stinger-WP より:

    […] 「おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP」です。 […]

  2. Stinger Advent Calendar 2013の記事をまとめていこう!| 狩りが下手な肉食男子のブログ より:

    […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  3. 「Stinger Advent Calendar 2013」の更新記事から参考になった内容をピックアップ! #Stinger-WP | Oh-Blog より:

    […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  4. […] 参考にさせてもらったサイトはNaifixさんです function.phpの上の方 […]

  5. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  6. […] 利用者の多さも手伝って『stinger カスタム』と検索するだけで大体やりたい事が見つかる。説明も丁寧でわかりやすい。例えば『フッター部にウィジェットを設置したいなー』と思えば『おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP』が見つかる。コピペだけで設置完了。 […]

  7. Ellora より:

    広告を新規作成した場合表示されるまでに時間がかかりますが、ステータスはアクティブになっていますか?

    またはコンテンツ量があまりに乏しい場合、広告が表示されないこともあります。

    僕はフッター左にテキストでOKでしたが、もう少し調べてみます。

  8. 岩田 より:

    岩田です。

    待ってみたのですが、やはりフッターにテキストでは反映されないみたいです。

    同じようにphpを触っているのですが。

    ブログ記事内に表示されるアドセンスは正常でしょうか?

    現在、サイドバーと記事の下部に表示されています。

    • Ellora より:

      アドセンスは1ページ3つまで設置可能です。
      すでにサイドバー1つと記事下2つが表示されているので、反映されないんだと思います。

  9. マルス より:

    「ここはフッター左側」「ここはフッター右側」に試しに画像を入れてみたところ、
    縦に2枚並んでしまいます。

    • Ellora より:

      ウィジェットを使わず直に入れる場合は、左をfooter_l、右をfooter_rのDIVで囲ってあげてください。

  10. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ! […]

  11. ほぼ知識ゼロからはじめたstinger3で行ったこと より:

    […] ブログの効果的な運営方法とマインドハック […]

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

  13. たかよし より:

    こんばんは。

    エローラ様。

    たかよしです。

    いつもお世話になっています。

    フッターカスタマイズに挑戦しています。

    フッターのエリアを2個にすることは出来たのですが、

    欲がでて、エリア内に3個を表示させるカスタマイズに

    挑戦しています。

    ウィジェットには、「フッター左」・「フッター中央」・

    「フッター右」が作成されていますが、「フッター右」

    の中に「テキスト」を挿入して、タイトルを入力しても

    タイトル名が表示されません。

    カスタマイズ後、ブログを観たら一様エリアは3個に

    なっているように観えます。

    エリア「右」の部分は表示されていませんが?

    多分どこかで僕のカスタマイズのやり方が間違って

    いると思います。

    それで恐縮ですが、フッター内のエリアを3個にする

    やり方をご教授出来ますでしょか?

    よろしくお願い致します。

    • Ellora より:

      functions.phpでフッター右側の設定ができているなら、下記をフッターの表示したい位置に挿入してください。

      (7)という数字は、何番目のウィジェットかを表しているので設定によって変わります。

  14. たかよし より:

    こんばんは。

    エローラさん。

    たかよしです。

    お世話になっております。

    いつもながらアドバイスありがとうございます。

    昨日やってみたところ、

    出来ました。(僕の単純なミスも有りましたが)

    有難うございます。

    突然ですが、

    stinger3の
    カスタマイズでエローラさんのブログを

    僕のブログにリンクさせてもよろしいでしょうか?

    今までたいへん勉強になっています。

    今後ともヨロシク!!!

    • Ellora より:

      ぜひご紹介ください^^

      今後ともよろしくお願いします。

  15. […] なお、これから紹介する方法はおしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WPを参考にさせて頂きました。ありがとうございます。 […]

  16. […] NAIFIXさまの「おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!」 […]

  17. たかよし より:

    こんばんは

    エローラさん。

    たかよしです。

    先日はアリガトウ御座います。

    stinger3のカスタマイズは

    試行錯誤でやりながら、今のところ

    順調ですが、ここで疑問が出てきました。

    フッターのカスタマイズ時、親のスタイルシート(.css)

    に追記をして反映しましたが、子のスタイルシート(.css)に

    追記したところ反映されませんでした。

    また、ヘッダーメニューをカスタマイズをした項目を

    子のスタイルシート(.css)に追記しても

    反映されなかったので、親のスタイルシート(.CSS)に

    追記しました。

    ヘッダー画像スライド・記事と記事の間に線を引く、

    および 記事およびサイドバーの背景の半透明等の

    カスタマイズは、子のスタイルシート(.css)に

    追記したら正常に反映されているので、

    子のスタイルシート(.css)の作成は間違いなく

    作成されていると思います。(機能はしていると思います)

    なのになぜフッターのカスタマイズおよび

    ヘッダーメニューのカスタマイズが子テーマ(.CSS)に

    追記しても反映されないのでしょうか?

    お忙しいところすみませんがご教授お願い致します。

  18. 千里の道も一歩から | より:

    […] 「Naifix」- 奇麗にstinger3のカスタマイズが纏めてあるサイト。フッターを作る所等、とてもお世話になりましたー。 […]

  19. […] 参考サイトはコチラ。 ◆おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  20. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  21. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  22. stingerをかっこよくするためにフッターをつけてみた | hayatoworks|wordpressで遊ぶ人のサイト より:

    […] NAIFIX-起業バカ- もはやこのページを見ればフッターはつけられるも同然です! 僕のフッターはほぼこのサイトのコピペでできちゃいました! […]

  23. hayatoworks より:

    いつも見ています!今日この記事をコピペしてフッターをつけさせていただきました。このサイトへのリンクを記事に貼ってしまったのですがよろしいでしょうか?問題があれば該当箇所をすぐに削除いたします。事後承諾になってしまい申しわけございません。

    • Ellora より:

      いつもありがとうございます!

      リンクフリーなのでご遠慮なくどうぞ^^
      今後ともよろしくお願いします。

  24. 【stinger3】このブログが行っているカスタマイズ集 | hayatoworks|wordpressで遊ぶ人のサイト より:

    […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  25. WordPress無料テーマGushを使っています! より:

    […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  26. […] オススメ⇒おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  27. ごん より:

    最近、WPを始めたばかりです。
    STINGER3を使用しております。

    フッターのカスタマイズをしたいと思いまして、
    内容コピペでサイト更新したところ、フッターの
    左右とも中央に上下に並んでしまいます。

    フッターに何も登録しない場合、「ここはフッター左側」、
    「ここはフッター右側」と上下に並んで表示されます。

    ウィジットでフッター左右にテキスト追加で文字列を設定
    しても縦に並んでしまいます。

    コピペは正しく行ったつもりですが、何が悪いのか分からず
    質問させていただきました。

    どういう原因が考えられるのかだけでも分かれば幸いです。
    よろしくお願いいたします。

    • Ellora より:

      たぶん僕の書いたCSSに問題があると思います…

      一度適用したところを見せていただくと、スムーズに解決できると思います。

  28. ごん より:

    Ellora様

    まだ、これから公開する予定でブログ構成を修正したりしている段階でして、
    文章で書かせていただきますが、フッター部分は以下のようになります。

       ブログキャッチフレーズ
          フッター左
          フッター左
          フッター右
          フッター右
       WordPress-Theme STINGER3
    Copyright ブログ名 ,AllRight Reserved

    フッターの中央に表示されます。

    ウィジットのフッター左にテキスト追加、タイトルも”フッター左”、
    フッター右も同様にテキストを追加しました。

    • Ellora より:

      ・functions.php
      ・footer.php
      ・CSS

      記事内の上記コードをすべて修正しました。
      お手数ですが、もう1度コピペしてみてください。

  29. ごん より:

    Ellora様

    ありがとうございました。
    IE(Ver.11)では中央表示になってしまうようです。
    floatが効いてないように見えます。

    Chromeでは正常に表示されました。

  30. Stinger3をカスタマイズする時に参考にしたサイトまとめ | デザイン・アートの情報発信ブログ”Re:lost” より:

    […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP / 初心者ブロガー指南:Naifix […]

  31. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  32. やっとみつけた!記事本文の公開日の装飾部分 より:

    […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ […]

  33. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP STINGER3のフッターを3カラムにカスタマイズしてみた […]

  34. […] Advent CalendarはEllora Naif(@uszero800)さん。 「おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP」です。 […]

  35. […] 3の時とほぼ同じなので、参考リンクを掲載しておきます。 おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP STINGER3のフッターを3カラムにカスタマイズしてみた […]

  36. […] Naifixさんを モロそのまんま真似させていただきました^^お陰様でstinger3のフッターカスタマイズ成功です^^ 元記事はコチラ↓ おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ! […]

  37. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  38. […] 3の時とほぼ同じなので、参考リンクを掲載しておきます。 おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP STINGER3のフッターを3カラムにカスタマイズしてみた […]

  39. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

  40. […] おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP […]

この記事へのコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

PAGE TOP ↑