【Bloggerカスタマイズ】記事の上（ナビバー下）にガジェットを追加する方法

Bloggerでは、通常「ガジェット（ウィジェット）」はサイドバーやフッターなどに表示されますが、記事のすぐ上に表示したい！ということもありますよね。

この記事では、記事表示エリアの上にガジェットを追加する方法を、初心者でもわかるように丁寧に解説します。

• 記事ごとに表示させたい「お知らせ」や「キャンペーン情報」を載せたい
• 広告やバナーを記事の上に表示したい
• 記事上部にナビゲーションや特別な案内を設置したい

ステップ1：テンプレートのHTMLを開く

1. Blogger管理画面にアクセス
2. 左メニューから「テーマ」を選ぶ
3. 「カスタマイズ」ボタン横の「▼」をクリック → 「HTMLを編集」を選択

ステップ2：記事部分を探す

HTMLエディタで <!-- posts --> や <b:section class='main' id='main' ...> という記述を探します。これは、記事が表示されている場所です。

見つけたら、そのすぐ上の位置に次のコードを追加します。

ステップ3：ガジェットを表示するセクションを追加

<b:section id='top-widget' class='top-widget' showaddelement='yes'/>

これで、「レイアウト」画面に新しいガジェットエリアが追加されます。

ステップ4：「レイアウト」からガジェットを追加

1. Blogger管理画面 →「レイアウト」を開く
2. 「top-widget」または「記事上」などのガジェットエリアが表示されているのを確認
3. 「ガジェットを追加」をクリックし、HTML/JavaScriptなどを自由に追加

ステップ5（任意）：デザインを調整する

記事とガジェットの間に余白を入れたい場合は、CSSに次のスタイルを追加しましょう。

.top-widget {
  margin-bottom: 20px;
}

応用：既存の投稿セクションでもガジェット追加を可能にする方法

実は、投稿エリアそのものにもガジェットを追加できる設定があります。テンプレート内で次のような記述を探してみてください：

<b:section class='main' id='main' name='Main' showaddelement='no'>

この showaddelement='no' を 'yes' に変更すると、投稿セクションに直接ガジェットを追加できるようになります。

<b:section class='main' id='main' name='Main' showaddelement='yes'>

この変更によって、「レイアウト」画面で「ブログの投稿」セクションにも 「＋ガジェット追加」ボタン が表示されるようになります。

併用してもOK！

上記の showaddelement='yes' にする方法と、この記事で紹介した <b:section id='top-widget'> の方法は併用できます。

• 記事表示部分の上に独立したガジェットを追加したい → top-widget セクションを活用（独立しているのでCSSで位置の調整が可能）
• 記事表示部分に含めた形でガジェットを追加→ main セクションにガジェット追加

それぞれの役割に応じて使い分けましょう。

Before / After のイメージ

以下の図のように、ガジェットエリアが追加されます。

ガジェットが追加された画面

まとめ

記事の上にガジェットを表示することで、より目立つ案内やリンクを追加できます。テンプレート編集は少し緊張するかもしれませんが、手順通りにやれば大丈夫です！

カスタマイズに挑戦して、ブログをもっと使いやすくしましょう！