広告の横並び
記事に広告を配置するときの表現方法として、横に並べて配置したい場合もありますよね。
レイアウトデザインを作るにはスタイルシートの編集を行う必要がありますが、スタイルシートの編集って知識が無い人にはハードルが高すぎます。
もっと簡単な方法で横並びを作ることができるので、紹介します。
広告に限らず画像でも同じようにできますよ。
画像を使うときの注意点として、くれぐれも著作権で保護されている画像は使わない様にして下さい。
今回は「無料写真素材 写真AC」から画像を使わせてもらいました。
↓
https://www.photo-ac.com/
３つの広告を横並びに配置する
実際の広告を例として使うのはちょっとできないので、代わりに画像を使いますね。
３つの画像を横並びに配置してみます。記事の編集のときに、横並びで配置したい場所へ次のコードをコピペしてください。
「広告（画像）」と書いた場所を、配置したい広告や画像に差し替えれば使えます。
<table> <tbody> <tr> <td>広告（画像）</td> <td> </td> <!-- 空白 --> <td>広告（画像）</td> <td> </td> <!-- 空白 --> <td>広告（画像）</td> </tr> </tbody> </table>
このような感じになります。
パーセントを使って指定することもできます。
この方法を使えば、スマホサイトもパソコンサイトも同じように表示することができます。
<table border="0" width="100%"> <tbody> <tr> <td align="center" width="33%"> 広告（画像） </td> <td align="center" width="33%"> 広告（画像） </td> <td align="center" width="33%"> 広告（画像） </td> </tr> </tbody> </table>
3つの画像の合計のパーセントサイズが100%をこえないように、指定しましょう。
ここでは、1つの画像に対して、33%で指定してあります。
33%+33%+33%=99%になります。
100%以内になるように指定してあります。
2つの画像を横並びさせるときのコードは下記になります。
<table border="0" width="100%"> <tbody> <tr> <td align="center" width="50%"> 広告（画像） </td> <td align="center" width="50%"> 広告（画像） </td> </tr> </tbody> </table>
タグの説明
簡単にtableタグの意味を説明しておくと、
- <table> : 表を作るためのタグ
- <tbody> : 表のメイン部分を示す
- <tr> : 表の行を示す（複数の行をもつ表を作成する場合は、必要な行数分この要素を作る）
- <td> : 行に含むセルを示す（1つの行（tr要素）に複数のセルを並べたい場合は、必要なセル数分この要素を作る）
- : 明示的に半角スペースを入れるための表現
見た目が窮屈な感じになるので空白を入れましたが、不要なら次を削除すれば良いです。お好みでどうぞ。
<td> </td> <!-- 空白 -->
枠線のデザインについて
表の枠デザインは、基本的にはテンプレート次第です。
細い線で描かれる場合もあれば、
次のように枠線自体が描かれないような場合もあります。
まとめ
好みに枠デザインにしたい場合は、スタイルシートを編集することになります。
今回は紹介した目的は、「簡単に広告を横並びにすること」ですので、スタイルシートの編集には触れません。
興味がある方は、ご自身で調べて見てください。デザインの幅が広がりますよ。
