ガジェニュー

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

  関連記事

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

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

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

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

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

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

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

blogcard-custamize-tb
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

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

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

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

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

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

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

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

Loading Facebook Comments ...

Message

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