【はてなブログ】なぜかグローバルメニューに検索欄を実装できてしまった話

はじめに

ちゃんとしたサイトだとグローバルメニュー（グローバルナビゲーション）に検索欄がついていたりするじゃないですか。
うちのブログでいうとこういうの。

羨ましいなーかっこいいなーと思いながらがちゃがちゃいじっていたら、なぜかできてしまいました（？？？）

注意

筆者にHTMLやCSSの心得は全くありません。有識者ではないです。
本当にという言い方が正しい内容になります。

きちんとした有識者からしたら、なにやってんのこいつとなること請け合いなのですが、
グローバルメニューに検索欄をつける方法はさくっとGoogleで調べたところ見当たらなかったので、誰かしらの役には立つのかもしれないと思い執筆しています。

有識者の方も、根気だけの無知識野郎ががんばるとこうなるんだーと逆に面白いかもしれません。

前提：グローバルメニューを設置する

まず検索欄を設置するグローバルメニューがないとどうしようもないですね。

この記事にたどり着いている時点で恐らく導入はされていると思うので、軽く参考記事を出す程度に。

表示する

グローバルメニューのHTMLなんですが、↓の記事にHTMLコード作成ツールがあります。
あとは適当にGoogleで検索してCSSのカスタマイズでも探せば、完璧。
cappuccino.fuji-blo.com

このブログははてなブログのカスタマイズ「Cappuccino」を元に雑なキメラ改造をしてできています。
↓がデモサイトなのですが、色を変えるCSSのコードを生成するジェネレータを用意していたり、グローバルナビゲーションの設置方法を解説していたり
他のカスタマイズと比べて群を抜いて初心者ユーザーに優しいです。
cappuccino.fuji-blo.com

無料版はてなブログだと一番のメリットであるカード形式が効かないのでちょっと弱いかもしれませんが、はてなブログProなら最強といって差し支えないです。おすすめ。

余談

当初このブログで使わせていただいたはずのコードが載っていた記事が（恐らく）抹消されていて大変悲しい。
当時はカスタマイズをMinimalismで使っていて、グローバルナビゲーションもこの時に実装したと思います確か
このカスタマイズもおすすめです
特に無料版はこれが一番きれい。
hitsuzi.hatenablog.com

前提：サイドバーに検索欄をつける

こちらもやっている人は多いかもしれません。

表示する

ダッシュボードから「デザイン」を選びます。

スパナマークを押して、「サイドバー」を選択。

「モジュールを追加」→「検索」を選択します。
適当にタイトルを付けたら「適用」をして
最後に変更を保存したら終わりです！

開発者ツールでHTMLコードを盗む。

ここからが本番の話。

開発者ツールとは

皆さんは開発者ツールというものをご存じでしょうか。
試しに今「F12」を押してみてください。
ブラウザの関係でキーが違ったらすみません。

うわ―なんかすごいのが出てきちゃったぞと当時僕も思いました。
これは何かというと、
「表示しているページのソースコードが見られるツール」
です。

しかも、「開発者ツール」と名前がつくだけあって、便利な機能がたくさんあります。

各要素のプロパティ表示
その場でソースコードの数字などをいじったらどう表示されるかをリアルタイムテストする機能
ページ上の項目にカーソルを合わせて、その項目を表示しているソースコードを出す機能

それはもう最強。

ＨＴＭＬコードを盗む

要するに今回の作戦はこう。

自力で検索ツールのHTMLコードを書けないから、
はてなブログが用意した自分のブログの検索バーのHTMLをパクっておいたら動くんじゃね……？

頭がいいのか悪いのか……みたいな作戦。

まず、変更したい自分のブログにアクセスします。
そしたら「F12」で開発者ツールを開いて、
「ページから要素を選択」の機能をONにします。

その状態で、サイドバーに表示した検索ボックスをクリックします。

すると、コードがわかります。

divの中身の、この部分が目的のコードです！

グローバルメニューに張り付ける

あとは、他の項目と並列になるように持ってきたコードを張り付けるだけ！
参考までに、このブログのヘッダ下のHTMLを一部張っておきます。

<div id="nav-content">
          <label class="nav-close" for="nav-input"><i class="blogicon-close"></i>CLOSE</label>
              <ul class="g-nav">                 
                  <li><a href="https://embrabat-report.net/">トップページ</a></li>
                  <li><a href="https://embrabat-report.net/sitemap">おすすめ記事</a></li>
                  <li><a href="https://embrabat-report.net/archive/category/%E3%83%9D%E3%82%B1%E3%83%A2%E3%83%B3%E5%B0%8F%E8%AA%AC">ポケモン小説</a></li>
                  <li><a href="https://embrabat-report.net/archive/category/%E3%83%84%E3%83%BC%E3%83%AB%E8%A7%A3%E8%AA%AC%E8%A8%98%E4%BA%8B">ツール解説記事</a></li>
                  <form class="search-form" role="search" action="https://embrabat-report.net/search" method="get">
                      <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="" style="width: 20vw; max-width:250px;">
                      <input type="submit" value="検索" class="search-module-button">
                  </form>
              </ul>
      </div>

体裁を整える

実装したものそのままだと、ちょっと検索欄が長かったりしました。
短くしようと思ったので、付け焼刃HTML知識を検索で仕入れました。

元のコードの一部に

<input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">

という部分があると思うのですが

これに少し付け加えて↓こんな感じにします。

<input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="" style="width:250px;">

この最後に付け加えたやつ。
これは横幅を250ピクセルにしなさいという指令。
これで横幅を変えられます。

おわりに

重ね重ねになりますが、
この記事の内容は大変頭が悪い内容です

自分でHTMLを書けるちゃんとした有識者ならこんなことする必要ないですからね。
それに、基本的には自分でどんなコードか知らないままコードを使うのは、危険です。
思わぬところで重篤な不具合が発生することも多々あります。
コードのバックアップを必ず取って、元に戻せるようにした状態で実験をするようにしてください。

本ブログでは、この内容を参考にしたHTMLの不具合に関して一切責任を持ちかねますのでご了承ください。