ぴよこママの資産うんぬん

家計管理・資産運用、ポイ活、面白かった本など、よかったものをわかりやすく発信していきたいと思います。

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

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

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

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

 

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

 

 

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

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

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

 

カテゴリーリンクのデザイン(完成図)

 

こんなものができます。

 

f:id:mminammi:20210611115018p:plain

カテゴリーリンク

 

余談:

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

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

 

 

 

 

ざっくりやること

以下の通りです。

 

 手順 

 

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

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

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

2:デザインCSSCSSのコードを貼り付け

 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> カテゴリー1<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="[ここにURL]"> ・整理中1</a></li>
<li><a href="[ここにURL]"> ・整理中2</a></li>
<li><a href="[ここにURL]"> ・整理中3</a></li>
</ul>
</li>
<li>
<a href="[ここにURL]"><i class="fa fa-graduation-cap" aria-hidden="true"></i> カテゴリー2<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="[ここにURL]"> ・整理中1</a></li>
<li><a href="[ここにURL]"> ・整理中2</a></li>
<li><a href="[ここにURL]"> ・整理中3</a></li>
</ul>
</li>
<li>
<a href="[ここにURL]"><i class="fa fa-bookmark-o" aria-hidden="true"></i> カテゴリー3<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="[ここにURL]"> ・整理中1</a></li>
<li><a href="[ここにURL]"> ・整理中2</a></li>
<li><a href="[ここにURL]"> ・整理中3</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行目の「カテゴリー1〜3」:

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

14-16行目、22-24行目、30-32行目の「整理中1〜3」:

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

 

  

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

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減らしたい場合は

 

以下が1セットです。

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

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

 

 

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

以下が1セットです。

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

<li><a href=“[ここにURL]”> ・整理中1</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:文字色*/
}
/* ↑グローバルメニュー階層化 ここまで */

 

 

ブログに合わせてカスタマイズ(任意)

背景色や文字色はブログのテーマカラーに合わせて適宜変更してください。

 

ソースにコメントをつけている1,2,4,5,7,8,10,11の箇所をお好きな色に変更すれば背景色、文字色の変更が可能です。

 

色の指定は、#で始まるカラーコードで指定が必要です。

色を探す場合はWEB色見本 原色大辞典 - HTMLカラーコード がおすすめです。

 

 

どこがどうなっているか(読み飛ばしてもOK)

コメントに付けている番号と、連動しているカテゴリーリンクは以下の通りです。

修正の際参考にしてください。

f:id:mminammi:20210611221051p:plain

コメントのどことリンクしているか。その2

 

f:id:mminammi:20210611221005p:plain

コメントのどことリンクしているか。その1

 

 

 

最後に 

以上、カテゴリーリンクの表示方法でした。

リンクを表示するだけでぐっとブログがおしゃれになると思います!

 

<参考にさせていただいたサイト>(ありがとうございます!)

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

はてなブログの「Minimalism」で、タイトル下のナビゲーションメニューを階層化して、プルダウン表示させるカスタマイズ方法 - いちcafe日記

 

 

もしよければぽちっとしてもらえると嬉しいです!

ブログランキング・にほんブログ村へにほんブログ村