ガジェニュー

~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 , , ,

  関連記事

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

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

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

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

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

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

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

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

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

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

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

Loading Facebook Comments ...

Message

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