【はてなブログ】カテゴリーリンクを設置してカテゴリー分けした記事にアクセスしやすくしよう。

カテゴリー分けした記事にアクセスしやすくしよう

こんにちは。今回はカテゴリー分けした記事にアクセスしやすくする、カテゴリーリンクの設置方法についてです。

ブログタイトルの下にある、おしゃれなバナーみたいなやつですね。

※他にもグローバルリンク、ナビゲーションメニュー、ドロップダウンメニューなど色々と呼び名があるようです。

当記事では、階層構造を持つカテゴリーリンクについて設置方法を説明していきます。

今回は遷移先URLの設定などがあるので、コピペ以外の作業もありますが、8割方はコピペ出いけるので、そこまで難しくないかなと思います。

それではいってみましょう！

カテゴリーリンクのデザイン（完成図）

こんなものができます。

f:id:mminammi:20210611115018p:plain — カテゴリーリンク

余談：

サイドバーにカテゴリーを表示したり、パンくずリストで階層を表示したり、カテゴリー別の記事にアクセスするには色々な手法がありますが、

当記事で設置方法を解説するカテゴリーリンクはカーソルを当てるだけでサブカテゴリーを表示してくれるので、なかなか使い勝手が良いのではないかなと思います。

カテゴリー分けした記事にアクセスしやすくしよう
最後に

ざっくりやること

以下の通りです。

　手順　

1：ヘッダーのタイトル下にHTMLのコードを貼り付け

　1-1：HTML内のカテゴリ名部分を変更

　1-2：HTML内のURL部分を変更

2：デザインCSSにCSSのコードを貼り付け

　2-1：（背景色や文字色を変えたい場合は）CSS内の色部分を変更

今回はコピペ以外にも、表示する文字の変更やURLの設定が最低限必要になりますが、画像付きで詳しく説明していきますね。

！記事にカテゴリー設定していない場合は、カテゴリーを設定しましょう。

カテゴリーが設定されていないと、カテゴリーリンクは効果を発揮しません。

記事のカテゴリー設定をしていない場合は設定を行いましょう。

mminammi.hatenablog.jp

ヘッダーのタイトル下のHTML編集

管理画面＞デザイン＞カスタマイズ（スパナマーク）＞ヘッダー＞タイトル下にコードを貼り付けます。

f:id:mminammi:20210611124701p:plain — ヘッダー＞タイトル下にコードを貼り付けます

HTMLに貼り付けるコード

以下のコードをヘッダ＞タイトル下に貼り付けてください。

  <!-- カテゴリリンク階層化HTML -->
<div id="menu">
<div id="menu-inner">
 <div id="btn-content">
 <span id="menu-btn"><i class="blogicon-reorder"></i> MENU </span>
 </div>
 <ul id="menu-content">
 <li>
 <a href="[ここにURL（トップページを想定）]"><i class="fa fa-home" aria-hidden="true"></i> HOME </a>
 </li>
 <li>
 <a href="[ここにURL]"><i class="fa fa-child" aria-hidden="true"></i> カテゴリー１<i class="blogicon-chevron-down"></i></a>
 <ul class="second-content"> 
 <li><a href="[ここにURL]">　・整理中１</a></li>
 <li><a href="[ここにURL]">　・整理中２</a></li>
 <li><a href="[ここにURL]">　・整理中３</a></li>
 </ul>
 </li>
 <li>
 <a href="[ここにURL]"><i class="fa fa-graduation-cap" aria-hidden="true"></i> カテゴリー２<i class="blogicon-chevron-down"></i></a>
 <ul class="second-content"> 
 <li><a href="[ここにURL]">　・整理中１</a></li>
 <li><a href="[ここにURL]">　・整理中２</a></li>
 <li><a href="[ここにURL]">　・整理中３</a></li>
 </ul>
 </li>
 <li>
 <a href="[ここにURL]"><i class="fa fa-bookmark-o" aria-hidden="true"></i> カテゴリー３<i class="blogicon-chevron-down"></i></a>
 <ul class="second-content"> 
 <li><a href="[ここにURL]">　・整理中１</a></li>
 <li><a href="[ここにURL]">　・整理中２</a></li>
 <li><a href="[ここにURL]">　・整理中３</a></li>
 </ul>
 </li></ul>
</div>
</div><div style="clear:both"></div>
<!-- カテゴリリンク階層化HTMLここまで --><!-- カテゴリリンク階層化 JavaScript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var menuBtn = $("#menu-btn"),
 menuContent = $("#menu-content");
menuBtn.click(function(){
 menuContent.slideToggle();
});
$(window).resize(function(){
 var win = $(window).width(),
 p = 960;//19
 if(win > p){
 menuContent.show();
 }else{
 menuContent.hide();
 }
});
});
</script>
<!-- カテゴリリンク階層化 JavaScriptここまで -->

カスタマイズ

表示する文字や、カテゴリーリンクをクリックした際の移動先（URL）を設定します。

表示文字

9行目の「HOME」

12,20,28行目の「カテゴリー１〜３」：

　▷表示したいカテゴリー名に変更しましょう。

14-16行目、22-24行目、30-32行目の「整理中１〜３」：

　▷表示したいサブカテゴリーに変更しましょう。

カテゴリーリンクをクリックした時の遷移先の設定

9行目、12,14-16行目、20,22-24行目、28,30-32行目の『"[ここにURL]"』：

　▷移動先のURLに変更してください。ダブルコーテーションは残してください。

　　こんな感じです↓

　　"https://〜"

注意

ソースを一旦テキストに貼り付けて、またデザインCSSに貼り付けて・・

としていると、『"[ここにURL]"』の""（ダブルコーテーション）部分が大文字（””）になってしまう現象が起きる場合があるので、デザインCSSに貼り付けたときに左側に赤字で❎が表示される場合は、ダブルコーテーションを半角で入力し直してみてください。

■どこのURLを指定したらいいかわからない方へ

管理画面＞カテゴリーから設定したカテゴリーを選ぶと、カテゴリー単位のページに飛べるのでそこのURLを設定すると良いと思います。

アイコンの変更

12,20,28行目の『fa fa-XXXX』の部分をお好きなアイコン名に変更してください。

Search for Font Awesome | 日本語でアイコンフォントを簡単検索が、日本語で検索できて探しているイメージを見つけやすいです。

カテゴリーを増やしたいor減らしたい場合は

以下が１セットです。

コピペして増やしたり、丸っと削除したりして増減させてください。

<li>
 <a href=“[ここにURL]”><i class="fa fa-child" aria-hidden="true"></i> カテゴリー１<i class="blogicon-chevron-down"></i></a>
 <ul class="second-content"> 
 <li><a href=“[ここにURL]”>　・整理中１</a></li>
 <li><a href=“[ここにURL]”>　・整理中２</a></li>
 <li><a href=“[ここにURL]”>　・整理中３</a></li>
 </ul>
 </li>

サブカテゴリーを増やしたいor減らしたい場合は

以下が１セットです。

コピペして増やしたり、丸っと削除したりして増減させてください。

<li><a href=“[ここにURL]”>　・整理中１</a></li>

補足

今回のサンプルでは、1つ目のカテゴリーリンクはHOME（トップページ）を想定しているので、ソースも第一階層のみとしています。

デザインCSSの編集

色やサイズ、カーソルを当てた際の挙動を指定します。

管理画面＞デザイン＞カスタマイズ（スパナマーク）＞デザインCSSに以下のコードを貼り付けます。

デザインCSSの場所

f:id:mminammi:20210611124204p:plain — デザインCSS

CSSに貼り付けるコード

以下のコードをデザインCSSに貼り付けてください。

  /* グローバルメニュー階層化　*/
:root{
/* 変数の設定 */
 /*メインカテゴリー*/
 --main-backcolor:#e6e6fa;/*1:背景色*/
 --main-textcolor:#778899;/*2:文字色*/
 --main-height:40px;/*3:高さ*/
 --main-hover-backcolor:#b0c4de;/*4:カーソルが当たった時の背景色*/
 --main-hover-textcolor:#e6e6fa;/*5:カーソルが当たった時の文字色*/
}
/*カテゴリーの左右*/
#menu{
 width: 100%;
 margin: 0 auto;
 background: var(--main-backcolor);
 text-align: center;
}
/*カテゴリーが表示されている部分*/
#menu-inner{
 width: 350px;
 height: var(--main-height);
 margin: 0 auto;
 background: var(--main-backcolor);
 text-align: center;
}
#menu-btn{display: none;}
#menu-content{
 padding-left: 0;
 margin: 0;
 width: 1000%;
 height: 100%;
 list-style-type: none;
}
#menu-content > li{
 position: relative;
 float: left;
 height: 100%;
 text-align: center;
}
#menu-content > li > a{
 position: relative;
 display: block;
 height: 100%;
 padding-left: 15x;
 padding-right: 15px;
 line-height: var(--main-height);
 background: var(--main-backcolor);
 color: var(--main-textcolor);
 font-size: 70%;
 text-decoration: none;
 z-index: 2;
}
#menu-content > li > a:hover{
 background: var(--main-hover-backcolor);
 color: var(--main-hover-textcolor);
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*サブカテゴリー*/
#menu-content > li > ul.second-content{
 visibility: hidden;
 position: absolute;
 top: 0;
 margin: 0;
 padding-left: 0;
 list-style-type: none;
 z-index: -1;
}
#menu-content > li:hover > ul.second-content{
 visibility: visible;
 top: 38px;
 z-index: 1;
 transition: all .3s;
}
#menu-content > li > ul.second-content > li{
 text-align: center;
 width: 130px;/*サブカテゴリーの横幅*/
 height: 38px;
}
#menu-content > li > ul.second-content > li > a{
 display: block;
 line-height: 38px;
 background: #e6e6fa;/*6:サブカテゴリーの背景色*/
 color: #778899;/*7:サブカテゴリーの文字色*/
 text-align: left;
 font-size: 60%; /*文字の倍率*/
 text-decoration: none;
}
/*サブカテゴリーにカーソルを当てた時の表示*/
#menu-content > li > ul.second-content > li > a:hover{
 background: #f0f8ff;/*8:背景色*/
 color: #778899;/*9:文字色*/
 }
/* ↑グローバルメニュー階層化　ここまで　*/