タグ別アーカイブ: トップページ

EC CUBE 2.13.3 カスタマイズ トップページにスライドショーを設置する方法 動きのあるトップページを作る方法

こんにちは。nekonomoridesignのyoshyです。
本日はEC CUBEカスタマイズです。

トップページにスライドショーを設置する方法

トップページにスライドショーがあると、動きもあって何だかソレっぽい感じになりますよね?ということで、設置したいなあとおもってやってみましたので、備忘録兼ねて記事にしておきます。
簡単な流れはこちら。

  1. スライドショー用の画像を設置
  2. スライドショー用のブロックを新規作成
  3. 必要タグをそのブロックに記載
  4. 完成したボックスをレイアウトで配置

という簡単な流れです。

1.スライドショー用の画像の準備
/html/user_data/packages/default/img/(新規作成したフォルダ)
に画像を保存する。

ではまず、画像を用意します。
適当・・・というわけでもありませんが、1000x400位の大きさで私は作りましたが、画像の大きさは、設置されるサイトのサイズによると思いますので詳しくは割愛します。

作った画像を保存するのですが、保存場所は、私の場合、わかりやすいように「top_slide」という名前の専用フォルダを以下のに作製してそこに保存していきました。
スライドショーで流したい画像はすべてそこに入れるという感じです。

保存フォルダ
/html/user_data/packages/default/img/top_slide(※新規作成したフォルダ)

上記フォルダにFTPサーバ経由で画像をアップロードしておきます。

2&3.スライドショー用のブロックを新規作成してタグも記入。

スライドショーを表示させるためのブロックを新規作成します。
タグも一緒に書いてしまいます。

【作業場所】
デザイン管理>PC>ブロック設定
【登録内容】
ブロック名:トップスライドショー(※任意で決めてください)
ファイル名:top_slideshow(※任意で決めてください)
【タグ】
———————————————————————————–

<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/default.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/module.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/bloc.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/jquery.bxslider.css” type=”text/css” media=”all”>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.min.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.bxslider.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.slider’).bxSlider({
auto: true,
pause: 4000,
speed: 1000,
mode: ‘horizontal’,
pager:true,
prevText: ‘<‘,
nextText: ‘>’
});
});
</script>

<div id=”slide_page”>
<ul class=”slider”>
<li><a href=”./products/list.php?category_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像1枚目” alt=”スライド1” /></a></li>
<li><a href=”./products/detail.php?product_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像2枚目” alt=”スライド2″ /></a></li>
<li><a href=”./products/list.php?category_id=2″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像3枚目” alt=”スライド3″ /></a></li>
<li><a href=”./products/list.php?category_id=3″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像4枚目” alt=”スライド4″ /></a></li>
</ul>
</div>

————————————————————————————
タグの解説
<a href=”./products/list.php?category_id=3″>
↑これは、リンクURL。カテゴリへ飛ばしたいときは、ここの id= のあとの数字を変えれば使えます。

<a href=”./products/detail.php?product_id=1″>
↑これもリンクURL。こちらは商品ページにダイレクトです。id= のあとの数字を、表示したい商品管理番号にすればダイレクトにリンクします。

<div id=”slide_page”>
スライド全体をcssのスタイルシートで指定しています。
このcssは、/html/user_data/packages/default/css/contents.css
に、新しいcssを追加作製しています。

———————————————————————————-

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

こんな感じでかいていって、「登録する」を押します。

4.完成したスライドをレイアウトで配置します。

【作業場所】
デザイン管理>PC>レイアウト設定

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

未使用ブロックに、先ほど3でつくったブロックがあるはずなので、ソレを任意の位置にレイアウトすれば完了です。

お教えしたままのタグだと、スライドを表示させているところが<div>でくぐってクラス設定をしているので、そこは、CSSで適当に調整してください。

以上で、簡単なスライドショーの設置方法でした!