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

f:id:mk615ts13:20190220145915j:plain

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

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

「KOALA」をダウンロードしました。

 

実は私、コハラっていう本名なのでコアラに親近感が湧いたという......w

 

非常にシンプルなデザインなので、簡単にカスタマイズしたので

その方法を公開します!

 

 はてなブログのデザインで「KOALA」か「PLAIN」を無料インストール!

今回はこちらのデザインを使わせていただいています。

ダウンロードしたあとはこのデザインを作った方のページに飛べば

カスタム方法が載っているのですが、こちら

行っといで〜ってみなさんを野放しにしたら私の存在意義が見出せないので

初心者に寄り添って私が解説しますね!

 

はてなブログにスライドメニューを設置する方法

CSSをはてなブログのデザインCSSにコピペ

 ではまずこのデザイナーの「オヨミヨ」さんのページに飛びまーす!

ぴゅーん!

 

1番最初に出てくるCSSがスライドメニューのCSSです。

こちらをコピーして持って帰って来ましょう!

 

では、ご自分のはてなブログの管理画面へ。

【デザイン】→【工具ボタン】→【ヘッダー】→【タイトル下】へ進み、

この【タイトル下】に先ほどコピーしたCSSをペーストします。

 

 

このままだとまだメニュー1、メニュー2ってなっているね

 

コピペした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>

変えるのは、このURLメニュー1〜5です。 

ちなみに私はメニュー1に「HOME」を持ってきています。

 

メニュー1〜5に、

自分がスライドメニューにしたいワードを持ってきてください。

 

メニューの数が足りない場合は?

<div class="menu"><a href="URL"><i class="fa fa-home fa-fw" style="font-size:1em;"></i>メニュー1</a></div>

この部分がひとくくりになるので、こちらを使うメニューの数分足しましょう。

 

URLの設置方法は?

例えば「HOME」でしたら、あなたのブログのトップページのURL。

例えば「海外記事」でしたら、あなたのブログのカテゴリから

海外記事へジャンプした時のページのURL。

 

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

 

 

最後に保存を忘れずに。

 

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

 

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

 

 

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

 

 

 

こっは〜。