こんにちは！こっは〜です！
はてなブログのデザインから
「KOALA」をダウンロードしました。
実は私、コハラっていう本名なのでコアラに親近感が湧いたという......w
非常にシンプルなデザインなので、簡単にカスタマイズしたので
その方法を公開します！
はてなブログのデザインで「KOALA」か「PLAIN」を無料インストール！
今回はこちらのデザインを使わせていただいています。
ダウンロードしたあとはこのデザインを作った方のページに飛べば
カスタム方法が載っているのですが、こちら
行っといで〜ってみなさんを野放しにしたら私の存在意義が見出せないので
初心者に寄り添って私が解説しますね！
はてなブログにスライドメニューを設置する方法
CSSをはてなブログのデザインCSSにコピペ
ではまずこのデザイナーの「オヨミヨ」さんのページに飛びまーす！
ぴゅーん！
1番最初に出てくるCSSがスライドメニューのCSSです。
こちらをコピーして持って帰って来ましょう！
では、ご自分のはてなブログの管理画面へ。
【デザイン】→【工具ボタン】→【ヘッダー】→【タイトル下】へ進み、
この【タイトル下】に先ほどコピーしたCSSをペーストします。
このままだとまだメニュー１、メニュー２ってなっているね
コピペした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="fas fa-check 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>
変えるのは、このURLとメニュー１〜５です。
ちなみに私はメニュー１に「HOME」を持ってきています。
メニュー１〜５に、
自分がスライドメニューにしたいワードを持ってきてください。
メニューの数が足りない場合は？
<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー１</a></div>
この部分がひとくくりになるので、こちらを使うメニューの数分足しましょう。
URLの設置方法は？
例えば「HOME」でしたら、あなたのブログのトップページのURL。
例えば「海外記事」でしたら、あなたのブログのカテゴリから
海外記事へジャンプした時のページのURL。
などとそれぞれ設定していきます。
最後に保存を忘れずに。
これでスライドメニューを設置することができます。
細かいカスタマイズ方法はまた載せますね！
最後までよんでいただきありがとうございます☆
こっは〜。