MENU

【STINGER6】ヘッダーを横幅いっぱいに広げてメニューをタイトル横に並べるカスタマイズ

WordPress
stinger6

STINGER6で行ったヘッダー周りのカスタマイズを備忘録プラス何かの参考にして頂ければということで、まとめておきます。

 

「STINGER6」ヘッダーカスタマイズ

「STINGER6」ヘッダーカスタマイズ

カスタマイズの前後では、こんな感じになります。

大きな変更点としては、ヘッダーを横幅いっぱいに広げてメニューをタイトル横に並べたことです。

 

目次

ヘッダーの背景を変える

まずは、ヘッダーの背景を変更します。

header {
	background-color: #333333;
	box-shadow: 0 2px 5px #999;
}

上記コードをstyle.cssに追記しました。
背景を黒にして、ヘッダー下に影をつけています。

 

header .sitename a { /*ヘッダータイトル*/
	font-size: 40px;
	color: #ffffff;
}

背景が黒だと文字が見えないので、上記コードも追記してサイト名の文字を白色に変更。

ちなみに、フォントはGoogle Fontsを利用したので、変更前と後でフォントが違っています。

【STINGER6】Google Fontsを使ってMacでもフォントを綺麗に表示するカスタマイズ
【STINGER6】Google Fontsを使ってMacでもフォントを綺麗に表示するカスタマイズ
 Google Fontsでフォントを統一する 実は、最近パソコンをMacに買い換えました。 で、Macで自分のブログを見てみると、フォントが何か変！ 少し調べてみると、Webを閲覧するときのフォントは、PCにインストールされてい...

 

ヘッダーを横幅いっぱいに広げる

<div id="wrapper">
・
・
・
<header>
・
・
・
</header>

header.phpは元々上記のような順番で書かれています。
ですが、wrapperの中にheaderが入っているとheaderの横幅が制限されてしまいます。

なので、headerをwrapperの外に出してあげる必要があります。

 

<header>
<div class="header-inner">
・
・
・
</div>
</header> 

<div id="wrapper">

こんな感じ。

ただ、headerをwrapperの外に出すと、サイト名などもそれに合わせて寄ってしまうので、wrapperと同じ内容のheader-innerという要素を作って対応しました。

 

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

style.cssには上記を追記。

これで、文字はそのまま、背景だけ横幅いっぱいに広がります。

このカスタマイズは下記ブログを参考にさせて頂きました。

http://moriawase.net/stinger5-header-full
Stinger5のヘッダーを画面いっぱいにした方法。 – MORIAWASE

 

サイト説明文を非表示にする

僕がイメージしていたヘッダーには、サイト説明文が不要だったので、cssで非表示にしました。

header .descr { /*ヘッダーサイト説明文表示*/
display: none;
}

style.cssに上記を追記。

 

メニューのカスタマイズ

PCのトップメニューをタイトルの横に入れる

PC画面でタイトル下にあるトップメニューをタイトル横に移動しました。

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {

.title-discr {
float:left;
}

nav {
margin-left:500px;
}

style.cssのPCエリアに上記を追記。

タイトルと説明文が入っている箱をヘッダーの左に寄せて、その右側にメニューを回り込ませています。

 

nav li {
font-size: 12px;
color: #ffffff;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
margin-bottom:5px;
margin-right:5px;
}

nav li a {
color: #ffffff;
}

ついでに、上記も追記して文字を白に、メニュー毎に四角で囲っています。

 

モバイルのメニューはタイトル下に移動

モバイルメニューはタイトル右上から、タイトル左下に移動して装飾もPCのものと同様にしました。

<?php if ( has_nav_menu( 'primary-menu' ) ) : ?>
<?php wp_nav_menu( $defaults ); ?>
<?php else : ?>
<nav class="smanone clearfix">
<?php wp_page_menu( $defaults ); ?>
</nav>
<?php endif; ?>
</div>
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<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">
<?php
$defaults = array(
'theme_location' => 'primary-menu',
);
?>
<?php wp_nav_menu( $defaults ); ?>
<div class="clear"></div>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->
</header>

header.phpの中にある<!– アコーディオン –>の部分を</header>前に移動しています。

 

#s-navi dt.trigger {
text-align: left;
padding: 0px;
margin-bottom:10px;
}

#s-navi dt.trigger .op {
font-size: 18px;
color: #fff;
padding: 10px 10px;
}

.acordion_tree li {
font-size: 12px;
font-weight:bold;
color: #ffffff;
padding: 5px 10px;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
margin-bottom:5px;
margin-right:5px;
}

.acordion_tree li a {
color: #fff;
text-decoration: none;
}

style.cssはこんな感じで追記をして調整。

 

メニューについて、ホントは「Off-Canvas Menu Effects」を導入してスライドメニューにしたかったんですが、上手くいかなかったんで一旦断念。

これ、すっごく良い感じなんで、また時間が出来たら試してみたいと思います。

「Off-Canvas Menu Effects」の導入については、下記ブログが参考になりました。

http://www.32style.com/off-canvasmenueffects/
気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた – 32style

 

コードのまとめ

header.php

<?php include_once( "analyticstracking.php" ) //アナリティクスコード ?>

//ここからカスタマイズしてる
<header>
<div class="header-inner">
<div class="title-discr">
<!-- ロゴ又はブログ名 -->
<p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
<?php else: //ロゴ画像が無い時 ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php endif; ?>
</a></p>
<!-- キャプション -->
<?php if ( is_home() ) { ?>
<h1 class="descr">
<?php bloginfo( 'description' ); ?>
</h1>
<?php } else { ?>
<p class="descr">
<?php bloginfo( 'description' ); ?>
</p>
<?php } ?>

<?php get_template_part( 'st-header-image' ); //カスタムヘッダー画像 ?>
</div>
<!--
メニュー
-->
<?php
$defaults = array(
'container' => 'nav',
'container_class' => 'smanone clearfix',
'theme_location' => 'primary-menu',
);
?>
<?php if ( has_nav_menu( 'primary-menu' ) ) : ?>
<?php wp_nav_menu( $defaults ); ?>
<?php else : ?>
<nav class="smanone clearfix">
<?php wp_page_menu( $defaults ); ?>
</nav>
<?php endif; ?>
</div>
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<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">
<?php
$defaults = array(
'theme_location' => 'primary-menu',
);
?>
<?php wp_nav_menu( $defaults ); ?>
<div class="clear"></div>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->
</header> 
<div id="wrapper">

 

style.css

/*--------------------------------
ヘッダー
---------------------------------*/
header { /*ヘッダーの枠*/
margin-top:0px;
margin-bottom: 0px; 
padding-top:20px;
background-color: #333333;
box-shadow: 0 2px 5px #999;
}

.header-inner { /*ヘッダーを横幅いっぱいに広げるために追加（wrapperと同じ）*/
max-width: 1080px;
padding: 0px;
margin: 0 auto;
}

header .sitename a { /*ヘッダータイトル*/
font-size: 40px;
color: #ffffff;
}

header .descr { /*ヘッダーサイト説明文表示*/
display: none;
}


/*--------------------------------
モバイルメニュー
---------------------------------*/
#s-navi dt.trigger {
text-align: left;
padding: 0px;
margin-bottom:10px;
}

#s-navi dt.trigger .op {
font-size: 18px;
color: #fff;
padding: 10px 10px;
}

.acordion_tree li {
font-size: 12px;
font-weight:bold;
color: #ffffff;
padding: 5px 10px;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
margin-bottom:5px;
margin-right:5px;
}

.acordion_tree li a {
color: #fff;
text-decoration: none;
}



/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {

/*--------------------------------
ヘッダー
---------------------------------*/
/*ヘッダー*/
header {
margin-bottom: 20px; 
padding-top:5px;
}

/*ヘッダータイトルと説明文の箱*/
.title-discr {
float:left;
}

header .sitename {
margin-top:15px;
margin-left:10px;
}


/*--------------------------------
メニュー
---------------------------------*/
nav {
margin-left:500px;
}

nav li {
font-size: 12px;
color: #ffffff;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
margin-bottom:5px;
margin-right:5px;
}

nav li a {
color: #ffffff;
}

 

以上、STINGER6のヘッダーカスタマイズまとめでした。

WordPress
よかったらシェア！
  • URLをコピーしました！

コメントする

コメントする

※日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

目次