STINGER

STINGER PLUS2のフッターにCSSで背景色を設定して画面幅いっぱいに表示する方法

投稿日: 更新日: 2017年11月20日

チャオ!この記事がSTINGER PLUS2シリーズ4発目のでででーさん(@d3_dayo) です!

 
前回の記事では、STINGER PLUS2をスマホからみた時に表示されるページ上部右上のアコーディオンメニュー(ハンバーガーメニュー)を非表示にするためのCSSを紹介しました。

今回は、デフォルトの状態では特に背景色が設定されていない(ページ背景色と同じ色のままの)フッター部分へ背景色を設定して、画面幅いっぱいに表示する方法を紹介したいと思います。
 
STINGER PLUS2では旧バージョンのSTINGERテーマとは異なり、そもそもWordPress管理画面から外観→カスタマイズの色設定からフッターの色を設定できるようになっていますが、この記事ではあえてCSSで設定する手順を紹介します。
 
実際にテスト環境で設定してみて思ったことは、CSSで設定するにしても旧バージョンのSTINGER7やSTINGER PLUSに比べると、全幅背景色がとても簡単に指定できるようになったということです。
 
旧バージョンのテーマではfooter.phpを弄る必要がありましたが、このSTINGER PLUS2ではそういった手順は不要でCSS一発です!
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

今回紹介するカスタマイズを実際にテスト環境で施してみたので、まずは完成図としてスクリーンショットをお見せしたいと思います。
 
・PCでの表示

 
・スマホでの表示

 
このように左右の余白は一切ない状態で、フッター部分に背景色を表示します。
 
 

フッター背景色のCSS

以下のCSSを子テーマのstyle.cssに追記するか、子テーマを適用していない場合は元のcssに書き足します(万が一、何らかのミスがあっても元に戻せるよう、事前のバックアップをとることをオススメします!)

コードはたったこれだけです。上記コードを追記・適用すれば、フッター部分に画面幅いっぱいの背景色が表示されるようになります。
 

フッター部分の文字色をCSSで変更する

フッターに背景色を表示させた際に、フッター部分の文字色と合わないこともあるかと思いますので、フッター部分の文字色を変更するためのCSSも載せておきたいと思います。

以上です。
 
 

おわりに

STINGERのオリジナルテーマカスタマイザーは、コードがよくわからなくても誰でも簡単にサイトの配色などを細かく変更できて非常に便利な機能だと思いますが、コードを弄ることを前提にカスタマイズしていく時は、スタイルが被ってしまいCSSが効かなくなったりするので、基本的には使わないようにしています。
 
それにしても、旧バージョンではひと手間かかったフッター背景色の画面幅いっぱいの設定がまさか管理画面でのチェック一発で出来るようになっているとは…。STINGER PLUS2…無料なのにしっかりと機能は進化していてすごいなと思いました!
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ