ナビメニューの移動とヘッダー及びフッターの背景を画面いっぱいに広げた

2015年2月18日stinger 5ナビケーションメニューの移動, フッター, ヘッダー, 背景stinger 5, フッター, ヘッダー, 背景

stinger5

デフォルトではstinger5のナビケーションメニューは、ヘッダーの下にあります。また、ヘッダーおよびフッターの背景は画面いっぱいに表示されていません。

なのでナビケーションメニューをヘッダーの上に移動させて、ヘッダーおよびフッターの背景を画面いっぱいに広げてみました!!

 

ナビケーションメニューの移動とヘッダーの背景を広げる

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

STINER5では、「wrapper」が全体に設定されているので、左右に「padding」が10pxに設定してます。

そのため、単純に「header」部分に色をつけようとして背景色を100%で指定をしても、左右に10pxの白い部分ができてしまい画面いっぱいには表示されません。
なので「header」の内側に「header-inner」、「nav」の内側に「nav-inner」を新しくクラスを追加してカスタマイズしました。

 

「header.php」の変更

stinger5の「header.php」を開きます。

私の場合、子テーマの「header.php」です。

開いたら「<!– アコーディオン –>」のコードを探します。

見つけたら「<!– アコーディオン –>」以降最後の「</header>」まで削除して下記コードをコピペした。(私は子テーマに)

 

 

「wrapper」を移動させてヘッダーとナビの余白を削除した。

移動前の部分はコメントアウトした。

ナビケーションメニューバーの位置を画面トップにしたかったので、その部分を移動して「header」の直ぐ内側に「header-Inner」を「nav」の内側に「nav-Inner」を設定した。

他のカスタマイズしたコードも含んでいるが、変更後のコードは以下のようになった。

 

スタイルシート(style.css)へ追記

子テーマのスタイルシート(style.css)に下記コードを追記した。

 

カスタマイズコードが抜けていたので追記しました

 

次にナビケーションメニューをカスタマイズしたコードのうち以下のコードを探します。

このコード内の
「margin: 60px auto;」を削除して、以下のコードを追記した。

追記後のコードは以下のようになりました。

「margin: 0 0 0 -410px;」と「padding: 0 300px 0 510px;」の数値は、ブログや画面によって変更する必要があります。

 
カスタマイズしたナビケーションメニューのナビバーのコード内に、「margin」と「padding」で左右の幅を調整します。

ここが一苦労しました。

 

とりあえずヘッダーの背景を画面いっぱいに広げるカスタマイズは、これで出来ると思います。って言うか私はこれで出来ました。

 

フッターの背景を画面いっぱいに広げる

フッターの背景に色を付ける。または背景に画像を使う。そしてそれを画面いっぱいに広げるカスタマイズです。

 

フッターに背景色を付ける

スタイルシート(style.css)に下記コードがなかったら追記する。

私の場合あるので画像を使った。

 

 

フッターの背景を画面いっぱいに広げる

「html」ではみ出た部分は自動にして、「body」ではみ出た部分を表示しないように設定してみた。

その後フッターの幅を広げた。

広げる幅は、私は500%にしたが200%位でもいいかも?
下記コードをスタイルシート(style.css)に追記する。

私の場合子テーマに追記した。

上記コードをどこに記述するのかは人それぞれだと思う。

私は端末がタブレットより大きいサイズの画面の時に表示させたかったので、「●● @media only screen and (min-width: 380px) { ●●」より下のところに追記した。

 

まとめ

stinger5071
stinger5072
私はカスタマイズ後たいへん気に入ってます。stinger5を使いながら一見みたら「これってstinger5」なの?・・・よく見たらわかる人はすぐにわかると思うが。

ただヘッダーとフッターの背景画像が、このブログに対してアンバランスのように思える今日この頃です。

センスがナイセンスなもんで・・・

以上私の備忘録でした。