ブログリニューアルの見た目部分の目玉の一つがiOSカレンダー風アイコン。もう一つが、Apple公式サイト風のメニューだ。
基本デザインセンスは皆無なので、他のサイトさんのデザインを色々参考にするわけだがやっぱり憧れるのはAppleのようなシンプルだけどセンスのあるサイト。
メニューはその象徴的なものだと思っていて、なんとか導入したかったがCSSでどう実装したらいいか分からなかった。
で、色々調べていたらサンプルコードを公開しているサイトがあってそれを参考にすることで解決した。
この記事の掲載内容は、2020年12月24日時点の情報です。現在の情報とは異なる場合がございますので、あらかじめご了承ください。
本ページはアフィリエイトプログラムによる収益を得ています。
サンプルコードを公開しているサイト
サンプルコードを公開していたのはこちらのサイト。
ソースを見る限りAppleはこのメニュー表示に画像を使っているっぽいが、こちらのサンプルはCSS3を使って画像なしで実装してしまうと言う技。
CSS3って最近はHTML5とセットでよく聞くが、実はこれのすごさはよく知りません、、、
CSSサンプル
で、これを持ってくるわけだがそのままじゃあうまくいかない。この中でメニュー表示に関わる部分をWordPressのstyle.cssに持ってくる。
サンプルでは「appleNav」という要素で定義している部分が必要。僕はここを「headnavi」と変えた。
あと、「Page」内だけで有効化するようにした（WordPressでPageという要素はコンテンツ部分のほぼ全域だが）。そうするとCSS定義はこんな感じ。
/* --- Main Nav(Apple風) --- */
#page #headnavi {
margin:20px 0 10px 0;
list-style:none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;
text-shadow: 0 -1px 3px #202020;
width:980px;
height:34px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
}
#page #headnavi li {
display:block;
float:left;
border-right:1px solid #5d5d5d;
border-left:1px solid #929292;
width:105px;
height:34px;
border-bottom:1px solid #575757;
border-top:1px solid #797979;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f; /* Fallback */
}
#page #headnavi li:hover {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838; /* Fallback */
-moz-box-shadow: inset 0 0 5px 5px #535353;
-webkit-box-shadow: inset 0 0 5px 5px #535353;
box-shadow: inset 0 0 5px 5px #535353;
}
#page #headnavi li:not(:last-child):active {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838; /* Fallback */
-moz-box-shadow: inset 0 1px 2px 2px #000;
-webkit-box-shadow: inset 0 1px 2px 2px #000;
box-shadow: inset 0 1px 2px 2px #000;
}
#page #headnavi li:first-child {
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
border-radius:4px 0 0 4px;
border-left:none;
}
#page #headnavi li:first-child a img {
vertical-align:middle;
margin-top:-2px;
}
#page #headnavi li:last-child {
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;
border-right:none;
width:124px;
}
#page #headnavi li a {
color:white!important;;
text-decoration:none;
text-align:center;
display:block;
line-height:34px;
outline:none;
}
多すぎてわけ分からないですよね〜
まあ僕も正直細かい部分はあまり分かっていない。何も考えずに持ってきてもなんとかなるはず。
実装サンプル（WordPressの場合）
で、ここまで出来るとWordPressに仕込むのは実にシンプル。
「header.php」にこんな感じで書けば良い。
<div id="page" class="clearfix">
// メインナビ
<div id="headnavi">
<nav id="mainnav" class="clearfis_mobile()ix">
<?php wp_nav_menu( array( 'theme_location' => 'primary') ); ?>
</nav><!-- end mainnav -->
</div>
// pageはこの後にも続くため</div>は不要
これであなたのサイトもAppleみたいになります！
