はてなブログ【グローバルメニュー】を断層形式（子カテゴリ）に表示させる方法を詳しく紹介！

ブログをやり始めて

グローバルメニューを設置したら、

もう少し細かくカテゴリを分けて表示させたくなってきたりします。

断層形式（子カテゴリー）とも言います。

早速、断層形式にする方法をご紹介します。

断層形式にすると同時に、

カテゴリの前にアイコンも表示させたくなります。

アイコンの表示の方法も載せたいと思います！

これだけでグッと見栄えが良くなります！

1断層のみのグローバルメニューの設置方法はこちらをどうぞ。 

www.haurin-zatunenlife.com

www.yukihy.com

Yukihyさんがとても詳しく載せて下さっているので、コードを使わせて頂きました。m(__)m

グローバルメニューを断層形式にする

１、Yukihyさんの「CSSコード」をコピーさせてもらいます。

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

２、はてなブログの「デザイン」➡「カスタム（スパナマーク）」➡「デザインCSS」に貼り付けます。

３、次に「HTMLコード」をコピーさせてもらいます。

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

４、「カスタム（スパナマーク）」➡「ヘッダ」➡「タイトル下」に貼り付けます。

そうすると、こんな感じになります。

カテゴリが右に寄っているかもしれないので、カテゴリ名を均等にしたり、カテゴリ名やアイコンなど変更したいと思います。

横幅を均等にする

CSSを変更します。

#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*３*/
    padding-right: 15px;/*３*/
    line-height: 40px;/*２*/
    background: #444;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}

 ⇧上のこの部分を下のこのコード⇩に変えます。

#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;/*3*/
    line-height: 40px;/*２*/
    background: #444;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}

更に変更します。

#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}

 ⇧上のコードを⇩下のコードに変更します。

#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width: ◯◯%;
}

〇〇%の所は１００÷リンクの個数 を入れて下さい。

５個リンクがあったら１００÷５＝２０で２０を入れます。

その他のカスタム

コードに/*１*/の様に数字がふってあるのですが、その数字ところの〇〇％や〇〇pxを変更していきます。 

１➡メニュー全体の横幅

２➡メニュー全体の縦幅（３つあるので全部同じ値に変えます）

３➡親リンク１つの横の余白（２つあります）

４➡子リンクの横幅

５➡子リンクの縦幅（２つあります）

６➡トグルメニュー時のリンクの縦幅（２つあります）

色を変更する

７➡メニュー全体（外側）の背景色

８➡メニュー全体（内側）の背景色

９➡親リンクの背景色

１０➡親リンクの文字色

１１➡親リンクホバーの背景色

１２➡親リンクホバーの文字色

１３➡子リンクの背景色

１４➡子リンクの文字色

１５➡子リンクホバーの背景色

１６➡子リンクホバーの文字色

１７➡MENUの文字の背景色

１８➡MENUの文字色

＃の後の６桁の英数字を替えます。

⇩こちらに色見本載ってます。

www.colordic.org

カテゴリのURLとカテゴリ名を入れる

１、「カテゴリー」を開いて「カテゴリー一覧」から選ぶか、「サイドバー」から選んでURLをコピーする。

２、「カテゴリ１」とかの前に「 ’１階層目のリンク’」とかあるので「'    ' 」の間を消してリンクさせたいカテゴリーのＵＲＬを入れます。

３、次に、貼り付けたままだと「カテゴリ１」、「カテゴリ２」、「カテゴリ３」、「カテゴリ４」と書いてある状態なので自分のカテゴリメニューに替えます。

「ＴＯＰ」は「ホーム」などに変更しても良いかと思います。

２階層目やいらないものは消して、カテゴリが足りなかったら増やして下さい。

アイコンを変更する

アイコンがあるとないとでは見栄えがかなり違います。

自分のカテゴリに合ったアイコンを探して下さい。

⇩はてなブログで使えるアイコンを詳しく載せてくれています。 

shirokai.hatenablog.com

HTMLコードの

<i class="blogicon-chevron-down"></i>

⇧の部分を変更します。

<i class="使用したいアイコンのクラス名" ></i>

という事になるので、カテゴリ名をアイコンの後につけたかったら

<i class="blogicon-home"></i> 家のマーク

とやれば・・・

の様になります。

変更を保存するを忘れずに

最後に「変更を保存する」を必ずクリックして下さい。

これをしないと今までの苦労が水の泡・・・

かなり見栄えが良くなります(*^^*)

他にもいろんなカスタムが出来るみたいなので、いろいろ変更してみて下さい！

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。