ショップできすぎくんで商品画像、商品名、価格を横2列でリスト表示させる方法です。

スマートフォンで表示した時に、並び方がそれぞれ異なる3タイプを作って見ました。

利用するには、CSSファイルをご自身で用意したサーバーにアップロードする必要があります。
また、直接HTMLを編集しますので、慣れるまで手間取るかもしれませんが、ぜひ活用してください。

3パターン紹介

パソコン・スマートフォンそれぞれの表示状態を、見比べてください。 パソコンではブラウザ(Internet Explorerを除く)の横幅を伸縮させれば、スマホでの表示状態を確認できます。

CSS

必要なCSSは以下のとおりです。

コピぺして適時名前をつけてCSSファイルを作り、ご自分のサーバーにアップしてご利用ください。

ショップデザイン設定>拡張設定 にある「オリジナルCSS URL」欄に以下のURLを入力し保存します。

div#main div.section table.item-table {
border-bottom: 1px #ccc dotted;
padding: 10px 0 5px;
border-collapse: collapse;
border-spacing: 0;
}
div#main div.section table.item-table td h3 {
line-height: 1.3;
font-weight: normal;
font-size: 0.9em;
border-bottom:none;
}
div#main div.section table.item-table td p {
text-align: center;
}
div#main div.section table.item-table td p.price {
color: #f00;
font-weight: bold;
font-size: 1.2em;
height: 1em;
}
div#main div.section ul.item-seller-c2 li,
div#main div.section ul.item-seller-2 li {
width:320px;
}
div#main div.section table.item-table td {
width:310px;
padding: 10px 0 5px;
}
div#main div.section ul.item-seller-c2 li h3,
div#main div.section ul.item-seller-c2 li p,
div#main div.section ul.item-seller-2 li h3,
div#main div.section ul.item-seller-2 li p,
div#main div.section table.item-table td h3,
div#main div.section table.item-table td p {
margin: 0 20px 5px;
}
@media all and (min-width: 769px) {
div#main div.section ul.item-seller-c2 li img,
div#main div.section ul.item-seller-2 li img {
padding: 0 20px 5px;
}
div#main div.section table.item-table td img {
padding: 0 0 5px 20px;
}
}
@media all and (max-width: 768px) { 
div#main div.section ul.item-list.item-seller-c2 li img {  
width: 120px;
position: absolute;
}
div#main div.section ul.item-list.item-seller-2 li img {
display: block;
margin-right: auto;
margin-left: auto;
}
div#main div.section ul.item-list.item-seller-2 li h3 {
margin-left: 10px;
}
div#main div.section ul.item-list.item-seller-2 li p.price {
text-align: center !important;
margin-left: 0;
}
div#main div.section table.item-table td {
width: 50%;
padding: 10px 2% 5px;
vertical-align: top;
border-bottom: 1px #ccc solid;		
}	
}

HTMLコード

3タイプのHTMLコードは以下のとおりです。

ショップできすぎくんの「ドラック&ドロップで要素を追加」機能の「自由ボックス」に、追加するタイプのHTMLコードをコピー&ペーストしてご利用いただけます。
赤文字の部分をそれぞれ使用する画像のURL、商品名、価格を入力してください。

※コピペすると赤文字の分は黒文字になります。

横並びに変形タイプ

<ul class="item-list item-seller-c2">
  <li><a href="(左)リンク先商品ページURL"><img src="(左)商品画像URL" alt="(左)商品名" width="300" height="300"></a>
<h3 class="name"><a href="(左)リンク先商品ページURL">(左)商品名</a></h3>
<p class="price">(左)価格円</p>
</li>
  <li><a href="(右)リンク先商品ページURL"><img src="(右)商品画像URL" alt="(右)商品名" width="300" height="300"></a>
<h3 class="name"><a href="(右)リンク先商品ページURL">(右)商品名</a></h3>
<p class="price">(右)価格円</p>
</li>
</ul>

縦一列に変形するタイプ

<ul class="item-list item-seller-2">
  <li><a href="(左)リンク先商品ページURL"><img src="(左)商品画像URL" alt="(左)商品名" width="300" height="300"></a>
<h3 class="name"><a href="(左)リンク先商品ページURL">(左)商品名</a></h3>
<p class="price">(左)価格円</p>
</li>
  <li><a href="(右)リンク先商品ページURL"><img src="(右)商品画像URL" alt="(右)商品名" width="300" height="300"></a>
<h3 class="name"><a href="(右)リンク先商品ページURL">(右)商品名</a></h3>
<p class="price">(右)価格円</p>
</li>
</ul>

横2列タイプ

<table class="item-table">
    <tbody>
        <tr>
  <td><a href="(左)リンク先商品ページURL"><img src="(左)商品画像URL" alt="(左)商品名" width="300" height="300"></a>
<h3 class="name"><a href="(左)リンク先商品ページURL">(左)商品名</a></h3>
<p class="price">(左)価格円</p></td>
  <td><a href="(右)リンク先商品ページURL"><img src="(右)商品画像URL" alt="(右)商品名" width="300" height="300"></a>
<h3 class="name"><a href="(右)リンク先商品ページURL">(右)商品名</a></h3>
<p class="price">(右)価格円</p></td>
</tr>
    </tbody>
</table>

利用方法

  • (1)ショップできすぎくんの「ドラック&ドロップで要素を追加」機能の「自由ボックス」を追加。


  • (2)挿入した自由ボックス内にカーソルを置き、HTMLボタンをクリック。HTML編集モードに切り替える。


  • (3)利用するタイプのHTMLコードをコピペ。赤文字の部分をそれぞれ使用する画像のURL、商品名、価格を入力します。HTMLを挿入ボタンをクリックして保存します。
  • ※コピペすると赤文字の分は黒文字になります。


  • 価格では「らくペタ」コードも利用できます。

らくペタ指定(税込表示)の例
<p class="price"><span class="msm-price msm-aid-*******">価格</span>円</p>
*******の部分はその商品のIDが入ります。



【注意事項】
◆HTMLコードの直接編集のみで操作ください。
ショップできすぎくんのリンク設定や画像挿入機能を併用すると、必要なコード(CSSのクラス名など)が削除されたり、余分なコードが挿入されたりして、表示に支障が出ることがあります。
もし、上手く表示されない時は、一旦削除して始めからやり直してください。
◆商品画像サイズは、300×300pxの画像を指定ください。

カートに入れる

画像ボックスで設定

自由ボックスで設定

自由ボックス html・css調整

画像を左に配置指定


支払い方法
領収書について

お支払い方法により異なります。

詳しくは「支払い方法について」

配送
配送料について
配送料は一回のご注文につき、一律540円となっております。
ご注文合計金額が税込8,000円以上の場合および送料無料商品を含む場合は、送料無料でお届けいたします。
ただし、沖縄、離島など一部の地域は別途送料が必要となる場合があります。
その際は、ご注文確認画面に注意書きが表示されます。
※一部直送商品はご注文後にメールで連絡させていただく場合がございます。
>> 詳しくは「配送について」

支払い方法について

領収書について

お支払い方法により異なります。

詳しくは「支払い方法について」をご覧ください。

配送について

配送料について
配送料は一回のご注文につき、一律540円となっております。ご注文商品代金8,000円以上、および送料無料商品を含む場合は、株式会社もしもが送料を負担いたします。
ただし、沖縄、離島など一部の地域は別途送料が必要となる場合があります。その際は、ご注文確認画面に注意書きが表示されます。
※一部直送商品はご注文後にメールで連絡させていただく場合がございます。
配送業者について
商品の配送は、佐川急便に委託しております。一部の直送商品につきましてはヤマト運輸等、他の配送業者がお届けする場合がございます。
商品は「株式会社もしも」名義でのお届けとなります。一部の直送商品につきましては、「株式会社もしも」名義ではなく、卸業者名、メーカー名になっている場合がございます。あらかじめご了承ください。
配送業者の都合上、お届けができない地域がございます。その際はご注文をキャンセルさせていただきますのでご了承ください。
※ただいま海外への出荷は承っておりません。
出荷目安について
出荷目安はご注文から出荷手配が完了するまでの期間となります。こちらは、土日祝日や年末年始、お盆休みを含まない営業日で計算しております。
※出荷目安が「即日出荷」の商品は、平日・土曜日の14:00までの注文分を当日中に出荷いたします。日曜・祝日・年末年始・お盆の場合は翌営業日に出荷いたします。