[Stinger3] にゅっと出てくる!オリジナルのスマホメニューを作ろう

medium_5533396152

やあやあ。好きな男の胸の中でも違う男の夢を見ることでおなじみのdaiです。
私の中でお眠りなさい。私は断じてホモではない。

それはさておいて、Stingerカスタマイズ記事です。

Stingerで作ったブログをスマホで見ると、右上にメニューが出てきます。
クリックするとメニューがにゅっと出てくるので非常に便利です。

非常に便利なんですが、1つだけ気になることがありました。

ページを読み込む際、一瞬メニューが表示されてしまう

ということ。

 

気にならない人は気にならないんだと思いますが、俺はどうもあの一瞬表示されてしまうアコーディオンメニューがすごい気になっていました。

そこに作成者のENJIさんがこちらの記事にて対処法を書かれており、

「やった!さすが我らのENJIさんや!さすがやでぇ!」

と思ったのもつかの間、現状はなかなか回復しませんでした。
特に読み込みが遅い環境とか、たまたま画像が多いページなんかを開いた時、
まだまだメニューが一瞬表示される現象が続いていたんです。

photo credit: Profound Whatever via photopin cc

よし、オリジナルメニューを作ろう

よし、ここは自分でにゅっと出てくるメニューを作ろうと思い、いろいろと調べて作ることにしました。

今回作るやつはjQueryというよくわからないけどきっと便利な何かを使用します。
普通にワードプレスを使っている方ならデフォルトでjQueryを読み込むようになっていると思うので、
そのままコードを継ぎ足す形で作れます。

完成図

先に完成したものをご紹介します。

 

こんな感じでタイトルの下にメニューを置いて、クリックすると・・・

smmenu1

 

このようにメニューがにゅっと出てくる!

smmenu2

 

もちろんもう一度クリックしたらにゅっとひっこみます。
こんなアコーディオンメニューを作っていきましょう。

※記事内の説明は、Stinger3の最新版「stinger3ver201310231」のソースを元に行います。
書き換える際は、必ずバックアップを取った上で行いましょう。お兄さんとの約束だよっ。

 

手順①

「外観」→「テーマ編集」からheader.phpを開き、58行目にある<?php wp_head(); ?>のすぐ下にこのコードを貼ります。

 手順②

先ほどのコードを追加した後、同じくheader.phpの79行目~98行目にある

 この部分を消して、

 これを書きます。

これで、元々あった右上メニューを削除しました。
するとタイトルが上詰めになってしまうので、margin-top:25px;でタイトルを下に下げています。

手順③

手順②が終わったあと、同じくheader.phpの133行目と134行目の間に改行して、
「?>」のすぐ下にこのコードを貼り付けます。

 これでオリジナルのメニューが完成しました。
「◆MENU (click!)」の部分は自由に変更してください。

最後はcssで見た目を整えます。

手順④

smart.cssを開き、一番下にこのコードを追加します。

 これは一例であり自分の好みで設定したので、
皆さんのお好みに合わせていろいろ変更してみてください。

ちなみに、このコードだと、出てくるメニューができるだけ横に敷き詰められる感じになります。

もし縦1列にずらっと並べたい場合は、
上のcssの下の方にある「float:left;」を削除してください。

 


まとめ

特に難しくもなく、簡単なコードでさくっと導入できるアコーディオンメニュー。
俺は知識が豊富じゃないのでこれぐらいのものしか作れないのと、
処理が重くならないようにということで、すっきりした作りのものを目指しました。

もし導入の上でご不明な点などありましたらお気軽に、めちゃくちゃお気軽にご連絡ください。

では!

ABOUTこの記事をかいた人

から揚げと音ゲーとFカップが好きな関西人。普段は塾の先生として楽しくお仕事しています。このブログではいろんなことをおもしろおかしく書くことを目標としています。 さらに詳しいプロフィールはこちら