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

皆さん、こんにちは。 おちゃのこネットの刑部です。
今回のデザイン道場は、スライドショーの第二弾です。前回は、3枚並びの写真でしたが、横長画像1枚で商品名や価格を表示しないでスライド表示する方法をご紹介します。

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

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



<!-- スライドショー -->

<div class="item_list layout_photo">
<div class="swipe_list" data-autoplay="on" data-interval="5000" data-cols="1" data-adjustment="on">
<div class="list_item_table col1">
<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="500" height="153" data-retention="1" alt="alt属性" src="http://cafe0808.ocnk.net/data/cafe0808/image/top.jpg" />
</a>
</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="500" height="153" data-retention="1" alt="alt属性" src="http://cafe0808.ocnk.net/data/cafe0808/image/top2.jpg" />
</a>
</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="500" height="153" data-retention="1" alt="alt属性" src="http://cafe0808.ocnk.net/data/cafe0808/image/top3.jpg" />
</a>
</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="500" height="153" data-retention="1" alt="Cafe Table" src="http://cafe0808.ocnk.net/data/cafe0808/image/top.jpg" />
写真を指定する箇所となります。
src=の後ろが画像URLとなりますので、画像URLを利用される画像に変更してください。

width、heightは画像の横幅、縦幅を指定してください。
画像は、初期設定では、横幅100%表示となりますので、ある程度大きい画像を設定いただいてもはみ出し等のレイアウト崩れは発生しません。

a

<a class="item_image_box" href="http://cafe0808.ocnk.net/product/26">
リンクを指定する箇所となります。
href=の後ろがURLとなりますので変更してください。

スライド
送り

<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

Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.