STINGER

STINGER PLUS2のヘッダー背景を画面幅いっぱいに表示するカスタマイズ

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

テスト用のサーバーでSTINGER PLUS2を弄るのにハマっているでででーさん(@d3_dayo) です!

 
前回のSTINGER PLUS2に関する記事では、記事一覧をカード型で表示するためのカスタマイズ手順を紹介しました。
 
コピペでできる!STINGER PLUS2の記事一覧をカード型にするカスタマイズ | カキタクナッタラ
引き続き、このブログではテスト環境で試したSTINGER PLUS2カスタマイズの中から良さそうなものをピックアップして、カスタマイズ手順を記事にしていきたいと思います。
 
そして、今回紹介する手順はヘッダー部分の背景を画面幅いっぱいに広げるカスタマイズ手順です。設定画面を見ると有償のSTINGER PROでは画面にチェックを入れるだけで簡単にできるようですが、無料のSTINGER PLUS2でやる場合にはちょっとコードを弄る必要があります。
 
 

スポンサーリンク

STINGER PLUS2

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

完成図

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

 
・スマホでの表示

 
こんな感じでサンプル画像では青?水色?の部分になりますが、左右に余白ができずに画面幅へフィットする状態で背景色を設定することができます。
 
 

カスタマイズの手順

カスタマイズの手順を紹介する前に、まずは念のため、お決まりの台詞かとは思いますがカスタマイズの前には元の状態へと戻せるようにWordPressのファイルをバックアップできるようにしておくことを強くオススメします。
 
なお、バックアップには以下の無料で使えるプラグインがオススメです。

今回紹介する手順では、最もデリケートなfunction.phpを弄ることはなく、style.cssへのコード追記だけなので何らかの失敗をしても管理画面へログインできなくなるといった重度のトラブルには至らないかと思いますが…
 
もし、ファイルを編集した後にレイアウトが崩れてしまったりする場合には、style.cssの中身を事前にコピーしておきペーストで元に戻せるように、或いは上記のプラグインで元の状態へ復元できるように事前準備しておくことを強くオススメします!
 

CSSで背景色を設定する

まずはCSSでヘッダー部分の背景色を設定していきます。以下のコードをstyle.cssに追記しましょう。

上記のCSSを追記することで画面幅いっぱいの背景色がページ最上部に表示されるようになったと思います。
 

ブログタイトルを中央に寄せる

次に、この記事の冒頭で完成図としてお見せしたスクリーンショットではタイトルテキストが中央に寄っていたと思いますが、これはWordPress管理画面の「STINGER+2 管理」の設定で簡単に寄せることができます。
 
「STINGER+2 管理」にアクセスをしたら、「ヘッダー設定」から以下2つの項目にチェックを入れます。
 
・ヘッダーを分割しない(※電話番号、ウィジェット等が非表示になります)
・ヘッダーエリアをセンタリング※「ヘッダーを分割しない」にチェックがある場合のみ

 

 
上記項目にチェックを入れて設定を保存すれば、タイトルテキストが中央寄せで表示されるようになります。
 

タイトルテキストの上下余白を調整

これはしてもしなくてもという感じではあります。もし、ヘッダー部分の背景を全幅に設定した上で、タイトルテキストの上下余白に違和感を感じるようであれば、以下のコードを追記してみてください。手順は子テーマのstyle.cssに追記するか、子テーマを使っていない場合には元のCSSに書き換えます。

背景色を全幅にした時のタイトルテキストと上下余白のバランスが何となく悪い気がしたので、上記のコードではmarginを私好みに指定しています。実際に適用してみた後に問題あれば、数値を変えてご自身の好みへと再調整してみてください。
 

上記のCSSを適用しても全幅表示されない場合

「STINGER+2 管理」で「オリジナルテーマカスタマイザーを使用する」にチェックを入れ、外観→カスタマイズから「基本エリア設定」の「サイト背景色」で背景色を指定していると、CSSよりもこちらの設定が優先されてしまい、ヘッダー部分の左右まで背景色がついてしまいます。
 

 
CSSを追記しても左右に余白ができてしまうという場合には、上記の設定を見直してみましょう(背景色の指定が入っている場合には空白へと修正します)
 
 

おわりに

いかがでしょうか?実際に手順を試してみた方は無事にヘッダー部分の背景色が画面幅いっぱいになりましたでしょうか?
 
また、改めて次回以降の記事で書いていく予定ですが、冒頭で紹介した完成図の画像ではグローバルメニューやスマホアコーディオンメニューの非表示、それからタイトルとキャプションの上下を逆にしているので、今回の手順で画面幅いっぱいにヘッダーを設定しても、もしかしたら完成図の雰囲気とは少しだけ違うかもしれません。
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

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

あなたにオススメ