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

bussan1のメイン画像をスライドショー化する方法

>> 完成サンプルはこちら(トップページ)

>> 完成サンプルはこちら(その他ページ)

解説

  1. まずは、スライドショー用の画像を3枚用意し、imagesフォルダに入れます。
    画像サイズは適当で構いませんが、上下や左右がカットされてもおかしくないものを用意して下さい。
    ※拡張子は必ず「jpg」にしておいて下さい。「jpeg」や「JPG」はNGです。
    もし他の拡張子にする必要がある場合は、後のステップにあるcssへの画像読み込み部分の拡張子を変更して下さい。

  2. 以下からslide.zipをダウンロード、解凍したらslide.cssをcssフォルダ内に移動しておいて下さい。
  3. head内に以下の1行を追加して下さい。他のcss読み込み行があると思うので、その下あたりでOKです。
    <link rel="stylesheet" href="css/slide.css">
  4. index.htmlを開き、以下の場所にスライドショー用タグを追加します。
    <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. cssフォルダのstyle.cssのheaderの下あたりに以下を追加。

    ↓以下をコピペして使って下さい。

style.cssの「.home header」のheight(高さ)を変更する場合
slide.cssの「#mainimg」ブロックのheightも合わせて変更して下さい。小さな端末用の再設定もあるので忘れず。

スライドショーに関する詳しい解説は

スライドショーマニュアルをご覧下さい。