無料ホームページテンプレート Template Party

初心者向けマニュアル公開中。完全無料でホームページを公開しよう!動画マニュアルつき。

clinic3のトップページの固定画像のスライドショー化カスタマイズ|2018/07/19

完成したスライドショーサンプルはこちら。

カスタマイズ方法

  1. まずは、スライドショー用画像3枚と、スライドショー用cssファイルをダウンロードします。

    画像を自分で用意する場合、ファイル名は必ず、1.jpg、2.jpg、3.jpgとしておいて下さい。JPGなど大文字になっているだけで表示できないブラウザもあるので注意。
    拡張子をどうしても変えたい場合は、slide.cssのスライドショー用画像の読み込みの拡張子も全て変更して下さい。
    画像の容量は軽めに準備した方がスムーズに切り替わります。

  2. スライドショー用の画像3枚は、お手元のclinic3テンプレートのimagesフォルダに、スライドショー用css(slide.css)はcssフォルダに入れて下さい。
  3. index.htmlのhead内にslide.cssを読み込むタグを追加します。
    <link rel="stylesheet" href="css/slide.css">
  4. 続いて、html側の
    <div id="mainimg">メインイメージ</div>
    を削除し、代わりに以下を貼り付けて下さい。
    <!--スライドショー-->
    <aside id="mainimg">
    <div class="slide0">slide0</div>
    <div class="slide1">slide1</div>
    <div class="slide2">slide2</div>
    <div class="slide3">slide3</div>
    </aside>
  5. 以上です。

    ※IE10以上でcssスライドショーは動作します。IE9は最後の1枚だけを固定表示、IE8以下は真っ白になります。

古いIE(IE9以下)に最初の1枚目を表示させる方法

  1. IE9以下に最初の1枚目だけを適用するスタイルをindex.htmlのhead内に直接記載します。
    <!--[if lt IE 10]>
    <style>
    #mainimg,.slide0,.slide1,.slide2,.slide3 {background: url(images/1.jpg) no-repeat center center;}
    </style>
    <![endif]-->

    head内にはIE8以下でのjsファイルの読み込み箇所があるので、その下にでも追加しておいて下さい。

解説:
一般のテンプレートに梱包されているcssスライドショーは直接html側に画像を置いていますが、clinic3は縦横比率を崩さずにヘッダー画像の高さを指定したかった為、背景画像(css)で画像を読み込む形にしています。