Home > カスタマイズ方法

カスタマイズ方法 - トップページ

画像入れ替えscript

横480px 縦240pxにトリミングした画像を5枚ご用意ください。

画像の保存先は[images]フォルダ内の[img]です。

ファイル名を順に1.jpg・2.jpg・3.jpg・4.jpg・5.jpgとして保存すればOKです。

このスクリプトはリンク設置にも対応しています。

<!-- スライド 1 -->
<div id="entry01=">
<a href="**該当ページURL**"><img src="images/img/1.jpg" alt="" /></a>
</div>

<!-- スライド 2 -->
<div id="entry02=">
<a href="**該当ページURL**"><img src="images/img/2.jpg" alt="" /></a>
</div>

<!-- スライド 3 -->
<div id="entry03=">
<a href="**該当ページURL**l"><img src="images/img/3.jpg" alt="" /></a>
</div>

<!-- スライド 4 -->
<div id="entry04=">
<a href="**該当ページURL**"><img src="images/img/4.jpg" alt="" /></a>
</div>

<!-- スライド 5 -->
<div id="entry05=">
<a href="**該当ページURL**"><img src="images/img/5.jpg" alt="" /></a>
</div>

新着情報入力について

<div id="d20110728" class="entry">〜</div> までがひとつのブロック

id="d20110728"　d に続けて投稿日を入れます。

例：2011年7月28日なら　2011 07 28 → 20110728

後は自由に入力ください。

<div id="d20110728" class="entry">
<p class="entryday">平成23年07月28日</p>
<h3>ビジネステンプレート公開のお知らせ</h3>

以下自由に入力！
  　
改行は<br>を使って下さい。

あああああああああああああああ。<br>
ああああああああああああああああああああああ。<br><br>
あああああああああああああああ。
</div>

トップページにリンクを設置(新着情報入力について)

<!-- 新着情報 ここから -->
<li><span>2011.07.28</span><a href="info/1.html#d20110728">ビジネステンプレート公開のお知らせ</a></li>
<li><span>2011.07.27</span><a href="info/1.html#d20110727">トップページ画像入れ替えについて</a></li>
<li><span>2011.07.26</span><a href="info/1.html#d20110726">背景色・文字色のカスタマズについて</a></li>
<li><span>2011.05.05</span><a href="info/1.html#d20100505">カレンダー部分について</a></li>
<li><span>2010.10.10</span><a href="info/1.html#d20101010">トップページサムネイル部分について</a></li>
</ul>

中央部分商品リスト

サンプルでは元画像*1の他に 横150px 縦100px にトリミングした画像をもうひとつ用意し、トリミングした画像を表示させておりますが、面倒な場合は特に 横150px 縦100px の画像を用意する必要はありません。

*1 元画像は商品詳細ページのみで利用しております。

イメージタグに「width="150"」と指定してありますので、表示上は元画像を 横幅150px に縮小して表示します。ただし単に元画像を縮小しているだけですので、劣化した画像表示となるとともに画像が大量にある場合は読み込みに時間がかかる恐れも,,,商品画像の見た目にもこだわるようでしたら 横150px 縦100px にトリミングした画像をご用意ください。

aa 150pxに縮小したサンプル

画像の保存先は、各カテゴリーフォルダ内の[images]フォルダです。

当サンプルに合わす場合
元画像：item-1.jpgに対して サムネイル画像：item-1-s.jpgとしております。

<!-- 画像ブロック 1 -->
  <li class="btn01">
  <a href="item-1/index.html"><img src="item-1/images/item-1-s.jpg" alt="" width="150" />
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>

トリミング画像を用意しない場合は元画像へのパスをそのまま指定
元画像：item-1.jpg。

<!-- 画像ブロック 1 -->
  <li class="btn01">
  <a href="item-1/index.html"><img src="item-1/images/item-1.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>

画像を増やしたい場合はindex.htmlソース内にあるタグをコピーしてご利用下さい。

右サイドバーリンクボタン

商品詳細ページへのリンクを設置するもよし、フリーページを作成して作成したページにリンクを設置するもよし、使い方は自由です。

指定箇所は以下の部分

<!-- ********* 右サイドバーブロック -->
<ul class="pickupnavi">
  <li><a href="page/1.html"> ----- 該当ページへのリンク
  <span class="txt01">ロゴ部分について</span> ------短文のみです！
  <span class="txt02">ロゴは画像でもテキストでも....</span></a> -----短文のみです！
  </li>

右サイドバー商品リスト

指定箇所は以下の部分

<dl class="pickupnavi">
  <dt class="title">RANKING</dt> ----- 適当に見出しを
  <dd>
  <a href="item-1/index.html"><img src="item-1/images/item-1-s.jpg" alt="" width="150"" /></a>
  <p>商品名</p>
  </dd>

<dd>〜</dd>がひとつのブロックです。コピペで必要数増やして下さい。

サムネイル画像については、上記を参照して下さい。

Page top