Bloggerナビゲーションバーをカスタマイズ｜検索ボックス追加からスマホ表示修正までの実録レポート

Bloggerで記事を書き続けていると、「ナビゲーションバー（メニュー）をもっと便利にしたい！」と思うようになりますよね。私自身、最初はシンプルなままで良かったのですが、記事数が30を超えたあたりから「読者のために検索ボックスを設置したい」と感じるようになりました。

しかし、実際にHTMLをいじって検索ボックスを設置してみたところ、スマホ表示でレイアウトが盛大に崩れるという悲劇に直面してしまったのです…。

この記事では、私が実際に直面した「スマホ表示崩れ」のトラブルと、それを解決するために試行錯誤して編み出した「コピペで使えるCSS修正コード」を、実体験ベースのレポートとして詳しく解説します！

1. 検索ボックスのHTMLを埋め込んでみた

まずは「ナビゲーションバーの中に検索フォームを組み込む」という第一歩です。
Bloggerの管理画面から「テーマ」→「HTMLの編集」を開き、ナビゲーション部分を探しました。見つかったのは <div id='navigation'> のブロックです。

その直下にある <div class='widget-content'> の中に、以下の検索フォームのコードを追加しました。

<form action='/search' id='search-box-form' method='get'>
  <input 
    expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' 
    id='search-box-text' 
    name='q' 
    placeholder='ブログ内検索' 
    type='text'/>
  <button id='search-box-submit' title='検索' type='submit'>
    <i class='fas fa-search'/>
  </button>
</form>

PCで表示して確認してみると、ちゃんとメニューの右側に検索ボックスが表示されました。「お、一発で成功した！」と喜んだのも束の間。スマホで確認すると、そこには悲しい現実が待っていました…。

2. 悲劇！スマホで確認したら大崩れ

スマホの実機で確認したところ、次のような惨状になっていました。

• カテゴリのリンクが左側に縦にギチギチに詰まって並ぶ
• 検索ボックスだけが右上に残り、不自然にプカプカ浮いている

正直「これは読者に優しくない（むしろ使いにくい）」と感じました。せっかく追加したのに逆効果です。ここで「HTMLを追加するだけでなく、スマホ用のCSS（メディアクエリ）も調整しないとダメだ」と気づきました。

3. CSSで「カテゴリが上・検索が下」に修正

解決策は、ナビゲーション全体を「Flexbox（フレックスボックス）」レイアウトに変えて、表示順を強制的に指定することでした。
Bloggerの「CSSを追加」の欄に、以下のコードを追記します。

@media screen and (max-width: 768px) {
  .widget-content {
    display: flex !important;
    flex-direction: column !important; /* 縦並びに指定 */
    align-items: stretch !important;
  }
  .widget-content .LinkList,
  .widget-content .PageList {
    order: 1 !important; /* メニューを上に配置 */
    width: 100% !important;
  }
  #search-box-form {
    order: 2 !important; /* 検索ボックスを下に配置 */
    width: 100% !important;
    margin-top: 0.5em; /* メニューとの間に余白を少し */
  }
}

このCSSを入れて再度スマホで確認。すると今度は「カテゴリメニューが上段 → その下段に検索ボックス」という、自然でわかりやすい並びになりました。思わず「やった！」と声が出ました。

4. 検索ボックスが大きすぎる問題の微調整

しかし安心したのもつかの間。今度は「検索ボックスの高さがやたらと大きく、ナビゲーション全体から浮いて見える」という新たな問題が発生しました。
そこで、高さを「32px」に指定し、他のメニュー項目との一体感を出すように先ほどのCSSに以下のコードを追記しました。

@media screen and (max-width: 768px) {
  #search-box-text {
    height: 32px !important; /* 高さを揃える */
    font-size: 14px;
    padding: 4px 40px 4px 8px; /* 入力文字とアイコンの被り防止 */
  }
  #search-box-submit {
    height: 32px !important;
    width: 32px !important;
  }
}

この調整でスッキリと収まり、検索ボックスがまるで最初からあったかのようにナビの一部として自然に馴染むようになりました！

5. メニューが「2行」に分かれてしまうのは？

最後に気になったのは「ナビゲーション（カテゴリリンク）全体がスマホだと2行に折り返されてしまう」ことでした。項目数が多かったり、文字数が長いメニューがあったりすると、どうしても画面幅に収まらず2行に分かれてしまいます。

しかし、これはスマホの画面幅の仕様上、仕方がない部分です。見た目の統一感は少し崩れますが、操作自体に支障はないため、私はそのまま許容して使っています。
どうしても気になる場合は「カテゴリ名の文字数を短くする」「主要な3〜4項目に絞る」などの工夫で対処しましょう。

まとめ：やってみないと分からない！試行錯誤がスキルになる

実際にカスタマイズしてみて痛感したのは「PCでの成功が、スマホでの成功とは限らない」ということです。
最初は単純に検索フォームのHTMLを置くだけのつもりが、スマホでの表示崩れやサイズの違和感など、思わぬ課題が次々に出てきました。でも、その都度調べてCSSで調整すれば、必ず思い通りの形に改善できるという学びもありました。

完璧を目指すとキリがありませんが、ユーザーが直感的に「使いやすい！」と思えれば十分です。シンプルで分かりやすいナビゲーションは、Google AdSenseの審査やSEOにも有利に働きます。

「自分にできるかな？」と不安に思っている方も、まずはバックアップを取ってから検索フォームを入れてみるのがおすすめです。崩れても必ず修正できますし、この試行錯誤の過程が確実なスキルアップにつながりますよ！