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

Bloggerで記事を書き続けていると、だんだん「ナビゲーションバーをもっと便利にしたい」と思うようになります。私の場合、最初はシンプルなままで良かったのですが、記事数が増えてきて「やっぱり検索ボックスが欲しい」と感じるようになりました。
ただ、実際に設置してみたら思わぬ落とし穴があり、スマホ表示が崩れてしまったのです…。この記事では、そのとき私がどう試行錯誤して修正していったかを、体験談ベースでまとめます。

1. 「検索ボックスを付けたい！」と思ったきっかけ

記事数が30を超えたあたりから、「目的の記事が探しにくいのでは？」という不安が出てきました。自分でも過去記事を探すとき、カテゴリからではなく検索で一発で出したいと思うことが増えたんです。
そこで「ナビゲーションバーに検索フォームを組み込もう」と決意しました。検索は読者にとっても便利になるはずです。

2. 検索ボックスを埋め込んでみた

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で表示してみると、ちゃんと右側に検索ボックスが表示されました。「お、成功！」と喜んだのも束の間。スマホで確認すると悲しい現実が待っていました…。

3. スマホで確認したら大崩れ

スマホ表示では次のような惨状でした。

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

正直「これはユーザーに優しくない」と感じました。自分が読者だったら「使いにくいな」と思ってしまう…。せっかく追加したのに逆効果です。ここで「CSSを直さないとダメだ」と気づきました。

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

解決策はシンプルでした。ナビゲーション全体をflexレイアウトに変えて、表示順を指定すること。こうすると「カテゴリが先、検索が後ろ」と並べ替えられるんです。

@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を入れて再度スマホで確認。すると今度は「カテゴリリンク → その下に検索ボックス」という、自然でわかりやすい並びになりました。思わず「やった！」と声が出ました。

5. 検索ボックスが大きすぎた問題

しかし安心したのもつかの間。今度は検索ボックスがやたら縦に大きく、ナビゲーション全体から浮いて見えました。
そこで高さを32pxに調整し、他のメニューとの一体感を出すことにしました。

@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;
  }
}

この調整でスッキリと収まり、検索ボックスがナビの一部として自然に馴染むようになりました。

6. ナビゲーションが2行に分かれる問題

最後に気になったのは「ナビゲーション全体が2行になる」ことでした。項目数が多いと、スマホ画面ではどうしても折り返しが発生します。特に文字数が長いメニューは2行に分かれてしまいます。
これは仕様的に仕方がない部分です。見た目の統一感は崩れますが、操作に支障はないため私はそのまま使っています。気になる場合は「表記を短くする」「項目を整理する」などの工夫で対処できます。

7. 作業を通じて感じたこと

実際にカスタマイズしてみて思ったのは「やってみないと分からない」ということ。最初は単純に検索フォームを置くだけのつもりが、スマホでの表示崩れやサイズの違和感など、思わぬ課題が次々に出てきました。でもその都度CSSで調整すれば改善できる、という学びもありました。
こうした小さな改善の積み重ねが、読者にとって「見やすいブログ」につながるのだと実感しました。

8. まとめ

Bloggerのナビゲーションバーに検索ボックスを追加するのは簡単ですが、実際にやってみるとスマホ表示で崩れるなど課題も出てきます。今回の私の流れは「検索を入れる → スマホで崩れる → CSSで修正 → サイズを調整 → 2行問題は許容」というものでした。
完璧を目指すとキリがありませんが、ユーザーが使いやすければ十分です。シンプルで分かりやすいナビはAdSense審査にも有利なので、ぜひ一歩ずつ調整してみてください。

もし「自分にできるかな？」と不安に思っている方も、まずは検索フォームを入れるところから始めてみるのがおすすめです。崩れても必ず修正できますし、試行錯誤の過程が自分のスキルアップにもつながります。小さな改善の積み重ねが、読者にとって心地よいブログ体験を作っていくはずです。