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

biz40の背景画像をスライドショー化するカスタマイズ(2017/06/19)

  1. 1.jpg、2.jpg、3.jpgの3枚の画像をimagesに入れる。
  2. 「biz44」のcssフォルダのslide.cssを、作業中のbiz40のcssフォルダにコピー。
    以下biz44へのリンクです。どの色でも構いません。
    https://template-party.com/db_template/?act=list&kind=1&info1=tp_biz44&html=list_biz.html
  3. biz40の作業に戻ります。index.htmlのhead内に以下タグを追加。
    <link rel="stylesheet" href="css/slide.css">
  4. htmlのheaderブロックの下に以下タグを追加。
    <aside id="mainimg">
    <img src="images/1.jpg" alt="" id="slide0">
    <img src="images/1.jpg" alt="" id="slide1">
    <img src="images/2.jpg" alt="" id="slide2">
    <img src="images/3.jpg" alt="" id="slide3">
    </aside>
  5. cssフォルダのstyle.cssを開きます。
    上の方の、
    img {border: none;max-width: 100%;height: auto;}
    を、以下に変更。
    img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
  6. 少し下の、
    header .inner {
    にある、
    overflow: hidden;
    を削除し、
    z-index: 1;
    を追加。
  7. #top header .inner {
    で設定してあるbackgroundの2行を削除し、
    height: 450px;
    を、
    height: auto;
    に変更する。
  8. css後半の
    /*画面幅800px以下の設定
    の、
    #top header .inner {
    にある、backgroundの2行を削除し、
    height: 250px;をheight: auto;に変更する。
  9. /*画面幅480px以下の設定
    の、
    header .inner {
    に、
    z-index: auto;
    を追加する。
    さらに、
    #top header .inner {
    も800pxの設定と同じように、background2行削除し、
    height: auto;に変更する。
  10. /*画面幅350px以下の設定
    の、
    #top header .inner {
    は丸ごと削除してもらえばOKです。
  11. サンプルはこちら。

追記

画像の高さが固定から変動になった為、ブラウザ幅が小さくなる過程でロゴや電話番号ブロックが下のコンテンツに重なる可能性があります。
cssのこれらのpositionの位置を調整するなり、レイアウトを切り替えるブレイクポイントを追加するなり、調整して下さい。

うまくいかない場合はサポート掲示板からご質問下さい。