グローバルメニュー：テーマ「Tango」で使えるHTML＆CSS【はてなブログ】

この記事はリライト記事となります。

デザインテーマを変更しようと思っているのですが、テーマ「Tango」で一生懸命グローバルメニュー（グローバル・ナビゲーション）を苦労して作成したときのことを思い出し、今後Tangoを使用される方でグローバルメニューを作成したい方がいれば…と思い、綺麗にリライトして残しておこうと思いました。

テーマ「Tango」：Tango - テーマ ストア

HTML？CSS？何それ？

昨日、グローバルメニューの基本の「基」を朝10時から夜12時まで、食事・お風呂を除いた14時間をかけて作ったお話…なんてしても面白くないと思います。

私的には苦労話をしたいのですが(笑)

私同様「HTMLもCSSも全く意味が分からない！けど、そこまで拘らないからブログにグローバルメニューを導入したい」という方向けに、HTMLやCSSなんて一切調べなくてもグローバルメニューを作れてしまう記事にしています。

99％コピペ、残り１％は自分のサイトをそこに追記すれば完成となります。

ただ、それだけだと流石に、このブログと全く同じグローバルメニューを使用したいという方もいないかと思いますので、多少自己流にカスタマイズできる方法も記載しておきますので、参考にしていただければと思います。

 

グローバルメニュー：テーマ「Tango」で使えるHTML＆CSS【はてなブログ】

 

 

グローバルメニュー

グローバルメニューとは、Webサイトの原則全てのページに共通で表示された当該サイトの主要ページへのリンクのことです。

また、「グローバルナビ」や「グローバルナビゲーション」ともいわれます。

一般的にはサイトのページ上部、サイドバーなどに、メニューボタンやタブ、テキストで表示されています。

スマホ画面では、「ハンバーガーメニュー」と呼ばれる３本線のアイコンからプルダウンメニューで表示されるサイトが多いようです。

私のブログTOPページにある「HOME」「TRAVEL」「CUSTOMIZE」「BLOG」「CONTACT」になります。

有料版にしたから、ブログの見映えをもっと良くしたくなったのです。

テーマ「Tango」のグローバルメニュー：HTML

実は私、最近までCSSやHTMLがテーマ毎に違うということを知らなかったんです。

だから、このブログで初めてグローバルメニューを作る際に、様々な方の記事を参考にしてコピペしては上手くいかない…を繰り返したのです。

選択したCSSとHTMLが「Tangoでは適用できない」という事には意識が行かず…

この記事のCSSとHTML間違ってるっぽいんだけど…

まさかの人のせい(笑)

「テーマによってはデザインが崩れます。」という記述も意味が分かってないから完全スルーでした。

だから、14時間も時間がかかってしまったというわけです。

グローバルメニューは、ノーマルな階層なしのグローバルメニューと、階層を作るグローバルメニューがあります。

自分のサイトに合ったお好みのグローバルメニューを作成しましょう。

HTML：階層なし

階層なしのタイプは、大きな括りのカテゴリーのみのグローバルメニューのことです。

「Tango」で使用できる階層なしのグローバルメニューの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 class="first-content">
            <a href="親階層リンク">カテゴリ1</a>
        </li>
        <li class="first-content">
            <a href="親階層リンク">カテゴリ2</a>
        </li>
        <li class="first-content">
            <a href="親階層リンク">カテゴリ3</a>
        </li>
        <li class="first-content">
            <a href="親階層リンク">カテゴリ4</a>
        </li>
        <li class="first-content">
            <a href="親階層リンク">カテゴリ5</a>
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="https://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;
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

HTMLをはてなブログに設置

 

コピーしたHTMLをはてなブログに設定します。

＜　ダッシュボード　→　デザイン　→　カスタマイズ　→　ヘッダ　＞

「ヘッダ」にある「タイトル下」にコピーしたHTMLを貼り付けます。

貼付けすると、HTMLを反映した質素なブログのトップページが右側に表示されます。

HTML：多階層

多階層はカテゴリー毎にサブカテゴリーがあるタイプのグローバルメニューです。

「Tango」で使用できる多階層のグローバルメニューは、下記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 class="first-content">
            <a href="リンク">カテゴリ1</a>
        </li>
        <li class="first-content">
            <a href="親階層のリンク">カテゴリ2 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="子階層のリンク">カテゴリ2-1</a>
                    <ul class="third-content">
                      <li><a href="孫階層のリンク">カテゴリ2-1-1</a></li>
                      <li><a href="孫階層のリンク">カテゴリ2-1-2</a></li>
                      <li><a href="孫階層のリンク">カテゴリ2-1-3</a></li>
                    </ul>
                </li>
                <li><a href="子階層のリンク">カテゴリ2-2</a>
                    <ul class="third-content">
                      <li><a href="孫階層のリンク">カテゴリ2-2-1</a></li>
                      <li><a href="孫階層のリンク">カテゴリ2-2-2</a></li>
                      <li><a href="孫階層のリンク">カテゴリ2-2-3</a></li>
                    </ul>
                </li>
                <li><a href="子階層のリンク">カテゴリ2-3</a>
                    <ul class="third-content">
                      <li><a href="孫階層のリンク">カテゴリ2-3-1</a></li>
                      <li><a href="孫階層のリンク">カテゴリ2-3-2</a></li>
                      <li><a href="孫階層のリンク">カテゴリ2-3-3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="親階層のリンク">カテゴリ3 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="子階層のリンク">カテゴリ1-1</a></li>
                <li><a href="子階層のリンク">カテゴリ1-2</a></li>
                <li><a href="子階層のリンク">カテゴリ1-3</a></li>
            </ul>
        <li>
            <a href="親階層のリンク">カテゴリ4 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="子階層のリンク">カテゴリ1-1</a></li>
                <li><a href="子階層のリンク">カテゴリ1-2</a></li>
                <li><a href="子階層のリンク">カテゴリ1-3</a></li>
            </ul>
        <li>
            <a href="親階層のリンク">カテゴリ5</a>
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="https://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;
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

HTMLをはてなブログに設置

 

コピーしたHTMLをはてなブログに設定します。

＜　ダッシュボード　→　デザイン　→　カスタマイズ　→　ヘッダ　＞

「ヘッダ」にある「タイトル下」にコピーしたHTMLを貼り付けます。

貼付けすると、HTMLを反映した質素なブログのトップページが右側に表示されます。

HTMLって結局何なの？

私も分かりませんでした。

とりあえずHTMLもCSSも完全に理解できなくても、グローバルメニューの作成は成功しました。

もちろん、色々なブロガーさんの助けを借りてですが(笑)

次は「CSS」の設定をしてオシャレに変身させます。

注意

このブログを読みながら設定をしている方は、カスタマイズ画面から移動せずそのまま次の作業をしましょう。

テーマ「Tango」グローバルメニュー：CSS

下記CSSコードをコピペします。

グローバルメニューCSS：コードを表示する

/* グローバルメニューCSS */
#menu{
    width: 100%;
    margin: 0 auto;40%
    background: #696969;
}
#menu-inner{
    width: 100%;
    height: 40px;
    margin: 0 auto;40%
    background: #696969;
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width: 20%;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;
    background: #696969;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #d3d3d3;
    color: #000000;
    opacity: 0.8;
}
#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: -100;
}
#menu-content > li:hover > ul.second-content{
    width: 100%;
    visibility: visible;
    top: 40px;
    z-index: 100;
    transition: all .3s;

}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 100%;
    height: 40px;
    position: relative;
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;
    background: #c0c0c0;
    color: #000000;
    font-size: 80%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #a9a9a9;
    color: #000000;
}
/* 孫階層 */
li {
  list-style-type: none;
}

ul.third-content {
    position: absolute;
    visibility: hidden;
}

#menu-content > li.first-content > ul.second-content > li > ul.third-content {
    visibility: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -200;
}
#menu-content > li > ul.second-content > li:hover > ul.third-content {
    visibility: visible;
    top: 0;
    left: 100%;
    z-index: 200;
    transition: all .3s;
    background: #808080;
    color: #fff;
}
#menu-content > li > ul.second-content > li > ul.third-content > li{
    text-align: center;
    width: 100%;
    height: 40px;
    position: relative;
    background: #808080;
    color: #fff;
}
#menu-content > li > ul.second-content > li > ul.third-content > li > a{
    display: block;
    line-height: 40px;
    background: #a9a9a9;
    color: #000000;
    font-size: 80%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > ul.third-content > li > a:hover{
    background: #808080;
    color: #fff;
}
/******* トグルメニュー *********/
@media screen and (max-width:960px){
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #F5A2A2;
    color: #fff;
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;
    padding: 0;
    text-decoration: none;
}
/* 子階層 */
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

CSSをはてなブログに設置

 

コピーしたCSSをはてなブログに設定します。

＜　ダッシュボード　→　デザイン　→　カスタマイズ　→　{}デザインCSS　＞

「{}デザインCSS」にCSSコードを貼り付けたら、右側のプレビューでメニューが表示されていたら、グローバルメニューの基本の「基」が完成です。

「変更を保存する」をクリックして、ブログのトップページを確認してみてください。

グローバルメニュー：HTMLアレンジ

このまま放置してしまうと、何の意味もなさないメニューになるので、カスタマイズしていきます。

なお、ここからはご自身のブログに必要なことだけを取り入れていただければと思います。

ここから先は、やることは簡単なんだけど、ちょっと面倒…

カスタマイズ上で使用する専門用語

親階層	片道：グローバルメニューで一番大きな括りのカテゴリー （カテゴリー２・３部分）
子階層	親階層にマウスオーバーした際に出てくる次のカテゴリー （カテゴリー2-1・2-2部分）
孫階層	子階層にマウスオーバーした際に出てくる次のカテゴリー （カテゴリー2-1-1部分）

グローバルメニュー：設定

まずはご自身のブログで必要なカテゴリーをメモなりに書き出して、階層を増減をカスタマイズします。

私のブログでは「親階層」のカテゴリーが５つですが、このカテゴリー数の増減はHTMLを追加もしくは削除で可能です。

また、旅の情報ブログにしたい私のブログでは、「子階層」「孫階層」が多くなる予定で、こんなに必要ない…という方がほとんどかと思います。

階層の数を減らすには、不要なHTMLを削除します。

逆に階層を増やしたい場合は、HTMLを追加すればいくらでも増やすことが可能です。

例１：カテゴリー数の増減（階層なし・多階層共通）

 

親階層のカテゴリーを増やしたい場合は、赤枠部分をコピーして、すぐ下にコピーしたコードを貼り付けるとカテゴリーを増やすことができます。

逆に減らしたい場合は、赤枠部分を削除すればカテゴリーを減らすことができます。

注意

カテゴリーの数を変更する場合は、CSSの変更も必要となりますので、次項目「グローバルメニュー：CSSアレンジ」の「メニューの幅変更」の作業が必要です。

 

例２：カテゴリ２の孫階層が不要な場合（多階層）

 

「カテゴリ2-1」にマウスオーバーした際に出てくる「孫階層」部分を削除したい場合は、下記赤枠部分のHTMLを削除します。

例３：カテゴリ２の孫階層を増やしたい場合（多階層）

 

「カテゴリ2-1」にマウスオーバーした際に出てくる「孫階層」部分を増やしたい場合は、下記青マーカー部分のようにHTMLを追加します。（カテゴリ2-1-4）

「子階層」「孫階層」の増減については、この要領で全て対応可能です。

なお、多数出てくる「</ul>」や「</li>」などは、かなりしっかり順序だっているもののようなので、他の段落部分の順序を参考にしながら慎重に削除したり追加したりしましょう。

グローバルメニュー：リンク挿入

上記画像のように、HTMLコードの中に日本語で記載された部分にブログのリンクを埋め込んでいきます。

黄色枠	リンクしたいページのURL
緑枠	グローバルメニューに表示される文字「HOME」など自己流にアレンジ
青枠	グローバルメニューのアイコン ※アイコン不要の場合は青枠部分を削除すると消えます。

日本語で記載されいている部分を全て書換えしたら、右横のプレビュー画面で確認ができます。

プレビューを見て問題がなければ「変更を保存する」をクリックして終了となります。

グローバルメニュー：CSSアレンジ

設定までの工程が完了したら、とりあえずグローバルメニューは作成できているのですが、少し自己流にアレンジする方法をいくつか紹介します。

このアレンジは全て「{}デザインCSS」に貼り付けたCSSを書換えします。

メニューの色変更

グローバルメニューや文字を変更したい場合は、「＃」で始まる数字とアルファベットで構成された7桁のコードがカラーコードになっているので、このコードを変更します。

カラーコードは下記サイトで確認できます。

カラーコード：WEB色見本 原色大辞典 - HTMLカラーコード

メニューの幅変更

私が使用しているCSSは、「/* 多階層グローバルメニュー */」の「#menu-content > li{」で始まるコードの「width:」部分が「20％」ですが、これはグローバルメニューの親階層が５つの場合で設定しています。

親階層を４つにしたい場合は「25％」、６つにしたい場合は「16.6％」に変更が必要です。

「100÷カテゴリー数」の数字にします。

参考にさせていただいたブログ

blog.minimal-green.com

このHTMLとCSSは、Minimal Green様の記事を参考にさせていただきました。

本当にありがとうございました。

最後に…

いかがでしたでしょうか。

すんなりできたでしょうか？

まさかグローバルメニュー作成が、こんなにも時間を要するとは思わず、思いのほか苦戦しました。

ブログのカスタマイズって、私みたいなWeb音痴でも、多くの方がHow to記事を書いてくださっているので、そんなに時間をかけずに解決できたりしませんか？

それが、グローバルメニューはどの方のブログを参考にしても解決しなかったのです。

そりゃHTMLもCSSも理解できてないんだもん、当然でしょ！って言われたらそれまでなんですが。

あるブログでは「問題A」が解決できても「問題B」が解決できない。

「問題B」が解決できるブログを見つけたかと思ったら、今度は「問題C」が出現する。

「問題C」を解決使用と思ったら、当初の「問題A」がまた問題となる。

これを14時間繰り返していました。

最終的に、私が描いていたグローバルメニューのHTMLとCSSに行き着いたときの感動と感謝の気持ちは言葉では表現できないほどのものでした。

専門用語、分からなくてもブログのデザインはカスタマイズしてみたくなりますよね(笑)

もしテーマ「Tango」使用でカスタマイズしたいと思う方がいて、この記事がお役に立てたら嬉しいです♡