【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

PLAIN・KOALAにスライドメニューを設置する方法

当テーマ「KOALA」をダウンロードして頂き、本当にありがとうござい...と毎回のように言っていると逆にうざったいかもしれないので早速説明に入ります。汗

*「PLAIN」のカスタマイズ方法は、「KOALA」と同じです。

スライドメニューを表示する

KOALAをダウンロードした時点で何も設定していないと、おそらくこのような表示になります。(ヘッダーの背景画像は白になるはずです)

f:id:oyomiyo:20180727203652p:plain

ここにスライドメニューを設置していきましょう。

KOALAではヘッダーに少しコードを追加することでスライドメニューを表示できるよう設定してあります。

デザイン→工具マーク→ヘッダー→タイトル下、と進み、赤枠表示の部分に以下のコードを追加します。

f:id:oyomiyo:20180727204250p:plain

CSS

<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fas fa-check fa-fw" style="font-size:1em;"></i>メニュー2</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>メニュー3</a></div>
<div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>メニュー4</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>メニュー5</a></div></div>
</nav>

追加するとこのように表示されるはずです。

f:id:oyomiyo:20180727204351p:plain

まだURLを貼っていないので、メニューを押しても反応しないかトップページに戻ってしまうはずです。(URLの貼り方は最後に説明します)

メニューの文字を書き換える

メニューの書き換えは、先程追加したコード上で出来ます。

CSS

<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fas fa-check fa-fw" style="font-size:1em;"></i>メニュー2</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>メニュー3</a></div>
<div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>メニュー4</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>メニュー5</a></div></div>
</nav>

赤表示の部分を書き換えることで変更できます。自由に書き換えてください。

 

アイコンを変える

 

アイコンはfont awesomeというウェブフォントを使用しています。font awesome上でフリーアイコンとして表示されているものは全て使用可能です。

Icons | Font Awesome

以下の画面に移動するはずです。

f:id:oyomiyo:20180727210516p:plain

手っ取り早く探すためにフリーアイコンの部分にチェックを付けておくといいかもしれません。

フリーの物だけでも王道なアイコンはひと通りそろっているので、ピッタリのものがすぐ見つかると思います。

良いのが見つかったらクリックして、以下の赤枠の表示を探してください。

f:id:oyomiyo:20180727210349p:plain

例としてAppleのアイコンの場合、アイコン名は「fab fa-apple」となっています。その部分だけコピーして、先程のコードに追加していきます。

その場合このような感じになるはずです。

<div class="menu"><a href="URL"><i class="fab fa-apple fa-fw" style="font-size:1em;"></i>ホーム</a></div>

この時にアイコン名の後ろのfa-fwの部分は削除しないように注意してください。

追加するとこうなります。

CSS

<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fab fa-apple fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fas fa-check fa-fw" style="font-size:1em;"></i>メニュー2</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>メニュー3</a></div>
<div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>メニュー4</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>メニュー5</a></div></div>
</nav>

f:id:oyomiyo:20180727212637p:plain

アイコンがちゃんと切り替わっているのが確認できると思います。

この要領でどんどん変更していってください。

アイコンを表示したくない場合

アイコンを表示したくないという人は、以下のコードを使ってください。

CSS

<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="URL">メニュー1</a></div>
<div class="menu"><a href="URL">メニュー2</a></div>
<div class="menu"><a href="URL">メニュー3</a></div>
<div class="menu"><a href="URL">メニュー4</a></div>
<div class="menu"><a href="URL">メニュー5</a></div>
</div>
</nav>

アイコンなしのシンプルなメニューになります。

URLを貼る

URLとは、ざっくりいうとページの場所を表すものです。今の状態だとメニューをクリックしても飛び先のURLを設定していないので目的のページには飛びません。

ここでオススメの方法を紹介します。

方法は簡単で、作りたいメニューと同じ名前のカテゴリーを作り、カテゴリー別のトップページをURLのリンク先にするという方法です。

はてな側が準備してくださっている機能をうまく使えば、メニューごとの固定ページをいちいち準備する必要はありません。

 

f:id:oyomiyo:20180727214020p:plain

はてなブログで記事ページをカテゴリー分けすると自動的にこのように表示されるはずです。

ここをクリックすると特定のカテゴリーが追加されているものだけが一覧で表示されます。それで、メニューで表示しているものをカテゴリーでも追加してあげると、メニューごとの一覧を表示することができるということです。

メニューに使っている名前のカテゴリーがない場合は、記事編集で新たに追加してあげれば大丈夫です。(つまり私の場合は「タグ2」を「メニュー1」に書き換えればいいわけです)

クリックしたら一覧が表示されるはずですから、そのページのURLをコピーします。

f:id:oyomiyo:20180727215000p:plain

コピーしたらそれを先程のコードに貼り付けていきます。

コードの中のURLと表示されている部分と入れ替えてください。私の場合だとこんな感じです。

CSS

<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="http://oyomiyo.hatenablog.com/archive/category/%E3%82%BF%E3%82%B0%EF%BC%92"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fas fa-check fa-fw" style="font-size:1em;"></i>メニュー2</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>メニュー3</a></div>
<div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>メニュー4</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>メニュー5</a></div></div>
</nav>

これで、メニュー1をクリックすれば、「タグ2」(本来メニュー1に書き換える)のカテゴリーページに飛ぶようになります。他のメニューの部分にも同じように追加してあげてください。

これで完成です。新たに記事を書た場合でも、メニューにあるカテゴリーを追加するだけで勝手に一覧に追加されるため一度設定しておけば後は楽です。

メニューの数を変更する

デフォルトでは5つのメニューが表示されるようになっていますが、数を変更したい場合も簡単にできます。

メニューはひとつひとつがブロックになってます。先程のコードでいうと、

CSS

<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fas fa-check fa-fw" style="font-size:1em;"></i>メニュー2</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>メニュー3</a></div>
<div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>メニュー4</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>メニュー5</a></div></div>
</nav>

この赤表示の部分が一つのブロックです。メニューを増やしたい場合はこの部分をコピペしてあげればメニューの数が増えます。

CSS

<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>
<div class="menu"><a href="URL"><i class="fas fa-check fa-fw" style="font-size:1em;"></i>メニュー2</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>メニュー3</a></div>
<div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>メニュー4</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>メニュー5</a></div></div>
</nav>

試しに2つ分追加してみました。これでメニューの数が7つになっているはずです。アイコンや文字は後で変更すれば問題ありません。

f:id:oyomiyo:20180729212726p:plain

逆に減らしたい場合は赤表示の部分をまるまる削除してあげれば、メニューの数を減らせます。

ちなみに、メニューの数が多くて画面に入りきらなくなった時点でPC表示でもスライドして表示できるようにしています。

文字サイズの変更

最後に文字サイズの変更について少しだけ紹介しておきます。

デフォルトではPC表示の場合は15px、SP表示で14pxの設定していますが、変更したい場合は下のコードを新たに追加してあげてください。

挿入する場所は、ヘッダーのタイトル下がいいかと思います。

CSS

<style type="text/css">
#slide-nav .menu a {
font-size: 15px; /*PC表示時の文字サイズ*/}
@media only screen and (max-width: 599px) {
#slide-nav .menu a {
font-size: 14px; /*SP表示時の文字サイズ*/}}
</style>

赤表示の部分を自由に変更することで調節できます。

最後に

スライドメニューに関しては、前回公開したテーマの「Comfort」とあまり変わりはありません。

かなり時間をかけて作り込んだメニューなので、それなりに気に入ってもらえるのではないかと期待しています。

少なからずURLを貼ったり、メニューの書き換えをしたりと、ある程度作業が必要になるところではありますが、一度設定しておくと後は楽なので頑張ってほしいところです。

「Comfort」の時もそうでしたが、ダウンロードされた方のブログを拝見していると意外にもかなりの人がスライドメニューを設置しない状態で使用されていました。

やはり、いくらかの設定が必要という時点でめんどくさくなってしまう、もしくは難しそうというイメージがあるのではないかと思います。それか、もっとコンテンツを作り込んでから設置しようと考える人もおられるかもしれません。

いずれにしても、必要であれば直ぐにこの記事に戻ってきていただければ嬉しいです。

ブックマークという便利な機能もあるわけだし。(笑)