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

完成サンプルはこちら（トップページ）

解説

1. まずは、スライドショー用の画像を３枚用意し、imagesフォルダに入れます。
   画像サイズは適当で構いませんが、上下や左右がカットされてもおかしくないものを用意して下さい。
   ※拡張子は必ず「jpg」にしておいて下さい。「jpeg」や「JPG」はNGです。
   もし他の拡張子にする必要がある場合は、後のステップにあるcssへの画像読み込み部分の拡張子を変更して下さい。
   
2. 以下からslide.zipをダウンロード、解凍したらslide.cssをcssフォルダ内に移動しておいて下さい。
   slide.cssのダウンロード
3. head内に以下の１行を追加して下さい。他の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の下あたりに以下を追加。
   .home header {
   background: none;
   }
   
6. style.cssの「.home header」のheight(高さ)を変更する場合。
   slide.cssの「#mainimg」ブロックのheightも合わせて変更して下さい。小さな端末用の再設定もあるので忘れず。

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

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