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

◆STINGER8

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

◆STINGER PLUS

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

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

◆STINGER PLUS 2 

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

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

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

◆STINGER PRO

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

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

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

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

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

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

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

/*グローバルメニューの固定化・装飾
——————————–*/
#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; /*メニューバーマウスオーバー時の色*/
}