ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

はてなブログ【グローバルメニュー】を断層形式(子カテゴリ)に表示させる方法。


スポンサーリンク

こんにちは、ハウリンです😊

「グローバルメニュー」を設置してから、もう少し細かく「カテゴリ」を分けて表示させたくなってきました。

その時の変更方法を、記憶させておく為にも載せたいと思います。

最近忘れやすいので (;'∀')

「断層形式」(子カテゴリー)とも言うみたいですね。

しかも、カテゴリの前に「アイコン」も表示させてくなってきたので、「アイコン」の表示の方法も載せたいと思います(^O^)/

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

f:id:twistinhaurin:20200531165856j:plain
 

 

 

 

1断層のみの「グローバルメニュー」のやり方はこちらをどうぞ。 

www.haurin-zatunenlife.com

 

www.yukihy.com

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

 

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

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

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

 

 

、はてなブログの「デザイン」を開く➡「カスタム(スパナマーク)」「デザインCSS」貼り付けます。

f:id:twistinhaurin:20200623151409p:plain



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

 

「カスタム(スパナマーク)」「ヘッダ」「タイトル下」貼り付けます。

f:id:twistinhaurin:20200623145533p:plain
f:id:twistinhaurin:20200403171239p:plain

 

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

f:id:twistinhaurin:20200629160221p:plain


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

 

横幅を均等にする

CSSを変更します。

#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*3*/
    padding-right: 15px;/*3*/
    line-height: 40px;/*2*/
    background: #444;/*9*/
    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;/*2*/
    background: #444;/*9*/
    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: ◯◯%;
}

〇〇%の所は100÷リンクの個数 を入れて下さい(*^-^*)

5個リンクがあったら100÷5=20で20を入れます。

 

 

 

その他のカスタム

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

・1➡メニュー全体の横幅

・2➡メニュー全体の縦幅(3つあるので全部同じ値に変えます)

・3➡親リンク1つの横の余白(2つあります)

・4➡子リンクの横幅

・5➡子リンクの縦幅(2つあります)

・6➡トグルメニュー時のリンクの縦幅(2つあります)

 

色を変更する

・7➡メニュー全体(外側)の背景色

・8➡メニュー全体(内側)の背景色

・9➡親リンクの背景色

・10➡親リンクの文字色

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

・12➡親リンクホバーの文字色

・13➡子リンクの背景色

・14➡子リンクの文字色

・15➡子リンクホバーの背景色

・16➡子リンクホバーの文字色

・17➡MENUの文字の背景色

・18➡MENUの文字色

#の後の6桁の英数字を替えます。

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

www.colordic.org

 

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

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

f:id:twistinhaurin:20200620172326p:plain

 

 

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

f:id:twistinhaurin:20200629173453p:plain

 

 

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

私の場合「TOP」旅行カルチャー「お役立ち」「つぶやき」に変更してあります。

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

 

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

 

 

 

アイコンを変更する

f:id:twistinhaurin:20200629214300p:plain

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

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

 

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

shirokai.hatenablog.com


HTMLコードの

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

の部分を変更します。

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

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

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

とやれば・・・

f:id:twistinhaurin:20200630160223p:plain

の様になります。

 

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

f:id:twistinhaurin:20200522165623p:plain

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

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

 

f:id:twistinhaurin:20200630171922p:plain

かなり見栄えが良くなりました! 

 

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

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

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