ブログの知識がゼロの状態からブログを始めた時、見た目をカスタマイズする一番最初に手をつかやすいのは、HTML/CSSを駆使してデザインすることから始めると思います。
そして、慣れてきたら次の段階でjavascriptやjQueryを使うと、動きのあるメニューなど、更に見た目を良くすることができます。
ブログの見た目は、読み手に気持ちよく読んでもらいたいという思いと、あとはもう自己満足の域ですね。
ここでは、はてなブログでのjQueryの使い方を備忘も兼ねて書いていきます。
1.jQueryを使うための準備
まずjQueryとは何かというと、世界でよく使われているJavaScriptライブラリです。
jQueryを利用する方法は、以下の2種類があります。
・CDNを利用する。
・公式サイトからファイルをダウンロードして、それをサイト内に設置する。
はてなブログでjQueryを使うためには、CDNを利用します。
CDNとは、Contents Derivery Networkの略語で、訳すとコンテンツ配信ネットワークといいます。
jQueryをホストしているCDNはいくつかありますが、ここでは、Googleのものを使います。
使い方は以下のコードをはてなブログのheaderに記述します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
記述場所は、
「設定」ー>「詳細設定」ー>「検索エンジン最適化」ー>「headに要素を追加」
にします。
基本的な設定はこれだけ。
そして、jQueryを使ったスクリプトもheaderに記述していくのですが、これは後で説明します。
2.HTMLの書き方
HTMLの書き方は、極力各タグにクラス名を付けて書きます。
理由は、アコーディオンメニュー用にulタグやliタグを使用したいので、全てのulタグやliタグに反映されないようにするためです。
アコーディオンメニューのHTMLの書き方の例は、下記のような感じです。
<ul class="navi"> <li> <div class="category">ファッション</div> <ul class="menu"> <li><a href="11">アウター</a></li> <li><a href="12">インナー</a></li> <li><a href="13">ボトム</a></li> <li><a href="14">バッグ</a></li> <li><a href="15">靴</a></li> <li><a href="16">アクセサリー</a></li> </ul> </li> <li> <div class="category">家具・インテリア</div> <ul class="menu"> <li><a href="21">収納家具</a></li> <li><a href="22">ソファ</a></li> <li><a href="23">ベッド</a></li> <li><a href="24">テーブル</a></li> <li><a href="25">チェア</a></li> <li><a href="26">照明</a></li> </ul> </li> <li> <div class="category">ステーショナリー</div> <ul class="menu"> <li><a href="31">ペン・鉛筆</a></li> <li><a href="32">ノート</a></li> <li><a href="33">ファイル</a></li> <li><a href="34">付箋</a></li> </ul> </li> <li> <div class="category">生活雑貨</div> <ul class="menu"> <li><a href="41">キッチン用品</a></li> <li><a href="42">掃除・洗濯用品</a></li> <li><a href="43">バス・トイレ用品</a></li> <li><a href="44">その他</a></li> </ul> </li> </ul>
これを普通にブラウザで見ると全項目が開いた状態になっていますが、後で説明するjQueryのスクリプトを書くことで、divタグ以外は、すべて隠れた状態になります。
3.CSSの書き方
「デザイン」⇒「カスタマイズ(スパナマーク)」⇒「デザインCSS」
に追加します。
CSSの書き方の例は、下記のような感じです。
ul.navi { width:220px; margin:0px; } ul.menu li:hover { background-color: #ffccff; } ul.navi, ul.menu { margin: 0; padding: 0; list-style: none; } div.category { margin-top:5px; height: 40px; line-height: 40px; background-color: #B9DDE8; } div.category:hover { background-color: #ffccff; } ul.menu a { display:block; height: 35px; line-height: 35px; color: #164158; } ul.menu li { background-color: #F2F9FB; }
幅や色などは、自由に設定してみてください。
4.jQueryコードの書き方
アコーディオンメニューとし動作させるスクリプトを書いていきます。
スクリプトの書き方の例は、下記のような感じです。
<script type="text/javascript"> $(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $("ul.menu").hide(); if($("+ul",this).css("display")=="none"){ $("+ul",this).show(); } }); }); </script>
jQueryの基本は説明しませんが、スクリプトについて簡単に説明します。
3行目は、CSSで書いたulタグのmenuクラスで囲まれたアイテムを全部非表示にします。
4行目は、CSSで書いたdivタグのcategoryクラスの項目をマウスでクリックした時の動作を行います。
5行目は、表示しているulタグのmenuクラスを非表示にします。
6、7行目は、クリックされたdivタグのcategoryクラスのulタグが非表示状態であるなら、表示にします。
このような感じで、JavaScriptよりも短いコードで記述することができます。
記述場所は、1項で記述した場所と同じで、
「設定」ー>「詳細設定」ー>「検索エンジン最適化」ー>「headに要素を追加」
にします。
5.実際の動作
1項~4項で記述したコードを実際に動かしてみると、このような感じになります。
このコードでは、同じ項目をクリックしてもメニュー項目は閉じません。
開閉するメニューは、また別の機会に書きたいと思います。
6.まとめ
メニューをクリックして動きが出るだけでも、ブログのデザインが良くなると思います。
まずは、デザインを考えるところから始めて、コードで実現できるかを検討するという流れが デザイン設計の楽しさだと思います。
<関連・おすすめ記事>
はてなブログでjQueryを使った階層型メニューの作り方 - 水瓶座列車
ブログデザインを自分で劇的に良くできる件 ~ 少しのHTMLタグとCSSの書き方だけ - 水瓶座列車