ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

スライドショーがないテンプレートにスライドショーを設定する方法

当サイトのテンプレートにはFLASHのようなスライドショーが搭載されたタイプが多くあります。搭載されていないテンプレートにも搭載する方法をお教えします。

スライドショープログラム利用規約

今回サンプルで使うテンプレートはtp_designoffice1_corkにします


tp_designoffice1
タイプはメイン画像が固定タイプなのでこれをスライドショーに変更してみます。また、メイン画像右下の斜めの赤いPRボタンはそのまま使えるようにしてみましょう。

スライドショーに使う画像を自分で準備します

tp_designoffice1_corkテンプレートのbaseフォルダに、メイン画像の土台(mainimg.jpg)が入っていますのでこれを活用する事にします。
今回はスライドショー画像は全部で3枚使う事にしますが最大5枚までスライド表示させる事ができます。
画像ファイル名はそれぞれ1.jpg、2.jpg、3.jpgにし、imagesフォルダに入れておいて下さい。この際、拡張子の大文字小文字もちゃんと覚えておいて下さい。
※サイズは全て統一しておいて下さい。

スライドショーに必要なパーツを揃えます

※ご利用のテンプレートフォルダのjsフォルダ内にslide_simple_pack.jsというファイルがあればこの作業は不要です。
ない場合、こちらからスライドショー用のプログラムの圧縮ファイル(slide_simple_pack.zip)をDLします。
DL後、解凍し、slide_simple_pack.jsファイルをお手元のjsフォルダに移動します。もしjsフォルダがない場合は新たに作って下さい。

いよいよスライドショーを設定していきます

通常はトップページにスライドショーを置く場合が多いので、index.htmlを開きます。まずはスライドショー用のhtmlタグを以下からコピーし、メイン画像部分のタグと置き換えて下さい。tp_designoffice1の場合、
<p><img src="images/mainimg.jpg" alt="" width="983" height="350" /></p>
の行がメイン画像部分になりますのでここと置き換えるという事になります。

上のステップで、スライドショー用の画像の拡張子の大文字小文字に注意しておいて下さいと記載しましたが、もしあなたの環境での拡張子がJPGjpegJPEGなどになって保存されている場合、上記の1.jpgなどの拡張子部分も合わせて変更しておいて下さい。jpgでなく、gifやpngにした場合も同様に拡張子名を変更するように。

次に、スライドショー用のcssファイルもコピーし、cssフォルダのstyle.cssに貼り付けます。

スライドショー用のプログラムを読み込むタグをhtmlファイルに追加します

htmlファイル側の下から3行目あたり(</body>の上の行)に以下のタグを追加します。

では、テンプレートをプレビューで見てみましょう

うまくスライドショーが動けば成功です。
ローカル上だとプレビュー時にセキュリティ警告が出る場合がありますが、その場合は警告を解除してスライドショーの動きを確認しましょう。

一般テンプレートへのスライドショー設置は以上で終了です

※ここからはtp_designoffice1_corkの場合のみの補足になります。
さて、スライドショーは動きましたが、h1タグのテキストと、もともとあったメイン画像右下の赤い帯のアイコンが消えてしまいました。これはスライドショー画像の下に重なって消えて見えるものなので、スライドショーの上に表示されるようにスタイルを調整してみましょう。

h1タグと赤い帯のアイコンをスライドショーの上に表示させる

style.cssファイルを見ましょう。

さっき追加したスライドショー用のスタイル内にz-indexという指定があります。これは重なった場合により優先的に上に表示させるスタイルです。数字が大きいほど上に表示されます。
スライドショー用で「2」まで使われているので、h1タグと赤い帯のアイコンは「3」以上の数字で追加すればOKという事になります。今回の紹介テンプレートの場合、h1と赤い帯のアイコンは重なる部分はない為、どちらが大きな数字でも問題ありません。

最後にプレビュー確認です

画像をクリックすると実際のサンプルテンプレートを見る事ができます。

速度を調整したい場合は

こちらのカスタマイズ方法をご参照下さい。

テンプレートによっては上記のようにうまくいかない場合があります

例えば、メイン画像部分が背景画像になっている場合などは簡単に変更できない場合があります。
簡単に変更できそうな場合は、サポート掲示板にて対応しますのでどうしてもうまくいかない場合はご利用下さい。
尚、有料サポート範囲となる場合もありますので、その際はサポート掲示板にてそのように回答させて頂きます。ご了承下さい。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP