【初心者でも簡単カスタマイズ】はてなブログにスライドメニューを設置したよ！

こんにちは！こっは〜です！

はてなブログのデザインから

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

などとそれぞれ設定していきます。

最後に保存を忘れずに。

これでスライドメニューを設置することができます。

細かいカスタマイズ方法はまた載せますね！

最後までよんでいただきありがとうございます☆

こっは〜。