【ネットショップ構築の基礎】バナーを横並びで表示させる方法

寿司は味より食感がいい物が好みなogaRia佐藤です。
良く行く回転寿司屋がピークの時間帯、店の外まで行列が出来ててびっくりしました。

ショップをオープンしたばかりでHTMLも詳しくないし、
バナーを貼り付けるだけで精一杯！！＞＜
なんて店舗様いらっしゃるかと思います。

そこで今回は初心にかえってバナーの貼り付け方の一つ、
「横並び表示」する方法をご紹介したいと思います。

デモ

横並びなし

このようにとにかくバナーを取り急ぎ並べているヘッダーの様子です。
たまにこういったショップを見かけます。

3列横並び

無駄な余白がなくなりスッキリとした印象になりましたね！

貼り付けタグ

赤い字を修正してお好みの場所へ貼り付けましょう！

<!--1行目-->
<table border="0" cellpadding="5" cellspacing="0" width="100%">
 <tr>

  <!--1列目-->
  <td>
   <a href="リンクURL" target="_top">
    <img src="画像URL" width="100%" border="0">
   </a>
  </td>

  <!--2列目-->
  <td>
   <a href="リンクURL" target="_top">
    <img src="画像URL" width="100%" border="0">
   </a>
  </td>

</tr>
</table>


<!--2行目-->
<table border="0" cellpadding="5" cellspacing="0" width="100%">
 <tr>

  <!--1列目-->
  <td>
   <a href="リンクURL" target="_top">
    <img src="画像URL" width="100%" border="0">
   </a>
  </td>

  <!--2列目-->
  <td>
   <a href="リンクURL" target="_top">
    <img src="画像URL" width="100%" border="0">
   </a>
  </td>

</tr>
</table>

まとめ

いかがでしたでしょうか。
今まで縦に並べるだけだったバナーがスッキリかっこよくなりましたね！

楽天、ヤフーのPC、スマホはもちろん、通常のサイトなどでも使える方法になります。
是非思い当たる店舗様、調整してみてください^^