WordPress【STINGER（スティンガー）】のヘッダー画像を横幅いっぱいにする方法～サンプル画像あり！

WordPressのテーマで無料と言われれば【STINGER】をお勧めしていますが、『STINGERってデフォルトだとちょっと・・・』っていう方も意外と多いです。

言いたいことは少し分かります笑

しかし、第一印象を決めるヘッダー画像を横幅いっぱいにするだけでガラリと印象が変わり、有料テーマに引けを取らない出来栄えになります。

今日は、その方法を分かりやすくまとめまていきます(^^)☆

⇒WordPressブログのヘッダー画像の作り方！無料でオシャレに簡単に

⇒トレンドブログのテンプレート（テーマ）の選び方！有料無料より大切なことは？

目　次

STINGERをダウンロード
デフォルト画像だとこんな感じ
ヘッダー画像を横幅いっぱいに広げる方法
- CSSの貼り付けは超簡単！

STINGERをダウンロード

まず、STINGERをダウンロードして下さい。

STINGERダウンロード

私が使用したのは『STINGER PLUS2』なのですが、

STINGERは現在有料の物も出ており、非常にややこしいですね(T . T)

そこで、種類をまとめました⏬

◆STINGER8

カスタマイズの種類が非常に少なく、自身で一からカスタマイズしたい方に向いており、初心者向けではありません。

◆STINGER PLUS

初心者にも使いやすいようにカスタマイズ機能が多く搭載された『STINGER PLUS』でしたが、さらに進化して『AFFINGER 4』になり有料化されました。

という訳で、現在は存在しません。

◆STINGER PLUS 2

『STINGER PLUS』の後継であり、後に発売される『STINGER PRO』のお試し版という位置づけ登場しました。

今回解説しているものは、この『STINGER PLUS 2』です。

『STINGER PRO』まではいかないにしても、充分な機能が搭載されています。

◆STINGER PRO

有料だけあって、素晴らしい機能が沢山搭載されています。

デフォルト画像だとこんな感じ

STINGER PLUS2はデフォルトだとこんな感じです⏬

全体像がこちらになります⏬

これはこれで良いのですが、もう少し迫力があったほうが・・・と個人的には思います(^^)

そこで、画像を横幅いっぱいに広げることにしました⏬

全体で見ると分かりやすいですよ(^^)

こんな感じになります⏬

では早速、ヘッダー画像を横幅いっぱいに広げる方法をまとめます(^^)

ヘッダー画像を横幅いっぱいに広げる方法

まず、この作業に入る前に注意する点が一つあります。

既に色の設定をしていると、幅の変更が効かない事があるのでチェックして下さい⏬

WordPressの【カスタマイズ】⇒『基本エリア設定』。

色の設定が全てデフォルトになっているかの確認をして下さい。

では、作業に入りましょう(^^)☆

STINGER PLUS2をインストールした後、お好きなヘッダー画像をアップロードするところまで済ませて下さい。

ヘッダー画像のサイズの推奨は2200×500ピクセルです。

CSSの貼り付けは超簡単！

WordPressの【カスタマイズ】を開きます。

そして『追加CSS』をクリックすると、CSSを簡単に追加できる画面になります。

そこに、今から伝えるCSSコードをコピーして貼り付ける作業になります。

❶ まずはヘッダー画像の上の部分の横幅を広げる方法です。

下記のコードをコピーして『追加CSS』に貼り付けてください。

/*ヘッダー背景色を画面端までにする
——————————–*/
#headbox-bg{
background-color:#ddc299; /*背景色の変更はここで*/
}
/*ここまで*/

ピンクのライン部分が色の指定になるので、お好きな色番号を入力して下さいね。

仕上がりはこんな感じ(^^)⏬

分かりやすいように色をつけています(^^)

❷ 次にヘッダー画像を横幅いっぱいにする方法です。

『追加CSS』の先程貼り付けた下の行に次のコードをコピーして貼り付けて下さい。

/*ヘッダー画像を画面幅までにする
——————————–*/
#st-header {
max-width: none !important;
}
/*ここまで*/

ヘッダー画像が広がりましたね☆

❸ 最後にヘッダー画像の下、グローバルメニューの部分を広げます。

『追加CSS』の更に下に、下記のコードを貼り付けます。

ピンクのライン部分が色の指定なので、お好きな色に変更して下さい。

/*グローバルメニューの固定化・装飾
——————————–*/
#st-menubox {
background:#ddc299 ; /*メニューバーの色*/

width: 100%; /*メニューの幅を画面いっぱいに*/
z-index: 999;
}

header .smanone ul.menu li {
transition: 0.5s;
}

header .smanone ul.menu li a{
font-size: 13px !important; /*メニューのフォントサイズ*/
font-weight: bold; /*メニューのフォントを太字に*/
color: #FFF !important; /*メニューのフォント色*/
}

header .smanone ul.menu li li a{
background: rgba(51, 51, 51, 0.91) !important; /*サブメニューの背景 ※少し透過してます*/
border-top: none !important;
transition: 0.5s;
}

header .smanone ul.menu li li a:hover {
background: #1db2f5 !important; /*メニューバーマウスオーバー時の色*/
}

グローバルメニューも横幅いっぱいに広がりましたね(^^)！