【CSS】WordPressで広告を「横並び」にする方法とは？！手順を解説！【WordPress】

みなさんこんにちは！おさかなです！

今回は「WordPressで広告を横並びにする方法」について、書いていこうと思います！

それでは、レッツゴー！！！！！

広告を横並びにする手順！

【方法1】HTMLの<table>タグを使用する

<table>
<tbody>
<tr>
<td>表示させたい広告のコード</td>
<td>表示させたい広告のコード</td>
</tr>
</tbody>
</table>

まず、この↑コードをコピーします。

そして、「WordPress」の「投稿」＞「新規追加」へ移動します。

そしたら、「テキスト」タブへ切り替えて、コピーしたコードを貼り付けます。

「表示させたい広告のコード」という部分に、広告のコードを貼り付けます。

※広告のコードがよくわからない人はコチラ！(準備中)

↓こんな感じで横並びにすることが出来ました！

【方法2】追加CSSを使用する

HTMLのコード

<div class="kiziad" style="margin-bottom:20px;">
  <div class="adleft">
    左に表示させたい広告のコード
  </div>
  <div class="adright">
    右に表示させたい広告のコード
  </div>
  <hr class="clear">
<!-- / .kiziad --></div>

.kiziad {
	padding:0px !important;
}

.adleft {float:left; width:336px;}
.adright {float:right; width:336px;}

実は、このサイトの広告もこの方法で表示されているので、チェックしてみてください…！

いずれの方法でも、きちんと広告が横並びになっていれば、完了です！
お疲れ様でした…！☕

「ダブルレクタングル」って何？

実はこのような、「正方形」に近い「長方形」の広告を2つ横並びにすることを

ダブルレクタングル

というので用語として覚えておくといいと思います…！

感想・まとめ

今回は「広告を横並びにする方法」について、書いていきました…！

いかがだったでしょうか？

WordPress初心者の方で、HTML/CSSがよくわかっていない方からすると、ちょっとの機能の実装もすごく難しく感じてしまうかもしれませんが、大丈夫です…！

「おさかなび」や他のブログ、書籍などを通じて1つ1つ丁寧に解決していきましょう…！(一緒にがんばりましょう…！)

※WordPress初心者にオススメの書籍はコチラ！(準備中)

それでは今回はこの辺で！

ここまで読んでくださり、ありがとうございました！

おさかなでした！