【はてなブログ】ハンバーガーメニュー(三)をつける方法

はてなブログって、結構しっかりとhtmlやcssを書かないとメニュー1つ付けられないんですよね。

今回は、webエンジニアのharuが、はてなブログでハンバーガーメニュー(三)を設置した方法を紹介します。

このようなメニューを作っていきます

ハンバーガーメニュー

「デザイン>ヘッダ>タイトル下」にhtmlを入力する

PC版のはてなブログの管理画面を開きます。

help.hatenablog.com

PC版の管理画面を開いたら、デザインをクリック。

デザインを開いたら、ヘッダを開き、タイトル下(画像部分)にhtmlを入力します

この部分にhtml書きます。

試しに以下のhtmlを入れてみましょう。

<div class="hamburger-menu">
    <input type="checkbox" id="menu-btn-check">
    <label for="menu-btn-check" class="menu-btn"><span></span></label>
    <div class="menu-content">
        <ul>
            <li>
                <a href="/archive/category/レシピ">レシピ</a>
                <ul class="category-child">
                    <li>
                        <a href="/archive/category/紅茶">
                            紅茶
                        </a>
                    </li>
                    <li>
                        <a href="/archive/category/緑茶">
                            緑茶
                        </a>
                    </li>
                    <li>
                        <a href="/archive/category/ハーブティー">
                            ハーブティー
                        </a>
                    </li>
                    <li>
                        <a href="/archive/category/コーヒー">
                            コーヒー
                        </a>
                    </li>
                    <li>
                        <a href="/archive/category/カクテル">
                            カクテル
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/archive/category/お出かけ">お出かけ</a>
            </li>
            <li>
                <a href="/archive/category/暮らし">暮らし</a>
            </li>
            <li>
                <a href="/archive/category/その他">その他</a>
            </li>
        </ul>
    </div>
</div>

「レシピ」「紅茶」「緑茶」などの日本語部分を、自分のカテゴリ名に書き換えるとカテゴリ名からメニューを作れる仕組みです

「デザイン>デザインCSS」にメニュー用のCSSを入力する

デザインCSSにメニュー用のCSSに、追記していきます。

#blog-title{
    height: auto;padding: 20px 0 50px 0;
}

#blog-title a {
    color: #dea08c;
}

h1#title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    font-weight: normal;
    letter-spacing: 0.15em;
}

#blog-title-inner {
    width: 100%;
    background: none;
}



div#blog-title-inner {
    text-align: left;
}



.menu-btn {
    top: 10px;
    right: 10px;
    display: flex;
    position: absolute;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #dea08c;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check {
    display: none;
}

.menu-content {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: all 0.5s;
    z-index: 10;
    pointer-events: none;
}
.menu-content ul {
    margin: 77px 0px 0;
    padding-left: 0;
}
.menu-content ul li {
    border-bottom: solid 1px #dea08c;
    list-style: none;
    background-color: #fff;
    padding-left: 1.25em;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
    color: #dea08c;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

.menu-content ul li ul.category-child {
    margin-top: 0;
}

.menu-content ul li ul.category-child li {
    border-bottom: dashed 1px #dea08c;
}

.menu-content ul li ul.category-child li:last-child {
    border: none;
}

#menu-btn-check:checked ~ .menu-content {
    opacity: 1;
}

.hamburger-menu {
    position: relative;
    bottom: 76px;
}


#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check:checked ~ .menu-content{
    pointer-events: auto;
}
.entry-header {
    position: initial;
}

ブログタイトルの大きさを調整して、ハンバーガーメニュー(三)が綺麗に表示されるようにしています。

その部分の調整はそれぞれで行ってください。

難しい場合には、コメントを頂ければ相談に乗ります。お気軽にコメントまたはTwitter(@g_masquerade)にてご連絡ください。

はてなブロガーさん向けの関連記事

hakodate-glay.hatenablog.com