おちゃのこ通信 Vol.183 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、先日アップロードしたスマートフォン版のスライド機能をパソコン版の自由記入欄で利用する方法をご紹介します。

	http://cafe0808.ocnk.net/

自由記入欄にhtmlタグを挿入する

管理画面→デザイン管理→画像とコメントの設定の自由記入欄にhtmlタグを記載します。
今回は、http://cafe0808.ocnk.net/に記載しているhtmlと同様のhtmlを利用してご説明します。
ベースとなるhtmlに関しては、下記のFAQをご覧くださいませ。
http://www.ocnk.net/faq/index.php?action=artikel&cat=281598&id=883&artlang=ja

基本的には、設定項目は、画像、リンク先、商品名、価格の4つとなります。
<li class="list_item_cell">～</li>までが1つの商品となります。
このブロックを掲載したい商品分、繰り返して記載します。
下記の例では、6商品分記載しています。

<div class="item_list layout_photo">
<div class="swipe_list" data-autoplay="on" data-interval="5000" data-cols="3" data-adjustment="on">
<div class="list_item_table col3">
<ul class="list_item_row clearfix">

<li class="list_item_cell">
<div class="item_data">
<div class="inner_item_data">
<div class="list_item_photo">
<a class="item_image_box" href="http://cafe0808.ocnk.net/product/26">
<img width="300" height="300" data-retention="1" alt="ダイニングチェア" src="http://cafe0808.ocnk.net/data/cafe0808/product/1d6800df4c.jpg" />
</a>
</div>
<div class="list_item_data">
<p class="item_name"><a href="http://cafe0808.ocnk.net/product/26">ダイニングチェア</a></p>
<p class="price">20,000円</p>
</div>
</div>
</div>
</li>

<li class="list_item_cell">
<div class="item_data">
<div class="inner_item_data">
<div class="list_item_photo">
<a class="item_image_box" href="http://cafe0808.ocnk.net/product/25">
<img width="300" height="300" data-retention="1" alt="ダイニングチェア" src="http://cafe0808.ocnk.net/data/cafe0808/product/51a2a0ebd1.jpg" />
</a>
</div>
<div class="list_item_data">
<p class="item_name"><a href="http://cafe0808.ocnk.net/product/25">ダイニングチェア</a></p>
<p class="price">30,000円</p>
</div>
</div>
</div>
</li>

<li class="list_item_cell">
<div class="item_data">
<div class="inner_item_data">
<div class="list_item_photo">
<a class="item_image_box" href="http://cafe0808.ocnk.net/product/2">
<img width="300" height="300" data-retention="1" alt="Cafe Table" src="http://cafe0808.ocnk.net/data/cafe0808/product/b4d909d265.jpg" />
</a>
</div>
<div class="list_item_data">
<p class="item_name"><a href="http://cafe0808.ocnk.net/product/2">Cafe Table</a></p>
<p class="price">25,000円</p>
</div>
</div>
</div>
</li>

<li class="list_item_cell">
<div class="item_data">
<div class="inner_item_data">
<div class="list_item_photo">
<a class="item_image_box" href="http://cafe0808.ocnk.net/product/5">
<img width="300" height="300" data-retention="1" alt="Cafe Chair" src="http://cafe0808.ocnk.net/data/cafe0808/product/585a3126cc.jpg" />
</a>
</div>
<div class="list_item_data">
<p class="item_name"><a href="http://cafe0808.ocnk.net/product/5">Cafe Chair</a></p>
<p class="price">25,000円</p>
</div>
</div>
</div>
</li>

<li class="list_item_cell">
<div class="item_data">
<div class="inner_item_data">
<div class="list_item_photo">
<a class="item_image_box" href="http://cafe0808.ocnk.net/product/8">
<img width="300" height="300" data-retention="1" alt="Cafe Chair" src="http://cafe0808.ocnk.net/data/cafe0808/product/22c794f6f3.jpg" />
</a>
</div>
<div class="list_item_data">
<p class="item_name"><a href="http://cafe0808.ocnk.net/product/8">Cafe Chair</a></p>
<p class="price">15,000円</p>
</div>
</div>
</div>
</li>

</ul>
<div class="pointer_box">
<span class="pointer_prev"></span>
<span class="pointer"></span>
<span class="pointer_next"></span>
</div>
</div>
</div>
</div>

img	<img width="300" height="300" data-retention="1" alt="Cafe Table" src="http://cafe0808.ocnk.net/data/cafe0808/product/22c794f6f3.jpg" /> 商品の写真を指定する箇所となります。 src=の後ろが画像URLとなりますので、画像URLを利用される画像に変更してください。 width、heightは画像の横幅、縦幅を指定してください。画像は、初期設定では、横幅100%表示となりますので、ある程度大きい画像を設定いただいてもはみ出し等のレイアウト崩れは発生しません。
a	<a class="item_image_box" href="http://cafe0808.ocnk.net/product/26"> 商品詳細ページへのリンクを指定する箇所となります。 href=の後ろがURLとなりますので変更してください。画像部分と商品名部分の2か所あります。
商品名	<p class="item_name"> <a href="http://cafe0808.ocnk.net/product/8">Cafe Chair</a> </p> 商品名を指定する箇所となります。 Cafe Chair部分が商品名を記載する箇所となりますので変更してください。
価格	<p class="price">15,000円</p> 価格を指定する箇所となります。 15,000円部分が価格を記載する箇所となりますので変更してください。
スライド送り	<div class="pointer_box"> <span class="pointer_prev"></span> <span class="pointer"></span> <span class="pointer_next"></span> </div> スライドを送るナビゲーションとなります。 <span class="pointer_prev"></span> <span class="pointer_next"></span> 上記2つが左右の矢印ボタン <span class="pointer"></span> 上記が●○のナビゲーションとなります。

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php