賢威6.1ヘッダーのタイトル横にグローバルナビを移動する方法

この記事は約7分で読めます。

  • LINEで送る

ヘッダータイトル横のグローバルナビ

前回、賢威のヘッダー画像横にSNSアイコンを設置する方法を紹介しました。

応用編として、ヘッダー画像(タイトルテキスト横)にグローバルナビを移動する方法を紹介します。
ヘッダーは大きな画像をドカンと掲載してファーストビューにインパクトを与えるサイト、
ヘッダー画像・タイトルテキストは最小限にしてコンテンツをファーストビューで見せるサイト。

前者はアフィリエイトサイトに多く、後者はSEOサイトに多いイメージです(個人的に)。
どちらが良い・悪いはなく、完全に好み(訪問者を含めた)です。
賢威カスタマイズ研究所は、後者のヘッダー部スッキリパターンで運営しています。

スマホ対応もしており、PCではヘッダー横のグローバルナビを表示し、
スマホでは通常のグローバルナビ(メニューアコーディオン)を表示します。

ヘッダーのサイト説明文を削除し、グローバルナビを追加

ヘッダーにリストタグでグローバルナビを設置して、CSSで微調整します。

ヘッダー画像横に表示される説明文は消しています。
今回の対応で自然と消えますが、詳細を確認したい場合は以下の記事をご覧ください。
賢威6.1でヘッダーの説明文(抜粋文)を消す方法

ヘッダー部にグローバルナビを追加

「外観 > テーマ編集」から「header.php」を開きます。

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p>


<h1><?php h1_keni(); ?></h1>
</div>

<?php if(!wp_is_mobile()){ ?>
<div id="header-navi">
<ul>
<li><a href="http://www.keni-customize.net/">ホーム</a></li>
<li><a href="http://www.keni-customize.net/category/startup/">スタートアップ</a></li>
<li><a href="http://www.keni-customize.net/category/customize/">カスタマイズ</a></li>
<li><a href="http://www.keni-customize.net/sitemaps/">サイトマップ</a></li>
<li><a href="http://www.keni-customize.net/contact/">お問い合わせ</a></li>
</ul>
</div>
<?php } ?>

</div>
</div>
<!--▲ヘッダー-->

説明文を表示していたソースをグローバルナビのリストタグに変更しています。
削除した説明文表示ソースは以下の通りです。

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

スマホの場合は、追加したグローバルナビが表示されないように、
ナビ前後に以下のスマホ条件文を挿入しています。

<?php if(!wp_is_mobile()){ ?>
:
<?php } ?>

PCのみ表示が可能となります。
加えて、初期のグローバルナビをスマホのみ表示するために、「header.php」をさらに修正します。

<?php if(wp_is_mobile()){ ?>
<!--▼グローバルナビ-->
<div id="global-nav">
<dl id="global-nav-in">
<dt class="btn-gnav">メニュー</dt>
<dd class="menu-wrap">
<ul id="menu" class="menu">
<?php echo get_globalmenu_keni(); ?>
</ul>
</dd>
</dl>
</div>
<!--▲グローバルナビ-->
<?php } ?>

逆の条件文を初期のグローバルナビ前後に追加しました。
PCで非表示・スマホで表示することができます。

design.cssを修正

追加したグローバルナビをスタイルで微調整します。

#header-navi{
	float: right;
	border: 1px solid #FFF;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

#header-navi:after{
	clear: both;
}

#header-navi ul{
	overflow: hidden;
	list-style: none;
}

#header-navi ul li{
	float: left;
	border-right: 1px solid #FFF;
}

#header-navi ul li:last-child{
	border-right: none;
}

#header-navi ul li a{
	position: relative;
	display: block;
	height: 4.0em;
	line-height: 4.0em;
	padding: 0 2.0em;
	border-right:1px solid #FFF;
	text-decoration: none;
	color: #FFF;
	transition: color .3s ease 0;
	-webkit-transition: color .3s ease 0;
	-moz-transition: color .3s ease 0;
	-ms-transition: color .3s ease 0;
	-o-transition: color .3s ease 0;
	z-index:0
}

#header-navi ul li a:hover{
	color: #333333;
	text-decoration: none;
}

#header-navi ul li:last-child a{
	border-right: none;
}

#header-navi ul li a::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 0;
	top: 0;
	left: 0;
	background-color: #FFF;
	transition: height 0.3s ease 0s;
	-webkit-transition: height 0.3s ease 0s;
	-moz-transition: height 0.3s ease 0s;
	-ms-transition: height 0.3s ease 0s;
	-o-transition: height 0.3s ease 0s;
	z-index: -1
}

#header-navi ul li a:hover::before{
	height: 100%
}

「transition(CSS3)」を利用して、ホバー時のアクションを追加しているため、
スタイルが少し煩雑になっています。この辺はお好みでカラーなど変更してください。

CSS3を利用すると、結構いろいろなアニメーションが可能になりますので、別の記事で紹介します。

  • LINEで送る

コメントを残す

このページの先頭へ