【サイト作りの小技】アフィリエイト広告を横並びに表示する方法

このような楽天アフィリエイトの広告。

LIBERTYリバティプリント・国産タナローン生地(エターナル)＜SleepingRose(スリーピングローズ)＞3630275BE リバティ 生地 価格:341円 (2019/10/30 22:59時点)

横並びに表示するにはどのようにすれば良いのでしょうか。

今回は横並びに表示する方法について紹介します。

簡単！WordPress5.0で広告を横並びに表示する方法

WordPress5.0のグーテンタークではカラムという機能が標準装備されたので、簡単に広告を横並びにすることができます。

まずはレイアウト要素からカラムを選択します。

カラムとは、行列の列のことです。

一般的な行列の表（テーブル）とは異なり、、列のみの表のブロックのことです。

カラムを選択するとこのように2つの列で編集することができるようになります。

それぞれのブロックをカスタムhtmlに変換して広告リンクを貼り付けることで、このように、横並びに表示することができます。

カラム数を調整するためには、

カラムの左横の6つの点々をクリックしてカラム全体を選択すると

右側に出てくるカラムの設定用画面でカラム数を指定することができます。

その他に横並びにする方法は？

カラムを使用すれば初心者でも簡単に広告を横並びに表示することができましたが、その他にも方法はあるのでしょうか？

テーブルを利用する方法

旧エディタでも可能なテーブルを利用して横並びに表示することができます。

グーテンタークでは、このように行の1としたテーブルを使用するとカラムのように使用することができます。

div要素を使用する

htmlが得意な方はdiv要素を使用すると、スマホやPCどちらで見ても崩れない様に詳細に設定することができます。

ちなみにWordPress5.0のカラム機能を利用した場合のコードは以下のようになります。

<div class=”wp-block-columns has-2-columns”>

</div>

<p>

<br data-mce-bogus=”1″></p>

以上です。お役に立てば幸いです。