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

はてなブログでレスポンシブに使えるシンプルなスライドメニューを作りました

今回はスライドメニューの設置方法です。

当サイトに設置してあるスライドメニューと同じものですので、気に入った方は是非カスタマイズしてみて下さい。

以下注意点です。

念のためにバックアップはとっておいてください。

またこの記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN – テーマ ストア

スライドメニューの紹介

皆んさんスライドメニュー使ってますでしょうか?

私のテーマ使用者ならわかると思いますが、私はスライドメニューが大好きです。そんな私が今回スライドメニューを作ってみたのでまずはその紹介から始めたいと思います。

はてなブログでもスライドメニューを使っている方をたまに見かける反面、おすすめのメニューデザイン記事なんかにはランクインすらしていないなんてこともしばしばです。

もっと評価されてもいいのにというワタクシの願いを広めるべく、多くの人に使ってもらえると嬉しいです。

で、スライドメニューのメリットはざっとこんな感じ。

  • 場所をとらずデザインに干渉しない
  • メニューの数を気にする必要がない
  • ワンクリックで目的のページに飛べる
  • かわいい♡

※個人的な主観は一切省きました。(うそつけ)

逆にデメリットとしては、細かなグループ分けをしようとするとメニューの数が増えすぎてしまうということでしょうか?

まあ、大企業のホームページならまだしも、個人ブログ程度の情報量をまとめるには、スライドメニューで事足りるんじゃないかと思いますね。

で見た目、

f:id:oyomiyo:20180921125524p:plain

こんな感じのメニューになります。

メニューが横幅に収まっている場合はスライドさせる必要もないので普通のメニューみたいな感じになってますね。

色や高さ、文字の大きさとかは後からカスタマイズできます。私のブログの場合はこんな感じ。(2018/9/21現在)

f:id:oyomiyo:20180921125630p:plain

アイコンフォントを使用して若干オサレにしています。(やり方は後ほど)

「メニューの数が多すぎて横幅からはみ出すんですけど」という方もおられるかもしれませんが、はみ出した時点でスライドできるように設定しているので大丈夫です。

あともうひとつ、

スマホなど画面の幅が狭いデバイスの場合、スライドできることに気づかない場合があります。

それを避けるために、ページをロードした時点で若干スライドするようにしています。当サイトの場合はこんな感じです。

f:id:oyomiyo:20180921131344g:plain

JavaScriptなど重くなる可能性のあるものは一切使わず、CSSだけでアニメーションを付けているので安心です。

スライドメニューを設置する

スライドメニューの設置はデザイン設定の部分から行います。コードを追加するのはタイトル下の部分です。

f:id:oyomiyo:20180909220240p:plain

赤枠の部分に以下のコードをコピペしてください。

HTML

<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>

この部分に既にコードが書き込まれている場合は、一番上にコピペすると間違いないと思います。

この時点ではCSSを追加していないので私の場合は以下のような表示になりました。

f:id:oyomiyo:20180921102847p:plain

こんな感じになっていれば大丈夫です。

シンプルなメニューなのでそのまま使ってください(=゚ω゚)ノ

で次にCSSです。

さっき追加したコードのすぐ後ろに以下を追加します。

CSS


<style type="text/css">
#slide-nav {
padding: 0;
font-weight: bold;
background-color: #000; /*背景色(二か所あり)*/
}
#slide-nav .menu a {
display: block;
color: #fff; /*文字色*/
font-size: 15px; /*PC表示フォントサイズ*/
font-weight: bold;
line-height: 35px; /*PC表示でのスライドメニューの高さと同じにする*/
text-align: center;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box;
text-decoration: none;
}
#slide-nav .slide-nav-inner {
position: relative;
width: 100%;
height: 35px; /*PC表示でのスライドメニューの高さ*/
padding: 0 6px;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
margin: 0 auto;
background-color: #000; /*背景色(二か所あり)*/
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
#slide-nav .menu {
display: inline-block;
}
/* Media Queries - Small Tablet & Smartphone */
@media only screen and (max-width: 599px) {
#slide-nav {
width: 100%;
padding-left: 30px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
#slide-nav .menu a {
   font-size: 14px; /*SP表示フォントサイズ*/
font-weight: bold;
padding: 0px 6px;
line-height: 33px; /*SP表示でのスライドメニューの高さと同じにする*/
}
#slide-nav .slide-nav-inner {
margin: 0 auto;
position: relative;
height: 33px; /*SP表示でのスライドメニューの高さと同じにする*/
}
#slide-nav .slide-nav-inner {
position: relative;
animation: slideIn 1s ease-out 0s 1 normal forwards;
-webkit-animation: slideIn 1s ease-out 0s 1 normal forwards;
}
@keyframes slideIn {
0% {}
100% {
-webkit-transform: translate(-30px);
transform: translate(-30px);}
}
@-webkit-keyframes slideIn {
0% {}
100% {
-webkit-transform: translate(-30px);
transform: translate(-30px);}
}}
</style>

※私のテーマ「PLAIN」「KOALA」「Comfort」の使用者は既に設定されているため追加する必要はありません。

長いですがすべて追加してください。

こんな感じになるはずです。

f:id:oyomiyo:20180921103522p:plain

詳しい説明は世界平和のために省きます。

 

、、、、やっぱりちょっとだけします。

 

その前にリンクの貼り方も説明しないといけませんでした。なんかメニューの形だけ完成したら満足してしまいそうですね。(。-∀-)(オマエだけや)

まだURLを貼っていないので、メニューを押しても反応しないかトップページに戻ってしまうはずです。これだとメニューの意味ないですからね。汗)

飛び先のURLを貼る

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

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

ほとんどの方がやっているかもしれませんが、作りたいメニューと同じ名前のカテゴリーを作り、カテゴリー別のトップページをURLのリンク先にするという方法です。

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

これから説明しますね。

 

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

f:id:oyomiyo:20180921164049p:plain

ここをクリックすると特定のカテゴリーが追加されているものだけを一覧表示してくれます。

それで、作りたいメニュー名と同じカテゴリーページを作ってあげると、メニューごとの記事一覧を簡単に表示することができるのです。

仮にスライドメニュー上の「メニュー1」をクリックした場合、「メニュー1」と同じ名前に設定したカテゴリーページのURLを飛び先に設定しておけばいいだけです。

便利でしょ?、、、これを使わない手はありません。

 

メニュー1を「メニュー1」という名前で設定するとしましょう。(文字の書き換えに関しては後で説明します)

f:id:oyomiyo:20180921165534p:plain

さっきの説明通り「タグ1」だったカテゴリーを「メニュー1」に書き換えます。

※メニュー名の書き換えは、ダッシュボードから「カテゴリー」をクリックして変更できます。

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

コードの中の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%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%EF%BC%91">メニュー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>

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

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

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

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

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>

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

メニューの数を変更する

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

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

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>

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

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">メニュー1</a></div>
<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>

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

f:id:oyomiyo:20180921171453p:plain

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

先程も言いましたが、メニューの数が多くて画面に入りきらなくなった時点でPC表示でもスライドして表示できるようにしているので、メニューの数に制限はありません。

これでスライドメニューのすべての設定は終わりです。

あとは好みに合わせて見た目を変えたい人だけが対象になります。

スライドメニューの背景色と文字色を変更する

今度はスライドメニュー自体のカスタマイズです。

ここからはさっきのコードではなく、冒頭で載せたあの長ったらしいコードを使って行います。

背景色を指定しているのはこの2つです。

あの長ったらしいコードをもう一度載せる気が起きないのでハショリマス。

background-color: #000; /*背景色(二か所あり)*/
color: #fff; /*文字色*/

冒頭に乗せたコードのうち上のやつが二か所にありますのでどちらも書き換えるようにお願いします。

試しに背景色を明るいグレー(#efefef)文字を黒(#000)にしてみましょう。

f:id:oyomiyo:20180921154938p:plain

あさげ、ではなくよさげ。揚げ)汗)

スライドメニューの高さと文字の大きさを変える

例としてPC表示の場合以下の3つを変更することになります。まあコメントアウトにして書いているのでわかるとは思いますが、、、

いちおう説明しますね。

font-size: 15px; /*PC表示フォントサイズ*/
height: 35px; /*PC表示でのスライドメニューの高さ*/
line-height: 35px; /*PC表示でのスライドメニューの高さと同じにする*/

試しにスライドメニューの高さを100pxに設定してみましょう!!!

font-size: 15px; /*PC表示フォントサイズ*/
height: 100px; /*PC表示でのスライドメニューの高さ*/
line-height: 100px; /*PC表示でのスライドメニューの高さと同じにする*/

下ふたつを両方とも100pxに書き換える必要があります。

こうなります。

f:id:oyomiyo:20180921174139p:plain

ズドーーーン!!!

(これくらいしか遊べるところないから許して)

こうなったら文字もデカくするしかないですね。150pxでいきましょ~。(考え方が小学生)

f:id:oyomiyo:20180921174740p:plain

ズドドドーーーーーん!!!!!

良い。すごく良い。

アイコンを表示する

ウェブフォントを利用してメニューごとにアイコンを表示することができます。

アイコンを使用する場合は、

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>

こっちのコードを使ってください。「URLいれたしもっとはよいえ」という方々については、私からは一切の...すみませんでした。

アイコンは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:20180921182014p:plain

アイコンがAppleのやつになっているのが確認できると思います。

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

取りあえずこれで全てのカスタマイズの説明を終わります。必要があればまた追加します。

ではまた。