INO'S BLOG

投資している会社員のブログ

グローバルメニューを設置してサイトの利便性を上げましょう

はてなブログのトップページにメニューが表示されて、興味のあるトピックにアクセスしやすくなりました。

staff.hatenablog.com

それに合わせて当ブログでもメニューを導入しましたので、今回はグローバルメニューのメリットや導入の仕方について紹介します。

  • グローバルメニューを導入したい人
  • グローバルメニューに興味がある人

の参考になればと思います。

注意

CSSを紹介していますが、お使いのテーマや既存のCSSによっては記述を追加して調整する必要があります。

f:id:toushi-ino:20210721190802j:plain

カテゴリーが増えてきたら導入を検討しましょう

グローバルメニューのメリット

グローバルメニューのメリットは、

  • 興味のあるトピックへアクセスしやすくなる
  • サイトでどのようなトピックを扱っているのかわかりやすくなる

というものがあります。


要するにサイトを訪れた人が、よりサイトを利用しやすくなるのです。 

グローバルメニューの設置方法

種類にもよりますが基本的に

  • HTMLの記述
  • CSSの記述

のみでメニューを導入することができます。


以下、はてなブログ向けに具体的な説明をします。

HTMLの記述

デザイン>カスタマイズ>ヘッダ>タイトル下に次のような記述します。

<ul class="nav">
<li><a href="URL">カテゴリー1</a></li>
<li><a href="URL">カテゴリー2</a></li>
<li><a href="URL">カテゴリー3</a></li>
<li><a href="URL">カテゴリー4</a></li>
<li><a href="URL">カテゴリー5</a></li>
</ul>

カテゴリー名やURLは自分が表示したいものを記述します。また、さらにカテゴリーが必要であれば<li>~</li>を増やせばOKです。


これだけでも表示はされますが、縦にズラーと並ぶだけなのでCSSで見た目を整えます。

CSSの記述

ここでは、横並びになるタイプのCSSを紹介します。ほかのデザインが良い人は検索すればたくさん出てくるのでそちらを参考にしてください。


デザイン>カスタマイズ>デザインCSSに次のコードを記述します。 

.nav {
display: flex;
list-style-type: none;
padding-left: 0;
overflow-x: auto;
}
.nav a {
display:block;
padding: 8px 20px;
font-size: 14px;
white-space: nowrap;
}

マウスオーバーした時に変化が欲しい人は、次のサイトなどを参考にCSSを追加すると良いでしょう。

www.terakoya.work

まとめ

利用者は少ないかもしれませんが、メニューを設置するとサイトの利便性が上がります。ある程度カテゴリーがある人は設置してみてはいかがでしょうか。


以上、参考になれば幸いです。