TwentyTwelveにアイコンフォントを使ったメニューを作成する

WordPress のテーマ TwentyTwelve のカスタマイズ記事です。

今回は、以前作成したアイコンメニューの CSS スプライト部分を、アイコンフォントに置き換えてみようと思います。

関連記事

アイコンメニュー作成
TwentyTwelveにCSSスプライトを使ったメニューを作成する
TwentyTwelveの微妙なメニューボタンをカスタマイズする

アイコンフォントの導入
TwentyTwelveにもアイコンフォントを導入してみた

スポンサーリンク

TwentyTwelveへアイコンフォントを使ったメニューを作成する

アイコンフォントへの置き換えは header.php とスタイルシートを修正・調整する必要があります。

まずは、header.php から修正していきます。

header.phpの修正

ここまでのカスタマイズで header 要素間をかなり弄っているのですが、これまでのコードはこんな感じになっていました。

<header id="masthead" class="site-header" role="banner">
	<div class="hdr">
		<div class="hdr-title">
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<p class="site-description"><?php bloginfo( 'description' ); ?></p>
		</div><!-- .hdr-title -->
		<div class="hdr-navi">
			<div class="gcse-searchbox-only" data-newWindow="false"></div>
				<div id="hdr-menu" class="hdr-menu">
					<ul>
						<li><span class="menu-toggle"></span></li>
						<li><a class="sprite-author" href="<?php echo esc_url( home_url( '/profile' ) ); ?>" title="Profile" rel="author"></a></li>
						<li><a class="sprite-company" href="https://worklog.be/" title="MyWork" target="_blank"></a></li>
						<li><a class="sprite-mail" href="<?php echo esc_url( home_url( '/contact' ) ); ?>" title="Contact" rel="nofollow"></a></li>
						<li><a class="sprite-feed" href="<?php echo esc_url( home_url( '/feed' ) ); ?>" title="Feed" rel="nofollow"></a></li>
					</ul>
				</div><!-- .hdr-menu -->
			</div><!-- .hdr-navi -->
			<div class="hdr-menu-end"></div>
		</div><!-- .hdr -->
		<nav id="site-navigation" class="main-navigation" role="navigation">
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->
</header><!-- #masthead -->

hgroup 要素が廃止になったので div 要素で置き換えたりして、デフォルトとはかなり違いますが CSS スプライトで表示しているメニュー部分は 45 – 53 行目がそれに該当します。

これをアイコンフォント用に以下のように書き換えます。

<header id="masthead" class="site-header" role="banner">
	<div class="hdr">
		<div class="hdr-title">
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<p class="site-description"><?php bloginfo( 'description' ); ?></p>
		</div><!-- .hdr-title -->
		<div class="hdr-navi">
			<div class="gcse-searchbox-only" data-newWindow="false"></div>
				<ul id="hdr-menu" class="hdr-menu">
					<li class="menu-toggle sp-icon"><span></span></li>
					<li class="admin-icon"><a href="<?php echo esc_url( home_url( '/profile' ) ); ?>" title="Profile" rel="author"></a></li>
					<li class="service-icon"><a href="https://worklog.be/" title="MyWork" target="_blank"></a></li>
					<li class="mail-icon"><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" title="Contact" rel="nofollow"></a></li>
					<li class="rss-icon"><a href="<?php echo esc_url( home_url( '/feed' ) ); ?>" title="Feed" rel="nofollow"></a></li>
				</ul><!-- .hdr-menu -->
			</div><!-- .hdr-navi -->
			<div class="hdr-menu-end"></div>
		</div><!-- .hdr -->
		<nav id="site-navigation" class="main-navigation" role="navigation">
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->
</header><!-- #masthead -->

冗長だった div 要素を消して ul 要素に ID とクラス名を移行したのと、CSS スプライト用のクラス名を消してアイコンフォント用のクラス名を付与したという修正内容になります。

これで header.php の修正は完了です。

スタイルシートの調整

次にアイコンフォント用にスタイルシートを調整します。

.hdr {
	text-align: center;
}
.hdr-title {
	float: left;
}
	.hdr-navi {
	width: 280px;
	width: 20rem;
	height: 70px;
	height: 5rem;
	margin-top: 10px;
	margin-top: 0.714286rem;
	float: right;
}
.hdr-menu {
	float: right;
}
.hdr-menu li {
	float: left;
	margin-left: 8px;
	margin-left: 0.571429rem;
}
.hdr-menu a {
	color: #464646;
}
.hdr-menu a:hover {
	color: #21759b;
}
.hdr-menu-end {
	clear: both;
}

/* Genericon */
.genericon:before,
.sp-icon span:before,
.admin-icon a:before,
.service-icon a:before,
.mail-icon a:before,
.rss-icon a:before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font: normal 28px/1 Genericons;
	vertical-align: text-bottom;
}
.sp-icon span:before {
	content: "\f437";
	position: relative;
	top: 2px;
	margin-right: -8px;
	font: 35px Genericons;
}
.admin-icon a:before {
	content: "\f304";
	position: relative;
	margin-right: -10px;
	font: 38px Genericons;
}
.service-icon a:before {
	content: "\f408";
	position: relative;
	margin-right: -5px;
	font: 38px Genericons;
}
.mail-icon a:before {
	content: "\f410";
	position: relative;
	top: 4px;
	font: 35px Genericons;
}
.rss-icon a:before {
	content: "\f413";
	position: relative;
	top: 7px;
	font: 26px Genericons;
}

/* タブレット向け */
@media screen and (max-width: 660px) {

	.hdr-title {
		float: none;
	}
	.site-header h1 {
		ont-size: 46px;
		font-size: 3.285714285714286rem;
	}
	.hdr-navi {
		display: -moz-inline-box;
		display: inline-block;
		/display: inline;
		/zoom: 1;
		float: none;
	}
	.hdr-menu {
		list-style-type: none;
		margin: 10px 0 0 0;
		margin: 0.7142857142857143rem 0 0 0;
		padding: 0;
		display: -moz-inline-box;
		display: inline-block;
		/display: inline;
		/zoom: 1;
		float: none;
	}
	.site-header {
		padding: 24px 0 0;
		padding: 1.714285714rem 0 0;
	}
	.menu-toggle {
		cursor: pointer;
	}
}

/* スマートフォン向け */
@media screen and (max-width: 400px) {

	.entry-header .entry-title {
		font-size: 14px;
		font-size: 1rem;
	}
	.hdr-navi {
		width: auto;
	}

}

編集後はいかのような感じになりました。

before

after

660px 以下ではこのような感じです。

フォント毎の微調整が必要ですが、CSS スプライトと違って表示サイズが容易に変更できるのは便利です。

とりあえず、無事置き換えが完了して満足しました。