Template Party

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

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

▼解説用の完成サンプルは以下です。
https://template-party.com/2017bbs/tp_biz42_blue_cus/
https://template-party.com/2017bbs/tp_biz42_blue_cus/index_type2.html

▼解説用のサンプル素材を以下よりDLできます。
https://template-party.com/2017bbs/tp_biz42_blue_cus.zip

――――
まずは、スライドショー用の画像を3枚用意してimagesフォルダに入れて下さい。サイズは自由で構いませんが「縦横比率」は必ず揃えておいて下さい。
今回は、画像ファイル名はひとまず「1.jpg」「2.jpg」「3.jpg」として解説します。
――――
上記サンプル素材より、スライドショーのcssファイル(slide.css)をcssフォルダにコピーして下さい。
――――
スライドショーを使いたいhtmlにslide.cssの読み込みタグを追加…と思ったのですが、biz42には入っていました。
(制作当初、スライドショーにできないか検討したのですが複雑になりそうだったので中止して中途半端に設定が残っていたようです)
<link rel="stylesheet" href="css/slide.css">
という行がslide.cssの読み込みタグです。入っているとは思いますが消してしまった場合は入れて下さい。
――――
次に、スライドショー用の以下の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>

★index.htmlを土台にしたい場合。
今、追加した所のすぐ下にある、
<div class="contents bg1 mt-top">
を、
<div class="contents bg1”>
に変更。「mt-top」のスタイルを外す内容です。

★index_type2.htmlを土台にしたい場合。
<div class="contents mt-top2">
を、
<div class="contents mt-top3">
に変更。「2」から「3」に数字が変わっているだけです。

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

▼全体の設定に以下を追加。
.mt-top3 {
margin-top: -300px;
background: rgba(255,255,255,0.7);
}

▼480px以下用の端末設定に以下を追加。
.mt-top3 {
margin-top: 0;
}
――――
最後に、cssで指定していた背景画像を全て外します。
body#top
への指定が各端末ごとにあると思うので全て、

background: #fff;

の1行だけにして下さい。
backgroundやbackground-imageなどが2行続けて入っている場合も上記の1行だけにしてもらってOKです。
――――
以上です。
うまくいかない場合はサポート掲示板からご質問下さい。