【はてなブログ】HTMLもCSSも理解できないままグローバルメニューができた

f:id:lifeishappy_right:20200923182439p:plain

昨日グローバルメニューの基本の「基」を朝10時~夜12時まで食事・お風呂を除いた14時間かけて作ったお話。なんてしても面白くないと思いますので、
私同様、HTMLもCSSも全く意味が分からない!けど、そこまで拘らないから、ブログのカスタマイズしたい!!という方向けに、何も考えずHTMLやCSSなんて一切調べなくてもグローバルメニューを作れてしまう記事にしています。

結論言うと、99%コピペで完結、残り1%は自分のサイトをそこに追記すれば終了する内容にしています。

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

f:id:lifeishappy_right:20200923183032j:plain

グローバルメニューとは

そもそもグローバルメニューって何?
という方は、恐らくこの記事を読まないかと思いますが一応…
f:id:lifeishappy_right:20200923183152p:plain

 色々なブロガーさんのブログを読まれている方はご存知かと思いますが、
ブログトップページにあるメニューというのでしょうか…この画像のようなものです。
私のブログのトップページにある「HOME」「TRAVEL」「OTHER」「ABOUT ME」「CONTACT」になります。

有料版にしたから私も色々と見栄えを良くしたくなったのですヽ(‘ ∇‘ )ノ
これがあると何だか、本格的にブロガーっぽくないですか?
と思うのは私だけかな…

 という訳で、余談はそこそこに、早速コピペでグローバルメニュー作成にいきましょう!!

 

グローバルメニューに必要なHTML

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 class="first-content">
            <a href="リンク">カテゴリ1</a>
        </li>
        <li class="first-content">
            <a href="1階層目のリンク">カテゴリ2 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ2-1</a>
                    <ul class="third-content">
                      <li><a href="3階層目のリンク">カテゴリ2-1-1</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-1-2</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-1-3</a></li>
                    </ul>
                </li>
                <li><a href="2階層目のリンク">カテゴリ2-2</a>
                    <ul class="third-content">
                      <li><a href="3階層目のリンク">カテゴリ2-2-1</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-2-2</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-2-3</a></li>
                    </ul>
                </li>
                <li><a href="2階層目のリンク">カテゴリ2-3</a>
                    <ul class="third-content">
                      <li><a href="3階層目のリンク">カテゴリ2-3-1</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-3-2</a></li>
                      <li><a href="3階層目のリンク">カテゴリ2-3-3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="1階層目のリンク">カテゴリ3 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-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>
            <a href="1階層目のリンク">カテゴリ4 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-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>
            <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>


HTLMって結局何なの?の方、大丈夫です!私も分かりませんでした(笑)
でも、とりあえずグローバルメニューを作成するに当たってHTMLの意味は分からなくても出来る事は証明できました。

ソースコードをはてなブログに設定

コピペしたソースコードをご自身のブログに設定します。
f:id:lifeishappy_right:20200923184919p:plain

「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」の「タイトル下」に先ほどコピペしたソースコードを貼り付けます。
すると、ブログトップページがこんな感じになりましたよね?
f:id:lifeishappy_right:20200923183724p:plain

これで終わりではないんです。
そう!お気づきかと思いますが、「CSS」というのが必要になるんです。
このブログを読みながらグローバルメニューの作成をしている方は、HTMLを貼り付けたページから移動せずそのままにしておいてください。

では次☞

上記HTLMに必要な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;}
/* 2階層目 */
#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;
}
/* 3階層目 */
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;
}
/* 2階層目 */
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

ソースコードを設定

先ほどのHTLMを貼り付けた「カスタマイズ」画面の一番下に「{}デザインCSS」があります。
そこに、今コピーされたCSSのソースコードを貼り付けて、「変更を保存する」とトップ画面にグローバルメニューの基本の「基」が完成ヾ(▽⌒*)
f:id:lifeishappy_right:20200923184953p:plain

自分のブログにアレンジ

ここまでできたら、ベースのグローバルメニューを自分流に少しカスタマイズします。
残り1%ですが、ちょっと面倒…

カスタマイズする上でこのブログに出てくる専門用語

✔親階層
これは恐らく一般的な専門用語かもしれませんが(結構使用されてるブロガーさんがいました。)、グローバルメニューで一番大きな括りのカテゴリーです。

✔子階層
親階層にカーソルを乗せたときに(=マウスオーバーと言うらしい…)いくつかカテゴリーが出てきますよね。
親階層の次のカテゴリーのことです。

✔孫階層
この下手な説明で親階層、子階層をご理解いただけた方でしたら孫階層もお分かりかと思いますが、子階層にマウスオーバーしたときに出てくる子階層をもっと細かく分けたカテゴリーになります。

文字にしたら、
親階層が「1,2,3,4」だとしたら、
子階層が「1-1,1-2・・・」みたいな感じで、もうお分かりかと思いますが、
孫階層が「1-1-1,1-1-2・・・」みたいな感じです。
解りづらかったらごめんなさい(*_ _)はは

HTMLをカスタマイズ

✔まずは自分の必要なカテゴリーを確認する
旅の情報ブログにしたい私のブログでは、子階層・孫階層が結構多くなる予定で、こんなに必要ないよ!という方がほとんどかと思います。
その場合は、不要な部分を削除するのですが、いやいや、もっとカテゴリーが必要だ!という方は、追加したりと切り貼りしてください。
f:id:lifeishappy_right:20200923174150p:plain

例えば子階層2-2部分は孫階層が不要な場合は赤枠部分の削除、
孫階層を増やしたい場合は青枠部分をコピペしてすぐ下に貼り付け。

多数出てくる『</ul>』や『</li>』の並び順なんですが、
カスタマイズを終えた途端頭から消えてしまったので詳しいことは分かりませんが、かなりしっかり順序だっている物のようなので、他の段落部分の順序を参考にしながら慎重に削除したり追加したりしてみてください。

✔自分のブログのリンクを埋め込む
f:id:lifeishappy_right:20200923170957p:plain

上記画像のように、コード中に日本語で記載された部分があります。
黄色枠部分➜リンクしたいページのURL
緑枠部分➜グローバルメニューのカテゴリー部分に反映されますので、「HOME」「BLOG」など自分流にアレンジ
青枠部分➜グローバルメニューの「カテゴリー」横の下三角?のアイコンなので、必要ない方は削除するとアイコンが消えます。

全て日本語部分のこの書換え作業を行います。
終了したら、「変更を保存する」をクリックして自分のブログを改めて確認すると、なんだか本格的なブロガーって気がしませんか?(笑)

ここで満足した方は、これで終了しても全然問題ないのですが、グローバルメニューの色を変更したいと思った方、
なんだかグローバルメニューの左右が綺麗にはまってないな…という方は、CSSのカスタマイズをしましょう。

CSSのカスタマイズ

✔グローバルメニューのサイズがしっくりこない・・・

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


「#menu-content > li{」部分の「width: 20%;」ですが、私のグローバルメニューを見ていただくと親カテゴリーが5つになっています。
親カテゴリーを4つにしたい場合、25%に変更します。「100÷カテゴリー数」の数字にしてください。

✔グローバルメニューの色変更
f:id:lifeishappy_right:20200923180112p:plain

赤枠部分の色コードを変更すれば、グローバルメニューの色が自分の好きな色に変更できます。
このコードはWEB色見本というサイトを参考に変更ができますので、こちらをお使いください。

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

blog.minimal-green.com
【Minimal Green】様のブログを参考にしています。
このブログに行きついたとき、そして問題が解決した瞬間Minimal Green様に感謝を伝えようかどうしようか迷うほど助けて頂きました( ´艸`)
ありがとうございました。

最後に・・・

いかがでしたでしょうか・・・
すんなりできましたか?

まさかグローバルメニュー作成がこんなにも時間を要するとは思わず、かなり苦戦しました(笑)
ブログのカスタマイズって、こんなIT音痴でも多くの方がHow to記事を出してくださっているので、そんなに時間をかけずに解決できたりしませんか?

それがグローバルメニューはどの方のブログを読んでも解決しない(ρ_;)

そりゃHTMLもCSSも理解できてないんだもん。当然でしょ!って言われたらそれまでなんですが、あるブログではAが解決できてもBが解決できない。Bが解決できるブログを見付けたたかと思ったら、今度はCの問題が出てくる。
Cを解決しようと思うと、当初のAがまた問題となる。みたいな感じでした。
 
最終的に私が描いていたグローバルメニューのHTMLとCSSに行き着いたときの感激と感謝の気持ちは計り知れないものがありました(笑)

専門用語が何一つ分からなくても、それでもブログの見栄えをよくしたいですよね?

そんな方のお役にほんの少しでも立てたら嬉しいです♡

www.beautyaroma217.com