やあやあ。好きな男の胸の中でも違う男の夢を見ることでおなじみのdaiです。
私の中でお眠りなさい。私は断じてホモではない。
それはさておいて、Stingerカスタマイズ記事です。
Stingerで作ったブログをスマホで見ると、右上にメニューが出てきます。
クリックするとメニューがにゅっと出てくるので非常に便利です。
非常に便利なんですが、１つだけ気になることがありました。
ページを読み込む際、一瞬メニューが表示されてしまう
ということ。
気にならない人は気にならないんだと思いますが、俺はどうもあの一瞬表示されてしまうアコーディオンメニューがすごい気になっていました。
そこに作成者のENJIさんがこちらの記事にて対処法を書かれており、
「やった！さすが我らのENJIさんや！さすがやでぇ！」
と思ったのもつかの間、現状はなかなか回復しませんでした。
特に読み込みが遅い環境とか、たまたま画像が多いページなんかを開いた時、
まだまだメニューが一瞬表示される現象が続いていたんです。
photo credit: Profound Whatever via photopin cc
よし、オリジナルメニューを作ろう
よし、ここは自分でにゅっと出てくるメニューを作ろうと思い、いろいろと調べて作ることにしました。
今回作るやつはjQueryというよくわからないけどきっと便利な何かを使用します。
普通にワードプレスを使っている方ならデフォルトでjQueryを読み込むようになっていると思うので、
そのままコードを継ぎ足す形で作れます。
完成図
先に完成したものをご紹介します。
こんな感じでタイトルの下にメニューを置いて、クリックすると・・・
このようにメニューがにゅっと出てくる！
もちろんもう一度クリックしたらにゅっとひっこみます。
こんなアコーディオンメニューを作っていきましょう。
※記事内の説明は、Stinger3の最新版「stinger3ver201310231」のソースを元に行います。
書き換える際は、必ずバックアップを取った上で行いましょう。お兄さんとの約束だよっ。
手順①
「外観」→「テーマ編集」からheader.phpを開き、58行目にある<?php wp_head(); ?>のすぐ下にこのコードを貼ります。
<script type="text/javascript">
$(function(){
$('.smmenu2').hide();
$('.smmenu1').click(function(){
$('ul.smmenu2').slideUp();
if($('+ul.smmenu2',this).css('display') == 'none'){
$('+ul.smmenu2',this).slideDown();
}
});
});
</script>
手順②
先ほどのコードを追加した後、同じくheader.phpの79行目～98行目にある
<!--アコーディオン-->
<div class="pcnone">
<div id="s-navi">
<section class="list6">
<dl class="acordion">
<dt class="trigger">
<p><span class="op">About</span></p>
</dt>
<dd class="acordion_tree">
<ul>
<li> <a href="<?php echo home_url();?>" title="トップページ">TOP</a> </li>
<?php wp_nav_menu(array('theme_location' => 'navbar'));?>
</ul>
<div class="clear"></div>
</dd>
</dl>
</section>
</div>
</div>
<!--/アコーディオン-->
この部分を消して、
<div style="margin-top:25px;"></div>
これを書きます。
これで、元々あった右上メニューを削除しました。
するとタイトルが上詰めになってしまうので、margin-top:25px;でタイトルを下に下げています。
手順③
手順②が終わったあと、同じくheader.phpの133行目と134行目の間に改行して、
「?>」のすぐ下にこのコードを貼り付けます。
<!--アコーディオン-->
<ul id="sm_menu">
<div class="smmenu1">◆MENU (click!)</div>
<ul class="smmenu2">
<?php wp_nav_menu(array('theme_location' => 'navbar'));?>
</ul>
</ul>
<div class="clear"></div>
<!--/アコーディオン-->
これでオリジナルのメニューが完成しました。
「◆MENU (click!)」の部分は自由に変更してください。
最後はcssで見た目を整えます。
手順④
smart.cssを開き、一番下にこのコードを追加します。
/* アコーディオンメニュー */
ul#sm_menu, ul.smmenu2{
list-style:none;
margin:0;
padding:0;
}
#sm_menu{
width:100%;
margin:20px 0;
border-bottom:none;
}
.smmenu1{
background:#464646;
color:#fff;
font-size:11pt;
font-weight:bold;
padding:13px 10px 0;
width:100%;
height:35px;
border-top:1px solid #e5e4e6;
border-bottom:1px solid #e5e4e6;
}
.smmenu2 {
display:none;
}
.smmenu2 li{
background:#dcd3b2;
padding:8px 8px 0;
border:1px solid #e5e4e6;
color:#9e9478;
float:left;
font-size:11pt;
font-weight:bold;
height:35px;
margin:1px;
}
これは一例であり自分の好みで設定したので、
皆さんのお好みに合わせていろいろ変更してみてください。
ちなみに、このコードだと、出てくるメニューができるだけ横に敷き詰められる感じになります。
もし縦１列にずらっと並べたい場合は、
上のcssの下の方にある「float:left;」を削除してください。
まとめ
特に難しくもなく、簡単なコードでさくっと導入できるアコーディオンメニュー。
俺は知識が豊富じゃないのでこれぐらいのものしか作れないのと、
処理が重くならないようにということで、すっきりした作りのものを目指しました。
もし導入の上でご不明な点などありましたらお気軽に、めちゃくちゃお気軽にご連絡ください。
では！
