Comfort（コンフォート）をお使いいただきありがとうございます。より多くの方に使っていただくためにカスタマイズ方法も詳しく解説していくつもりです。
スライドメニューを表示する
恐らく導入した時点ではサイドメニューが表示されず、上の画像のようになっているはずです。カスタマイズの知識がある方でスライドメニュー以外を使いたいという方は、このまま別のメニューを追加するのもアリだと思います。
Comfortではヘッダーに少しコードを追加することで、スライドメニューがすべてのデバイスで丁度いい大きさで表示されるように設定してありますから、個人的には是非これを使っていただきたいです。
デザイン→工具マーク→ヘッダー→タイトル下、と進み、赤枠表示の部分に以下のコードを追加します。
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>ホーム</a></div>
<div class="menu"><a href="URL"><i class="fa fa-apple fa-fw" style="font-size:1em;"></i>スマホアプリ</a></div>
<div class="menu"><a href="URL"><i class="fa fa-pencil fa-fw" style="font-size:1em;"></i>ブログデザイン</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>ガジェット</a></div>
<div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>ヨミモノ</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>オススメ</a></div></div>
</nav>追加するとこのように表示されます
赤枠の部分が正しく表示されているかどうかを確認しておいて下さい。
始めにメニューの数を変更する方法を紹介します。
メニューの数を変更する
デフォルトでは６つのメニューが表示されるようになっていますが、数を変更したい場合も簡単にできます。
メニューはひとつひとつがブロックになってます。先程のコードでいうと、
CSS
<style type="text/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>ホーム</a></div><div class="menu"><a href="URL"><i class="fa fa-apple fa-fw" style="font-size:1em;"></i>スマホアプリ</a></div> <div class="menu"><a href="URL"><i class="fa fa-pencil fa-fw" style="font-size:1em;"></i>ブログデザイン</a></div> <div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>ガジェット</a></div> <div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>ヨミモノ</a></div> <div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>オススメ</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>ホーム</a></div><div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>ホーム</a></div><div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>ホーム</a></div><div class="menu"><a href="URL"><i class="fa fa-apple fa-fw" style="font-size:1em;"></i>スマホアプリ</a></div> <div class="menu"><a href="URL"><i class="fa fa-pencil fa-fw" style="font-size:1em;"></i>ブログデザイン</a></div> <div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>ガジェット</a></div> <div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>ヨミモノ</a></div> <div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>オススメ</a></div></div> </nav>
試しに２つ分追加してみました。これでメニューの数が８つになっているはずです。アイコンや文字は後で変更すれば問題ありません。あとで方法を紹介するのでそれを参考にして下さい。
ちなみに、メニューの数が多くて画面に入りきらなくなった時点でPC表示でもスライドして表示できるようにしています。
逆に減らしたい場合は赤表示の部分をまるまる削除してあげれば、メニューの数を減らせます。
次はメニューの文字の書き換えです。
メニューの文字を書き換える
メニューの書き換えは、先程追加したコード上で出来ます。
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>ホーム</a></div> <div class="menu"><a href="URL"><i class="fa fa-apple fa-fw" style="font-size:1em;"></i>スマホアプリ</a></div> <div class="menu"><a href="URL"><i class="fa fa-pencil fa-fw" style="font-size:1em;"></i>ブログデザイン</a></div> <div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>ガジェット</a></div> <div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>ヨミモノ</a></div> <div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>オススメ</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>ミズクサ</a></div> <div class="menu"><a href="URL"><i class="fa fa-apple fa-fw" style="font-size:1em;"></i>ネッタイギョ</a></div> <div class="menu"><a href="URL"><i class="fa fa-pencil fa-fw" style="font-size:1em;"></i>コケタイサク</a></div> <div class="menu"><a href="URL"><i class="fa fa-wrench fa-fw" style="font-size:1em;"></i>チシキ</a></div> <div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>オススメ</a></div></div> </nav>
私の場合アクアリウムサイトなのでこんな感じになりました。また、メニューの数もひとつ減らしてみました。
次はアイコンの書き換えを行います。
アイコンを変える
アイコンはfont awesomeというウェブフォントを使用しています。font awesome上でフリーアイコンとして表示されているものは全て使用可能です。
font awesomeのトップページが表示されたら、上の画像を元にアイコンを探します。
王道なアイコンはひと通りそろっているので、すぐにピッタリのものが見つかると思います。
良いのが見つかったらクリックして、以下の表示を探してください。
例としてインスタのアイコンの場合、アイコン名もInstagramとなっています。その部分だけコピーして、先程のコードに追加していきます。
その場合このような感じになるはずです。
<div class="menu"><a href="URL"><i class="fa fa-fa-fw" style="font-size:1em;"></i>ホーム</a></div>
この要領で書きかえていってください。私のサイトの場合だとこんな感じでしょうか？。
CSS
<nav id="slide-nav"> <div class="slide-nav-inner" id="menu-scroll"> <div class="menu"><a href="URL"><i class="fa fa-leaffa-fw" style="font-size:1em;"></i>ミズクサ</a></div> <div class="menu"><a href="URL"><i class="fa fa-starfa-fw" style="font-size:1em;"></i>ネッタイギョ</a></div> <div class="menu"><a href="URL"><i class="fa fa-pencilfa-fw" style="font-size:1em;"></i>コケタイサク</a></div> <div class="menu"><a href="URL"><i class="fa fa-bookfa-fw" style="font-size:1em;"></i>チシキ</a></div> <div class="menu"><a href="URL"><i class="fa fa-boltfa-fw" style="font-size:1em;"></i>オススメ</a></div> </div> </nav>
アイコンがちゃんと切り替わっているのが確認できると思います。
アイコンを表示したくない場合
アイコンを表示したくないという人は、以下のコードを使ってください。
CSS
<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="URL">ホーム</a></div>
<div class="menu"><a href="URL">スマホアプリ</a></div>
<div class="menu"><a href="URL">ブログデザイン</a></div>
<div class="menu"><a href="URL">ガジェット</a></div>
<div class="menu"><a href="URL">ヨミモノ</a></div>
<div class="menu"><a href="URL">オススメ</a></div>
</div>
</nav>URLを貼る
URLとは、ざっくりいうとページの場所を表すものです。今の状態だと、メニューをクリックしても飛び先のURLを設定していないので、目的のページに飛んでくれないはずです。
それで簡単な方法を紹介するので、やり方が分からない人は私の方法でやってみて下さい。
まずは、サイドバーに表示されているカテゴリーの表示を探します。はてなブログで記事ページをカテゴリー分けすると、自動的にここに表示されるようになっています。
ここをクリックすると、特定のカテゴリーが追加されているものだけが一覧で表示されます。それで、メニューで表示しているものをカテゴリーでも追加してあげると、メニューごとの一覧を表示することができます。
メニューに使っているカテゴリーがない場合は、記事編集で新たに追加してあげれば大丈夫です。
クリックしたら一覧が表示されるはずですから、そのページのURLをコピーします。
コピーしたらそれをコードに貼り付けていきます。
コードの中のURLと表示されている部分と入れ替えてください。私の場合だとこんな感じです。
CSS
<nav id="slide-nav"> <div class="slide-nav-inner" id="menu-scroll"> <div class="menu"><a href="https://mitikusa.hateblo.jp/archive/category/%E6%B0%B4%E8%8D%89"><i class="fa fa-leaf fa-fw" style="font-size:1em;"></i>ミズクサ</a></div> <div class="menu"><a href="URL"><i class="fa fa-star fa-fw" style="font-size:1em;"></i>ネッタイギョ</a></div> <div class="menu"><a href="URL"><i class="fa fa-pencil fa-fw" style="font-size:1em;"></i>コケタイサク</a></div> <div class="menu"><a href="URL"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>チシキ</a></div> <div class="menu"><a href="URL"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>オススメ</a></div> </div> </nav>
これで、ミズクサの部分をクリックすれば、水草のカテゴリーページに飛ぶようになります。他のメニューの部分にも追加してあげてください。
これで全て完成です。新たに記事を書た場合でも、メニューにあるカテゴリーを追加するだけで勝手に一覧に追加されるため、一度設定しておけば後は楽です。
私の場合最終的に完成したコードは以下のようになりました、参考までに載せておきます。
CSS
<nav id="slide-nav">
<div class="slide-nav-inner" id="menu-scroll">
<div class="menu"><a href="https://mitikusa.hateblo.jp/archive/category/%E6%B0%B4%E8%8D%89"><i class="fa fa-leaf fa-fw" style="font-size:1em;"></i>ミズクサ</a></div>
<div class="menu"><a href="https://mitikusa.hateblo.jp/archive/category/%E7%86%B1%E5%B8%AF%E9%AD%9A"><i class="fa fa-star fa-fw" style="font-size:1em;"></i>ネッタイギョ</a></div>
<div class="menu"><a href="https://mitikusa.hateblo.jp/archive/category/%E3%82%B3%E3%82%B1%E5%AF%BE%E7%AD%96"><i class="fa fa-pencil fa-fw" style="font-size:1em;"></i>コケタイサク</a></div>
<div class="menu"><a href="https://mitikusa.hateblo.jp/archive/category/%E7%9F%A5%E8%AD%98"><i class="fa fa-book fa-fw" style="font-size:1em;"></i>チシキ</a></div>
<div class="menu"><a href="https://mitikusa.hateblo.jp/archive/category/%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1"><i class="fa fa-bolt fa-fw" style="font-size:1em;"></i>オススメ</a></div>
</div>
</nav>これで完成です。
文字サイズの変更
最後に文字サイズの変更について少しだけ紹介しておきます。
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>挿入する場所は、ヘッダーのタイトル下がいいかと思います。
最後に
上手くできたでしょうか？
スライドメニューはワンクリックで目的のページに飛ぶことができ、場所も取らず非常にスタイリッシュだと思っています。
情報量の多い企業のウェブサイトなどであれば話は別ですが、個人が運営するブログのレベルであればこのくらいが妥当ではないでしょうか。
画面幅の狭いスマホなどの場合は、おそらくすべてのメニューが画面の中に収めらないためスクロールする必要が出てくると思います。それで、ユーザーにスクロールできるということを自然に気付かせるため、SP表示ではページの読み込み時に若干スライドするように設定しています。
読み込みを遅らせる可能性があるJavaScriptなどは一切使用せず、cssのみで設定しているため安心です。