デフォルトではstinger5のナビケーションメニューは、ヘッダーの下にあります。また、ヘッダーおよびフッターの背景は画面いっぱいに表示されていません。
なのでナビケーションメニューをヘッダーの上に移動させて、ヘッダーおよびフッターの背景を画面いっぱいに広げてみました！！
ナビケーションメニューの移動とヘッダーの背景を広げる
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いします。
ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
STINER5では、「wrapper」が全体に設定されているので、左右に「padding」が10pxに設定してます。
そのため、単純に「header」部分に色をつけようとして背景色を100%で指定をしても、左右に10pxの白い部分ができてしまい画面いっぱいには表示されません。
なので「header」の内側に「header-inner」、「nav」の内側に「nav-inner」を新しくクラスを追加してカスタマイズしました。
「header.php」の変更
stinger5の「header.php」を開きます。
私の場合、子テーマの「header.php」です。
開いたら「<!– アコーディオン –>」のコードを探します。
見つけたら「<!– アコーディオン –>」以降最後の「</header>」まで削除して下記コードをコピペした。（私は子テーマに）
[php]
<!– アコーディオン –>
<nav id=”s-navi” class=”pcnone”>
<div class=”header-nav-inner”>
<dl class=”acordion”>
<dt class=”trigger”>
<p><span class=”op”><i class=”fa fa-bars”></i> MENU</span></p>
</dt>
<dd class=”acordion_tree”>
<ul>
<?php wp_nav_menu(array(‘theme_location’ => ‘navbar’));?>
</ul>
<div class=”clear”></div>
</dd>
</dl>
</div>
</nav>
<!– /アコーディオン –>
<!– 移動<div id=”wrapper”> –>
<header>
<!–メニュー–>
<nav class=”smanone clearfix”>
<div class=”header-nav-inner”>
<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</div>
</nav>
<div class=”header-inner”>
<!– ロゴ又はブログ名 –>
<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>
<?php if (get_option(‘stinger_logo_image’)): //ロゴ画像がある時 ?>
<img alt=”<?php bloginfo( ‘name’ ); ?>” src=”<?php echo esc_url(get_option(‘stinger_logo_image’)); ?>” />
<?php else: //ロゴ画像が無い時 ?>
<?php bloginfo( ‘name’ ); ?>
<?php endif; ?>
</a></p>
</div>
</header>
<!– キャプション –>
<?php if (is_home()) { ?>
<h1 class=”descr”>
<?php bloginfo(‘description’); ?>
</h1>
<?php } else { ?>
<p class=”descr”>
<?php bloginfo(‘description’); ?>
</p>
<?php } ?>
<div id=”wrapper”>
[/php]
「wrapper」を移動させてヘッダーとナビの余白を削除した。
移動前の部分はコメントアウトした。
ナビケーションメニューバーの位置を画面トップにしたかったので、その部分を移動して「header」の直ぐ内側に「header-Inner」を「nav」の内側に「nav-Inner」を設定した。
他のカスタマイズしたコードも含んでいるが、変更後のコードは以下のようになった。
[php]
<!– アコーディオン –>
<nav id=”s-navi” class=”pcnone”>
<div class=”header-nav-inner”>
<dl class=”acordion”>
<dt class=”trigger”>
<p><span class=”op”><i class=”fa fa-bars”></i> MENU</span></p>
</dt>
<dd class=”acordion_tree”>
<ul>
<?php wp_nav_menu(array(‘theme_location’ => ‘navbar’));?>
</ul>
<div class=”clear”></div>
</dd>
</dl>
</div>
</nav>
<!– /アコーディオン –>
<!– 移動<div id=”wrapper”> –>
<header>
<div class=”header-nav-inner”>
<!–メニュー–>
<nav class=”smanone clearfix”>
<?php wp_nav_menu(
array(
‘container’ => false ,
‘items_wrap’ => ‘<ul id=”menu”>%3$s</ul>’
)
); ?>
</nav>
</div>
<div class=”header-inner”>
<!– ロゴ又はブログ名 –>
<?php if(is_mobile()) { ?>
<div align=”center”>
<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>
<img src=”https://www.y-taka.biz/wp-content/uploads/2014/11/sumaho-hedda-rogo.png” alt=”日本の最新ニュースや話題を届ける情報ステーション”/></a></p>
<?php }
else { ?>
<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>
<?php if (get_option(‘stinger_logo_image’)): //ロゴ画像がある時 ?>
<img alt=”<?php bloginfo( ‘name’ ); ?>” src=”<?php echo esc_url(get_option(‘stinger_logo_image’)); ?>” />
<?php else: //ロゴ画像が無い時 ?>
<?php bloginfo( ‘name’ ); ?>
<?php endif; ?>
</a></p>
<?php } ?>
</div>
<!– キャプション –>
<?php if (is_home()) { ?>
<h1 class=”descr”>
<?php bloginfo(‘description’); ?>
</h1>
<?php } else { ?>
<p class=”descr”>
<?php bloginfo(‘description’); ?>
</p>
<?php } ?>
</header>
<div id=”wrapper”>
[/php]
スタイルシート（style.css）へ追記
子テーマのスタイルシート（style.css）に下記コードを追記した。
[css]
.header-inner{
max-width: 1100px;
margin: 0 auto;
}
.header-nav-inner{
max-width: 1100px;
margin: 0 auto;
}
[/css]
カスタマイズコードが抜けていたので追記しました
次にナビケーションメニューをカスタマイズしたコードのうち以下のコードを探します。
[css]
#menu {
width: 100%;
margin: 60px auto;
border: 1px solid #222;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
box-shadow: 0 1px 1px #777;
/*– メニュー全体の背景グラデーション –*/
}
[/css]
このコード内の
「margin: 60px auto;」を削除して、以下のコードを追記した。
[css]
margin: 0 0 0 -410px;
padding: 0 300px 0 510px;
[/css]
追記後のコードは以下のようになりました。
[css]
#menu {
width: 100%;
margin: 0 0 0 -410px;
padding: 0 300px 0 510px;
border: 1px solid #222;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
box-shadow: 0 1px 1px #777;
/*– メニュー全体の背景グラデーション –*/
}
[/css]
「margin: 0 0 0 -410px;」と「padding: 0 300px 0 510px;」の数値は、ブログや画面によって変更する必要があります。
カスタマイズしたナビケーションメニューのナビバーのコード内に、「margin」と「padding」で左右の幅を調整します。
ここが一苦労しました。
とりあえずヘッダーの背景を画面いっぱいに広げるカスタマイズは、これで出来ると思います。って言うか私はこれで出来ました。
フッターの背景を画面いっぱいに広げる
フッターの背景に色を付ける。または背景に画像を使う。そしてそれを画面いっぱいに広げるカスタマイズです。
フッターに背景色を付ける
スタイルシート(style.css)に下記コードがなかったら追記する。
[css]
/* フッター背景色 */
#footer{
background-color:#FF0000;/* 背景色コード */
}
[/css]
私の場合あるので画像を使った。
[css]
#footer {
background: #444 url(images/always_grey.png) left top repeat;
/* thnx! http://subtlepatterns.com/ */
}
[/css]
フッターの背景を画面いっぱいに広げる
「html」ではみ出た部分は自動にして、「body」ではみ出た部分を表示しないように設定してみた。
その後フッターの幅を広げた。
広げる幅は、私は500%にしたが200%位でもいいかも？
下記コードをスタイルシート(style.css)に追記する。
[css]
html {
overflow: auto;
}
body {
overflow: hidden;
}
#footer {
margin: 0 -200%; /* 広げる幅の値をマイナスを付けて記述 */
padding: 0 200%; /* マージンで記述した値のマイナスを外して記述 */
}
[/css]
私の場合子テーマに追記した。
[css]
/*—————————–
フッターの背景タブレット以降変更
——————————*/
html {
overflow: auto;
}
body {
overflow: hidden;
}
#footer {
background: #444 url(images/always_grey.png) left top repeat;
/* thnx! http://subtlepatterns.com/ */
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
}
[/css]
上記コードをどこに記述するのかは人それぞれだと思う。
私は端末がタブレットより大きいサイズの画面の時に表示させたかったので、「●● @media only screen and (min-width: 380px) { ●●」より下のところに追記した。
まとめ
私はカスタマイズ後たいへん気に入ってます。stinger5を使いながら一見みたら「これってstinger5」なの？・・・よく見たらわかる人はすぐにわかると思うが。
ただヘッダーとフッターの背景画像が、このブログに対してアンバランスのように思える今日この頃です。
センスがナイセンスなもんで・・・
以上私の備忘録でした。
コメント
[…] ナビメニューの移動とヘッダー及びフッターの背景を画面いっぱいに広げ… […]