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

HTML/CSS

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

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

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

想定読者
・WordPressをはじめたばかりの人
・広告を横並びにしたい人
・HTML/CSSを勉強中の人

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

【方法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>
「外観」>「ウィジェット」から広告を表示したい場所に、この↑コードを貼り付けます。
それから、方法1と同様に「表示させたい広告のコード」という部分に広告のコードを貼り付けます。
CSSのコード
.kiziad {
	padding:0px !important;
}

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

「外観」>「カスタマイズ」>「追加CSS」にこの↑コードを貼り付けます。

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

 

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

 

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

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

ダブルレクタングル

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

感想・まとめ

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

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

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

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

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

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

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

おさかなでした!

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました