ガジェニュー

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

  関連記事

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

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

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

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

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

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

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

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

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

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

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

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

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

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

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

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

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

Loading Facebook Comments ...

Message

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