stinger plus2のヘッダーまわり一式を画面端まで簡単に伸ばす方法

こんにちは!!ワードプレス初心者のqubotanです。

今日集まってくれた諸君はこういう感じのstinger plus2のヘッダーまわりを

こう画面端までにしたいんじゃないかと思う。

こうしたテクニックはネット上に書いてあるし、本でも学べると思うんですが今日は面倒臭がり屋のあなたにドーラもびっくり最速90秒くらいで完了させます。

ワードプレス超初心者の自分でもすぐに出来たんだから間違いない。

そうだ、やる前にバックアップを取っといてね!

ブログが見られなくなっても責任はもてませんので!!

qubotan

ステップ1・ヘッダー背景を画面いっぱいにする

 

これを

こうします


STEP.1
ダッシュボードの「外観」→「カスタマイズ」をクリック

STEP.2
移動したページ左下の「追加css」をクリック

STEP.3
そこに以下をコピペ

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

 

さてどうでしょう。画面右のブログですぐに反映されるはず。

変わりましたか??

ステップ2・ヘッダー画像を画面いっぱいにする

 

次はステップ1の状態から

こうします。


さっきの追加cssの下に以下のものを書き込む。

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

 

これで変わったはず。

ステップ3・ヘッダーのメニューを画面いっぱいにする

 

最後にステップ2を

こうする。

更にさっきの追加cssの下に以下をつけ加える。

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

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; /*メニューバーマウスオーバー時の色*/
}

 

 

 

おしまい。

え??90秒以上かかったって??

許してヒヤシンス!

 

因みに今回の記事はこちらのブログを大いに参考にさせて頂き

画像をふんだんに使ったり少しいじったりしてアレンジしたものになります。

他にもstinger plus2のためになる記事があるのでおすすめです。

コメントを残す

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