ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

      2016/01/21    後で読む

sheader-customize-top
今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます。結構溜まってきて、あれってどうやったんだっけ?みたいなときも自分で見返せて、かつソースをそのままコピペできるので楽!ってことに気づきました。意外な利点です。

さて、何をやったかというと、、

今回のカスタマイズ
・ヘッダーとナビの「background-color」を画面いっぱいに表示
・タイトルとメニューの位置を入れ替え

の2点の変更をしました。では見て行きましょう。

SPONSORED LINKS

【STINGER5カスタマイズ】ヘッダーとナビの背景色を横いっぱいに広げる方法

STINER5では、wrapperが全体に設定されていて、右のpaddingが10pxに設定してあります。そのため、単純にheader部分に色をつけようとして背景色を100%で指定をしても、左右に10pxの白い部分ができてしまい画面いっぱいには表示されません。上の図を見ていただければイメージし易いと思います。

そこで新しく、「header」の内側に「header-inner」「nav」の内側に「nav-inner」を追加してこれを乗り切りました。

「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>&nbsp; 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">

「wrapper」を移動させてヘッダーとナビの余白を削除しました。移動前の部分はコメントアウトしていますので参考にしてもらえればと思います。メニューの位置を上にしたかったので、対象部分をそのまま移動、その後、「header」の直ぐ内側に「header-Inner」を「nav」の内側に「nav-Inner」を別途設定しました。

続いてstyle.cssの記述に関してです。「wrapper」から、「header」と「nav」を外しています。そのため、各「Inner」の部分には「wrapper」と同様の設定をしています。こんな感じです。「wrapper」の直ぐ下に書きました。

.header-inner{
max-width: 1100px;
margin: 0 auto;
}

.header-nav-inner{
max-width: 1100px;
margin: 0 auto;
}

続いて、「header」と「nav」を書き換えていきます。

header {
	background-color: #ff1493;
        text-align: center;
        width: 100%;
	padding-top: 0px;
}

nav {
	background-color: #141414;
        clear: both;
        width: 100%;
	}

これでOK。

PCでみても、スマホで見ても横幅いっぱいまで背景色が指定されます。最近やっと、CSSの概念を理解出来つつある気がするので何とか対応出来ましたが、レスポンシブを崩さないようにカスタマイズして見た目を調整していくのはなかなか難しいですね。

まとめ

ちょっとはおしゃれっぽいサイトになった気がします。(自己満)

こちらの方法を、応用すれば他の部分の表示を広げることもできます。スマホでの閲覧に関しては出来るだけ画面いっぱいに表示を使いたかったりするのでやってみてよかったです。

誰かの役に立てれば幸いです。

てな感じで。

 - STINGER5, WordPress , , ,

  関連記事

photo-express-for-google-tb
Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

sicon_1r_192_020215_080729_PM
【アクセス数報告】2015年1月のPVとアフィリエイトの収益とか

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

Loading Facebook Comments ...

Message

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