WPテーマ「Swell」でAmazon広告が縦に並んでしまう対処法

2021年9月12日

WordPressのテーマ「Swell」を使い始めて間もないのですが先日、Amazon広告をカスタムHTMLブロックで複数並べた記事を作成していたところ、表示結果が横並びにならず、縦に並んでしまう事象が発生しました。

こんな感じです。↓

これまで使用してきたテーマの場合、多くは１個目と２個目の広告のコードの間（</iframe>と<iframe>の間）の改行を削除すれば、横並びになる事が多かった。

これでも縦並びになってしまうので、ちょっと違う方法で考えるしかなさそうです。

DIVで囲ってみたらどうなるか？

カスタムHTML内の広告タグを<div></div>で囲ってみました。ですがこれでも結果は同じで縦並びになってしまいました。もしかしたら、SwellChild側の機能やCSSとかで制御がかかっているのかもしれませんね。

という事で、更に別の対策が必要になりました。

今度はカラムブロックを使用してみました。これでうまく横並びにする事が出来ました。こんな感じです。↓

説明するまでもないかもしれませんが、一応手順を解説しておきます。（ブロックエディタ前提）

①広告を掲載したい箇所でブロック追加ボタン押下（＋ボタン）

②すべてを表示＞デザインタブ内の「カラム」を選択（デフォルトの100を選択）

③ブロックを選択し、ブロックオプション内のカラム数を掲載したい広告数にする（ここでは下図赤枠の数値を４）

④４つのカラム中、一番左のカラム内の＋ボタンを押下しカスタムHTMLを選択

⑤各カラム内のカスタムHTML内に広告タブをコピペします。

補足）カラムのブロックを選択する時、カラム内のカスタムHTMLを掴んでしまい外側のカラムブロックを選択し難いです。入れ子ブロックの場合、外側のブロックを選択したい時はブロックの上部辺りをクリックするとうまくいきます。

因みに、カラムのブロック設定でスマホの列数を設定する箇所があるので私は２にしておきました。

自分の場合ですが、一応これで横並びにする事が出来ました。

以上、WordPressテーマ「Swell」でAmazon広告を横並びにする方法でした。

この記事が気に入ったら
フォローしてね！

Follow Me

よかったらシェアしてね！

はじめまして。アカサティナです。今はサラリーマンです。定年まで続けたいとは思っていません。色々第二の人生を考えてます。最近ブログを始めました。70年代生まれ、昭和の人です。ブログはWordPress、テーマは「Swell」を使ってます。