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

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

tp_biz42の背景画像をスライドショーにしたいというご要望が多かったのでカスタマイズ方法を紹介させて頂きます。

完成サンプルは以下です

「index.html」を土台にする場合のサンプル

「index_type2.html」を土台にする場合のサンプル

サンプル素材のダウンロード

解説用のサンプル素材を以下よりDLできます。

サンプル素材のダウンロード

解説

  1. まずは、スライドショー用の画像を3枚用意してimagesフォルダに入れて下さい。サイズは自由で構いませんが「縦横比率」は必ず揃えておいて下さい。
    今回は、画像ファイル名はひとまず「1.jpg」「2.jpg」「3.jpg」として解説します。
  2. 上記サンプル素材より、スライドショーのcssファイル(slide.css)をcssフォルダにコピーして下さい。
  3. スライドショーを使いたいhtmlにslide.cssの読み込みタグを追加…と思ったのですが、biz42には入っていました。
    (制作当初、スライドショーにできないか検討したのですが複雑になりそうだったので中止して中途半端に設定が残っていたようです)
    <link rel="stylesheet" href="css/slide.css">
    という行がslide.cssの読み込みタグです。入っているとは思いますが消してしまった場合は入れて下さい。
  4. 次に、スライドショー用の以下のhtmlタグをスマホ用のメニューブロックのすぐ下に入れて下さい。
    わからない場合はサンプル素材のhtmlファイルをみて下さい。
    <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. index.htmlを土台にしたい場合。
    今、追加した所のすぐ下にある、
    <div class="contents bg1 mt-top">
    を、
    <div class="contents bg1”>
    に変更。「mt-top」のスタイルを外す内容です。
  6. index_type2.htmlを土台にしたい場合。
    <div class="contents mt-top2">
    を、
    <div class="contents mt-top3">
    に変更。「2」から「3」に数字が変わっているだけです。

    続いて、新しくスタイル設定をした「mt-top3」のスタイルをstyle.cssに追加します。
    (index.htmlを土台にするだけならこの作業は不要です。)

    「全体の設定」場所に以下を追加。css前半です。
    .mt-top3 {
    margin-top: -300px;
    background: rgba(255,255,255,0.7);
    }

    「480px以下用の設定」場所に以下を追加。css後半にあります。
    .mt-top3 {
    margin-top: 0;
    }
  7. 最後に、cssで指定していた背景画像を全て外します。
    body#top
    のワードをstyle.css内で探して(検索をかけて)下さい。
    全部で4〜5箇所ほどあると思いますが、backgroundの行を全て、
    background: #fff;
    にして下さい。
    backgroundやbackground-imageなどが2行続けて入っている場合も上記の1行(background: #fff;)だけにまとめてもらってOKです。

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