ビジネス書、お金に関する本、ネットビジネスの技術系の本や教材を紹介します。

ビジネス 勉強堂

ドロップシッピング

できすぎくんで画像をキレイに横に並べる もしもドロップシッピング

投稿日:

 こんばんは、神谷です。

 ショップできすぎくんのワンポイントアドバイスです。

 ショップできすぎくんで画像をキレイに横に並べるのはチョッとテクニックが必要です。

 こんな感じ、

テーブル

 各カテゴリーページをバナーからリンクに飛ぶというイメージです。

 画像を左、中央、右と配置してもこのようには並んでくれません。

 これは、HTMLのtableを使ってきれいに配置しています。

 このコーディング例がこちら、※バナーからリンクを貼る場合

<center>
<table style="text-align: center;">
<tbody>
<tr>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
</tr>
<tr>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
</tr>
<tr>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
<td style="text-align: center;"><a href="リンク先URL"><img src="画像URL" alt="画像コメント"></a></td>
</tr>
</tbody>
</table>
</center>

 

 3 × 3のテーブルです。

<tr>タグが縦

<td>タグが横

なので、行を少なくしたければ、<tr></tr>で囲まれているところを減らせばいいし、セルを減らしたければ、<td></td>で囲まれているところを減らしてください。

 増やしたい場合は、逆をすればいいわけです。

 それを、できすぎくんをHTMLモードにして、貼り付ければテーブルの出来上がりです。

 使用する画像は同じ大きさにしておきましょう。

 不揃いでも入りますが、キレイには見えません。

 お試しあれ。

⇒ もしもちゃれんじ

-ドロップシッピング

Copyright© ビジネス 勉強堂 , 2019 All Rights Reserved Powered by AFFINGER5.