記事の途中などで紹介する商品広告の位置の調整方法、特に中央揃えにする方法を紹介します。
リンクを貼っても小さく左に寄ってしまってバランスが悪い、と思ったことは無いでしょうか。
その表示位置は簡単に中央に揃えることが出来ます。
配置を整えると、画像、説明、購入先の関係が分かりやすくなります。中央にそろえるだけでクリック率や収益が上がると決まるわけではありません。
Cocoonでも他のテーマでも同じように対処出来る方法と、それをより簡便に使いこなすための機能として有料テーマ『SWELL』によるオススメの使い方を合わせて紹介します。
ブログの広告を中央揃え表示にする方法
例えばこのブログを作成しているテーマである『SWELL』を紹介する場合、アフィリエイトのソースコードを貼り付けると以下のような左寄せ表示になります（スマホ画面だとサイズ的に中央に表示されているように見えますが）。
記事の左側に画像が寄ってしまうので、特に表示幅の広いPC画面では見た目のバランスが良くありません。
A8ネットの小さめの広告ではどうでしょうか。こちらはスマホでも左に寄っているのが分かると思います。
この表示位置を中央に揃えるためには、広告のソースコードを以下のように記述します。
<div align=”center”>
広告のソースコード
</div>
そうすれば、下のように中央に揃った表示になります。
centerを挟む記号は“”（括弧）ではないので気を付けて下さい。表示は“”になってしまっているかもしれませんが、“”（shift+2キー）が正解です。
ただ単に広告を貼るだけでは味気なく、中央揃えと適度な装飾は記事に洗練された雰囲気を与えてくれます。
SWELLでは広告を綺麗に貼るのも簡単
SWELLに備わった機能の活用例と、Amazon・楽天両方の広告を貼る方法について、簡単に紹介します。
ブログパーツの活用
SWELLの標準ブロックを使った場合の広告の挿入方法です。
上に示した中央揃えver.の広告リンクはSWELLを使って作成した『ブログパーツ』を挿入して作成したため見栄えが少し変わっていますが、表示されている画像リンク自体は同一のものです。
SWELLはブロックエディターに完全に対応した国産の有料テーマで、上記広告の通りシンプルで高機能という特徴を持っています。
その謳い文句に相応しい操作性でこうした広告をさらっと挿入することが出来ます。
実際の手順は以下の2ステップです。
これだけです。
ブログパーツは通常の記事の作成と同様に作成することが出来、これまた様々な機能を使ってオシャレにデザインすることが可能です。
SWELLの広告に限らず、お勧めしたい商品の紹介広告をブログパーツとして用意しておけば、2クリックで簡単に記事に埋め込むことが出来ます。
中央揃えにした広告と、別途作成したリンク付きボタンと、簡単な説明を添えて登録しておけばいつでも呼び出すことが出来ます。
毎回ソースコードをコピーして貼り付ける手間もかかりませんし、中央揃えにするためにコードを追加する作業も1回だけ入力しておけばOKです。
また、『カラム』ブロックと組み合わせれば文章と広告など様々な内容と併記することも可能です。例えば下の広告と画像はスマホだと縦に並んで表示されますが、PCだと隣り合わせの表示になります。
ポチップの活用
おまけで紹介しておきます。
ポチップとは、Amazon・楽天・Yahoo!ショッピングなどのリンクをまとめて紹介することが出来るプラグインで、SWELLの開発者らが作成したものです。
ブロックエディター専用で、極めて簡単に広告を作成することが可能な便利プラグインです。
『もしもアフィリエイト』のリンクをそのまま使用可能なもので、収益はもしもアフィリエイト経由になります。
（Amazonアソシエイトなどからの直接リンクももちろん可能）
ご存知の方も多いと思いますが、もしもアフィリエイトでも同様の広告デザインを作成することが可能です。
しかし、この方法では広告を表示できない端末が存在するため、いくら広告を貼っていてもクリックされる機会を損失する可能性があります。
私のPCでもそうだったのですが、かんたんリンクを作成すると以下のように文字だけが表示される場合があるのです。
こんな感じ
リンク
文字だけになる場合は、スクリプトの読み込み、コードの貼り付け方、キャッシュ、端末の設定などを切り分けます。端末側が原因と決めつけず、公式手順と実際の公開画面を確認してください。
ポチップは別の方法で商品リンクを管理する選択肢です。ただし、すべての端末や広告ブロックで必ず表示される保証はありません。
このポチップとの相性が完璧なテーマであるSWELLはアフィリエイトの強い味方でもあるわけです。
以下のような広告リンクが作成されますので、表示幅に対する左右のバランスは整っています。
スマホだとAmazonなどのリンクボタンは縦に並び、PCだと横並びです。
ポチップ
見た目は『もしもアフィリエイト』の『かんたんリンク』やRinkerなどを使って作成した広告にそっくりですが、SWELLならこれまた簡単に『ポチップ』ブロック一つで呼び出せます。
一度作成した広告は保存しておけますので、何度ももしもアフィリエイトのHPを開く手間も掛かりません。
少しでも時間を有効に活用しましょう。
中央揃えだけで終わらせない広告の確認
広告の位置を整える目的は、見た目をそろえることに加え、読者が本文と広告を区別できるようにすることです。商品紹介の画像が中央にあっても、購入ボタンだけが画面の外へはみ出していたり、本文のリンクと広告が連続していたりすると操作しづらくなります。PCで中央に見えるかだけでなく、スマートフォンで画像、説明、購入先の順番が自然に読めるかを確認しましょう。
新しくHTMLを記述するなら、古いalign属性だけに頼らず、外側のコンテナをCSSで整える方法もあります。ただし広告サービスが発行したコードの中身は、見た目の都合で勝手に書き換えない方が安全です。画像とボタンを手作業で拡大して、本来の広告表示や計測が壊れることも考えられます。先にSWELLのブロックや広告用の設定で対応できないか確認し、必要な場合だけ外側の余白や配置を調整してください。
「広告をきれいに見せる」と「広告だと分からなくする」は別です。AdSenseは、広告をメニューやダウンロードボタンと誤認させる配置、広告へ不自然に注意を向ける装飾などを禁止しています。商品アフィリエイトでも、紹介文が広告を含むことを読者が理解できる表記を添えます。購入のメリットだけでなく、向かない用途や選ぶ際の条件も書くと、広告を押す前の判断に役立ちます。
配置を変えた後の評価も、クリック数だけで決めないようにします。広告が目立ってクリックが増えても、本文が読まれなくなり、関連記事へ進む人が減るなら、サイト全体には逆効果かもしれません。記事の読了や次のページへの移動も見ながら、広告を減らした方がよい位置を探します。画面が狭いほど余白の影響が大きいため、幅の違う端末で見比べることが役立ちます。
ブログパーツを使って共通の広告を管理すると、修正が一度で済む反面、ひとつの変更が多くの記事へ反映されます。変更前に使われている記事を把握し、代表的な長文記事と短い記事の両方で確認しましょう。商品が販売終了していたり、リンク先が別の型番になっていたりする場合は、配置より先に内容の修正が必要です。読者が探している商品へ正しく到達できることが、中央揃え以上に大切です。
確認資料（2026年10月12日）：Google AdSense・広告配置ポリシー。
ブログの広告表示位置まとめ
広告画像の位置を中央に揃えるためだけに、コードで毎回対応するのも面倒です。
そのため、よく使う広告はブログパーツという形で自在にデザイン・保存しておける機能は大変便利です。
SWELLにはCocoon等からの移行支援がありますが、対象や引き継げる書式には限りがあります。導入時は公式の対応範囲を確認し、代表記事で表示を点検してください。
これを機に、まだSWELLを触ったことが無い人は体験してみることをお勧めします。私自身、70記事程度をCocoonで作成した後に乗り換えましたが、大変満足しています。
移行支援の有無だけでテーマを選ぶより、今使っている装飾、広告、編集方法を引き継げるかを確認しましょう。デモサイトは使い心地を考える材料になります。
商品リンク自体の作り方はもしものかんたんリンク、文章の余白は段落と改行の使い分けも参照してください。2026年10月16日見直し。
コメント