【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する（JavaScript・HTML・CSS対応）

スマホ版のグローバルナビゲーションに検索機能を追加してみました。

以前「スマホ版のグローバルナビゲーションを設置する」対応をしています（以下リンク）。
今回はそれに検索機能を追加しました。

miya-moto-memo.hatenablog.com

元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。
今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。

それではサクッと本題へ。

変更内容
- 画像
- 具体的な使い方（gif）
適用したコード
デザインの適用手順
注意事項
おわりに
関連記事

変更内容

画像

まずは手っ取り早く、画像を載せます。

グローバルナビゲーションに「検索」を追加配置しました（左の画像）。
「検索」をタップすると、キーワードを入力する領域が表示されます（右の画像）。

具体的な使い方（gif）

具体的な使い方をgifにしてみました。
以下のような感じです。

「検索」をタップすると、キーワードを入力する領域が表示されます。
もう一度「検索」をタップすると、閉じます。
「×」マークで閉じることもできます。

キーワードを入力して検索アイコンをタップすると、検索が実行されます。
※gifでは「notion」で検索しています。

適用したコード

前回の記事との変更差分を載せるのはちょっと難しいため、グローバルナビゲーション全体のコードを載せます。

<!-- スマホ用グローバルナビのHTML -->
<style>
.sp-global-menu {
    position: fixed;
    width: 100%;
    bottom: 0px;
    z-index: 100;
    background-color: #fff;
    border-top: solid 1px #111;
    font-size: 0.8rem;
}
.sp-global-menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.sp-global-menu li {
    justify-content: center;
    align-items: center;
    width: 25%;
    padding: 0;
    margin: 0;
}
.sp-global-menu li a {
    color: #111;
    text-align: center;
    display: block;
    width: 100%;
    padding: 5px 0px;
    text-decoration: none;
}
/*カテゴリメニュー*/
.category-content {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    bottom: 52px;
    background-color: #fff;
    width: 100%;
    border-top: solid 1px #111;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 100;
    transition: 0.3s;
}
.category-content.active {
    visibility: visible;
    opacity: 1;
}
.category-list {
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding-left: 0;
}
.category-list li {
    border-top: solid 1px #eee;
}
.category-list a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #111;
    text-decoration: none;
}
/*閉じるボタン*/
#close i {
    vertical-align: middle;
}
/*検索*/
.search-content {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    bottom: 52px;
    background-color: #fff;
    width: 100%;
    border-top: solid 1px #111;
    font-size: 0.8rem;
    z-index: 100;
    transition: 0.3s;
}
.search-content.active {
    visibility: visible;
    opacity: 1;
}
.search-content a {
    color: #111;
}
.search-content > .hatena-module-search-box {
    padding: 0px 10px 10px 10px;
}
#search-close {
    text-align: center;
    padding: 10px;
}
/*PCサイズでは非表示にする*/
@media (min-width: 768px) {
    .sp-global-menu {
        display: none;
    }
    .category-content {
        display: none;
    }
    .search-content {
        display: none;
    }
}
/*スマホサイズでは非表示にする*/
@media (max-width: 767px) {
    .si-global-nav-wrap {
        display: none;
    }
    #page-top, #home-link {
        display: none;
    }
}
</style>

<div class="sp-global-menu">
    <ul>
        <li>
            <a href="https://miya-moto-blog.hatenablog.com/">
                <div><i class="fa fa-home fa-lg"></i></div>
                ホーム
            </a>
        </li>
        <li>
            <a href="javascript:void(0);" id="category-menu">
                <div><i class="fa fa-bars fa-lg"></i></div>
                メニュー
            </a>
        </li>
        <li>
            <a href="javascript:void(0);" id="search">
                <div><i class="fa fa-search fa-lg"></i></div>
                検索
            </a>
        </li>
        <li>
            <a href="#">
                <div><i class="fa fa-chevron-up fa-lg"></i></div>
                トップ
            </a>
        </li>
    </ul>
</div>
<div class="category-content">
    <ul class="category-list">
        <li id="close">
            <a href="javascript:void(0);">
                <i class="fa fa-close fa-lg"></i>
            </a>
        </li>
        <li><a href="https://miya-moto-blog.hatenablog.com/archive/category/%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B"><i class="fa fa-user-o"></i>&nbsp;自己紹介</a></li>
        <li><a href="https://miya-moto-blog.hatenablog.com/archive/category/%E3%83%A9%E3%82%B8%E3%82%AA"><i class="fa fa-podcast"></i>&nbsp;ラジオ</a></li>
        <li><a href="https://miya-moto-blog.hatenablog.com/archive/category/%E8%AA%AD%E6%9B%B8"><i class="fa fa-book"></i>&nbsp;読書</a></li>
        <li><a href="https://miya-moto-blog.hatenablog.com/archive/category/%E8%B3%87%E6%A0%BC"><i class="fa fa-pencil"></i>&nbsp;資格</a></li>
        <li><a href="https://miya-moto-blog.hatenablog.com/archive/category/Notion"><i class="fa fa-database"></i>&nbsp;Notion</a></li>
        <li><a href="https://miya-moto-blog.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA"><i class="fa fa-code"></i>&nbsp;ブログカスタマイズ</a></li>
    </ul>
</div>
<div class="search-content">
    <a href="javascript:void(0);">
        <div id="search-close">
            <i class="fa fa-close fa-lg"></i>
        </div>
    </a>
    <div class="hatena-module hatena-module-search-box">
        <div class="hatena-module-body">
            <form class="search-form" role="search" action="https://miya-moto-blog.hatenablog.com/search" method="get">
                <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
                <input type="submit" value="検索" class="search-module-button">
            </form>
        </div>
    </div>
</div>

<script>
    /*
     * カテゴリメニュー
     */
    // カテゴリメニューのクリックイベント
    document.querySelector("#category-menu").addEventListener('click', () => {
        // カテゴリリストの開閉
        document.querySelector(".category-content").classList.toggle('active');
        // 検索エリアは閉じる
        document.querySelector(".search-content").classList.remove('active');
    });
    // 閉じるボタンクリックイベント
    document.querySelector("#close").addEventListener('click', () => {
        document.querySelector(".category-content").classList.remove('active');
    });

    /*
     * 検索
     */
    // 検索のクリックイベント
    document.querySelector("#search").addEventListener('click', () => {
        // 検索エリアの開閉
        document.querySelector(".search-content").classList.toggle('active');
        // カテゴリリストは閉じる
        document.querySelector(".category-content").classList.remove('active');
    });
    // 閉じるボタンクリックイベント
    document.querySelector("#search-close").addEventListener('click', () => {
        document.querySelector(".search-content").classList.remove('active');
    });
</script>

<!-- スマホ用グローバルナビのHTMLここまで -->

上記のCSS・HTML・JavaScriptを適用すると、フッターにメニュー（検索機能付き）が追加されます。

※もしコードをコピーする場合、「http://～」の部分は適宜自分のサイトに差し替えてください。

ちなみに検索の入力エリアは、はてなブログで提供されている検索機能をコピペしたものです。
元はサイドバーに配置できる検索パーツです。

コピペした部分のコードは以下です。

<div class="hatena-module hatena-module-search-box">
    <div class="hatena-module-body">
        <form class="search-form" role="search" action="https://miya-moto-blog.hatenablog.com/search" method="get">
            <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
            <input type="submit" value="検索" class="search-module-button">
        </form>
    </div>
</div>