改造結果の各列を独立させたスライドショーの1列目はここから、2列目はここから、3列目はここから、4列目はここからご覧下さい。
2列目は巻き戻しや早送りの線上にマウスを乗せた場合にのみスクロールします。
１．css/slider.cssの変更
基本的な考えは写真サイズを500✕375pxに変え、枠幅10px＋線幅1pxを付け、スライドUp,Downの表示幅を20pxに変えます。変更後は名前を｢slider1.css｣に変えて保存します。
下記は各縦スクロールスライド共通の設定で、使わない種類がある場合にはその設定は削除できます。
| 行 |
改 訂 前 |
変 更 後 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106 |
/* slider (base) ----------------------------------------- */
.slideFrame {
overflow: hidden;
width: 100%;
height: 100px;
}
.slideCell {
display: block;
}
.slideGuide .slideCell {
float: left;
margin-right: 5px;
}
.slideGuide.up .slideCell, .slideGuide.down .slideCell {
float: none;
margin-right: 0;
margin-bottom: 10px;
}
/* controller */
.slideCtrl {
position: absolute;
background-color: #333;
background-color: rgba(255, 255, 255, 0.55);
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.slideCtrl.left, .slideCtrl.right {
top: 0;
width: 90px;
height: 100%;
}
.slideCtrl.up, .slideCtrl.down {
left: 0;
width: 100%;
height: 60px;
font-size: 14px;
line-height: 60px;
}
.slideCtrl.left {
left: 0;
}
.slideCtrl.right {
right: 0;
}
.slideCtrl.up {
top: 0;
}
.slideCtrl.down {
bottom: 0;
}
/* slider-0 ----------------------------------------- */
#slider-0.slideFrame {
float: left;
width: 342px;
}
#slider-0.slideFrame .slideCell {
width: 300px;
padding: 20px;
}
/* slider-1 ----------------------------------------- */
#slider-1.slideFrame {
position: relative;
float: left;
width: 164px;
margin-left: 10px;
}
#slider-1.slideFrame .slideCell {
width: 122px;
padding: 20px;
background-color: #000;
}
#slider-1.slideFrame .slideCell:hover {
background-color: #505050;
}
/* slider-2 ----------------------------------------- */
#slider-2.slideFrame {
position: relative;
float: left;
width: 102px;
margin-left: 10px;
}
#slider-2.slideFrame .slideCell {
width: 60px;
padding: 20px;
}
/* slider-3 ----------------------------------------- */
#slider-3.slideFrame {
float: right;
width: 265px;
margin-left:
10px; } #slider-3.slideFrame .cell-other {
width: 263px;
margin-bottom: 10px;
}
#slider-3.slideFrame .cell-other img {
display: block;
} |
/* slider (base) ----------------------------------------- */
.slideFrame {
overflow: hidden;
width: 100%;
height: 100px;
}
.slideCell {
display: block;
}
.slideGuide .slideCell {
float: left;
margin-right: 5px;
}
.slideGuide.up .slideCell, .slideGuide.down .slideCell {
float: none;
margin-right: 0;
margin-bottom: 10px;
}
/* controller */
.slideCtrl {
position: absolute;
background-color: #333;
background-color: rgba(255, 255, 255, 0.55);
color: #00f;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.slideCtrl.left, .slideCtrl.right {
top: 0;
width: 90px;
height: 100%;
}
.slideCtrl.up, .slideCtrl.down {
left: 0;
width: 100%;
height: 20px;
font-size: 14px;
line-height: 20px;
}
.slideCtrl.left {
left: 0;
}
.slideCtrl.right {
right: 0;
}
.slideCtrl.up {
top: 0;
}
.slideCtrl.down {
bottom: 0;
}
/* slider-0 ----------------------------------------- */
#slider-0.slideFrame {
float: left;
width: 522px;
}
#slider-0.slideFrame .slideCell {
width: 500px;
padding: 10px;
}
/* slider-1 ----------------------------------------- */
#slider-1.slideFrame {
position: relative;
float: left;
width: 522px;
margin-left: 10px;
}
#slider-1.slideFrame .slideCell {
width: 500px;
padding: 10px;
background-color: #000;
}
#slider-1.slideFrame .slideCell:hover {
background-color: #505050;
}
/* slider-2 ----------------------------------------- */
#slider-2.slideFrame {
position: relative;
float: left;
width: 522px;
margin-left: 10px;
}
#slider-2.slideFrame .slideCell {
width: 500px;
padding: 10px;
}
/* slider-3 ----------------------------------------- */
#slider-3.slideFrame {
float: left;
width: 522px;
margin-left: 10px;
} #slider-3.slideFrame .cell-other {
width: 500px;
padding: 10px;
} |
2．css/main.cssの変更
82行目の｢min-width: 1200px;｣を枠を含む横幅｢min-width: 522px;｣に変えます。
変更後は名前を｢main1.css｣に変えて保存します。
3．index.htmlを3列目専用に変更
index.htmlをHPビルダーで開き、先ず名前を｢main.html｣に変えて保存します。
各行の解説：
① 1～ 11行：共通設定
② 13～ 17行：1列目の設定
③ 18～ 23行：2列目の設定
④ 24～ 29行：3列目の設定
⑤ 30～ 35行：右端列の設定
⑥ 37～ 46行：共通設定
⑦ 47行：要素のグループ化
⑧48～ 50行：｢img/header.png｣の表示
⑨ 51行：共通設定
⑩ 52行：コメント行
⑪ 53～ 79行：1列目の300✕300pxの縦スクロールスライドショーの設定
⑫ 80～ 90行：2列目の122✕122pxの縦スクロールスライドショーの設定
⑬ 91～106行：3列目の60✕60pxの縦スクロールスライドショーの設定
⑭107～114行：右端列の263✕263pxの縦スクロールスライドショーの設定
⑮115行：共通設定
⑯116～119行：｢img/footer-left.png｣と｢img/footer-right.png｣ の表示
⑰120行：47行の命令を閉じる
⑱121～122行：共通設定
削除：行番号が変わらないように後側から削除
①116～119行の削除
②107～114行の削除
③ 47～ 90行の削除
④ 30～ 35行の削除
⑤ 13～ 23行の削除
変更：(削除後)
① 6行目のmain.cssをmain1.cssに変更、7行目のslider.cssをslider1.cssに変更
②33行目の｢/60/3｣を選択し、 ｢編集｣→｢置換｣で｢検索文字列｣には選択した文字列が入っているので
｢置換文字列｣に｢/0｣と入力し｢すべて置換｣をクリック。（/60/3を全て/0に変える）
③33行目の｢60" height="60｣をコピーし、 ｢編集｣→｢置換｣で｢検索文字列｣には選択した文字列が
入っているので、｢置換文字列｣に貼り付けて｢500" height="375｣に変えて｢すべて置換｣をクリック。
置換の窓を閉じる。
④写真の最初の行を切り取り、写真の最後の行の下に挿入し、写真名を｢00.jpg｣から｢10.jpg｣に変える。
⑤44行目の｢prev｣を｢早戻し｣に変え、45行目の｢next｣を｢早送り｣に変える。
⑥動作確認を実施し、上書き保存する。
| 行 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122 |
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<title>slider</title>
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/slider1.css">
<script src="js/jquery.min.js"></script>
<script src="js/slider.js"></script>
<script>
$(function(){
// 自動実行
$("#slider-0").slider({
direction: "up",
time: 32
});
// 手動で動かす
$("#slider-1").slider({
direction: "up",
auto: false,
pause: false
});
// 早送り・巻き戻し
$("#slider-2").slider({
direction: "up",
time: 24,
speed: 3
});
// クラス名のカスタマイズ
$("#slider-3").slider({
direction: "down",
guideSelector: ".guide-other", // ガイド用クラス名の変更
cellSelector: ".cell-other" // セル用クラス名の変更
});
// サンプル用の追加設定 ====================================
$(window).resize(function() {
// フレームの高さをウィンドウサイズに合わせる。
$(".slideFrame").height($(window).height() - $("footer").height());
}).resize();
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="img/header.png" alt="" /></h1>
</header>
<section id="main">
<!-- imgを使用する場合はサイズを指定しておく -->
<div class="slideFrame" id="slider-0">
<ul class="slideGuide up">
<li class="slideCell">
<img src="photo/300/11.jpg" alt="" width="300" height="300">
<p>Kokoniha hontouno soraga naitoiu,hontouno sora ga mitai to iu.I odoroite sora wo miru sakurano aidani arunoha kittemo kirenai mukashi najimino kireina sorada.Donyori kemuru thiheino bokashiha usumomoirono asano shimerida.</p>
</li>
<li class="slideCell">
<img src="photo/300/12.jpg" alt="" width="300" height="300">
<p>Kokoniha hontouno soraga naitoiu,hontouno sora ga mitai to iu.I odoroite sora wo miru sakurano aidani arunoha kittemo kirenai mukashi najimino kireina sorada.Donyori kemuru thiheino bokashiha usumomoirono asano shimerida.Aithuha tookuwo minagara iu.Adatarasan no yamano ueni mainichi deteiru aoi soraga honntouno sora dato iu.Adokenai sorano hanashi de aru.</p>
</li>
<li class="slideCell">
<img src="photo/300/13.jpg" alt="" width="300" height="300">
</li>
<li class="slideCell">
<img src="photo/300/14.jpg" alt="" width="300" height="300">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
<li class="slideCell">
<img src="photo/300/15.jpg" alt="" width="300" height="300">
<p>Fukai mori no nakani aru gaitou.</p>
</li>
<li class="slideCell">
<img src="photo/300/16.jpg" alt="" width="300" height="300">
<p>Totemo kireina kiiroi hana.</p>
</li>
</ul>
</div>
<div class="slideFrame" id="slider-1">
<ul class="slideGuide down">
<li class="slideCell"><img src="photo/122/20.jpg" alt="" width="122" height="122"></li>
<li class="slideCell"><img src="photo/122/21.jpg" alt="" width="122" height="122"></li>
<li class="slideCell"><img src="photo/122/22.jpg" alt="" width="122" height="122"></li>
<li class="slideCell"><img src="photo/122/23.jpg" alt="" width="122" height="122"></li>
<li class="slideCell"><img src="photo/122/24.jpg" alt="" width="122" height="122"></li>
</ul>
<div class="slideCtrl up">prev</div>
<div class="slideCtrl down">next</div>
</div>
<div class="slideFrame" id="slider-2">
<ul class="slideGuide up">
<li class="slideCell"><img src="photo/60/30.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/31.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/32.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/33.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/34.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/35.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/36.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/37.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/38.jpg" alt="" width="60" height="60"></li>
<li class="slideCell"><img src="photo/60/39.jpg" alt="" width="60" height="60"></li>
</ul>
<div class="slideCtrl up">prev</div>
<div class="slideCtrl down">next</div>
</div>
<div class="slideFrame" id="slider-3">
<ul class="guide-other down">
<li class="cell-other"><img src="photo/263/40.jpg" alt="" width="263" height="263"></li>
<li class="cell-other"><img src="photo/263/41.jpg" alt="" width="263" height="263"></li>
<li class="cell-other"><img src="photo/263/42.jpg" alt="" width="263" height="263"></li>
<li class="cell-other"><img src="photo/263/43.jpg" alt="" width="263" height="263"></li>
</ul>
</div>
</section>
<footer>
<div class="left"><img src="img/footer-left.png"
alt="" /></div>
<div class="right"><img src="img/footer-right.png"
alt="" /></div>
</footer>
</div>
</body>
</html> |
以下がここまでの操作を行った場合の全ソースです
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 |
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<title>slider</title>
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/slider1.css">
<script src="js/jquery.min.js"></script>
<script src="js/slider.js"></script>
<script>
$(function(){
// 早送り・巻き戻し
$("#slider-2").slider({
direction: "up",
time: 24,
speed: 3
});
// サンプル用の追加設定 ====================================
$(window).resize(function() {
// フレームの高さをウィンドウサイズに合わせる。
$(".slideFrame").height($(window).height() - $("footer").height());
}).resize();
});
</script>
</head>
<body>
<section id="main">
<div id="wrapper">
<div class="slideFrame" id="slider-2">
<ul class="slideGuide up">
<li class="slideCell"><img src="photo/01.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/02.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/03.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/04.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/05.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/06.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/07.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/08.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/09.jpg" alt="" width="500" height="375"></li>
<li class="slideCell"><img src="photo/10.jpg" alt="" width="500" height="375"></li>
</ul>
<div class="slideCtrl up">早戻し</div>
<div class="slideCtrl down">早送り</div>
</div>
</div>
</section>
</body>
</html> |
4．全体の説明文、BGMや戻るボタンを設ける場合の｢main.html｣
HPビルダーで｢main.html｣を開き、HTMLソースに切り替え、28行目の<body>の後ろで改行し、その状態で2行1列の表を作成します。
<body>
<table border="1"><tbody><tr><td> </td></tr><tr><td> </td></tr></tbody></table>
<section id="main">
：
：
</section>
</body>
</html> |
2か所の｢ ｣の前後で改行し、<section id="main">から</body>の直前の</section>までを切り取り、2つ目の｢ ｣と置き換えます。
1つ目の｢ ｣は全体の説明文を記入し、サイズ、色を調整します。
表の中央揃え、写真の説明文などの設定と中央揃えを実施します。
表の中央揃えは、<table border="1">の直前に<div align="center">を挿入し、</table>の直後に</div>を追加します。
写真夫々の説明文は
<li class="slideCell"><img src="photo/01.jpg"
alt="" width="500" height="375"></li>
の</li>の前で改行し、<p style="line-height: 0px;"><font size="+1"
color="#00ff00">説明文</font></p></p>を</li>の前に記載します。
動作確認すれば、以上で完成です。
main.htmlの最終的な全リストは次の通りです。
ピンクで表示した部分は皆さんの条件に合わせて変更して下さい。文字色も文字サイズも選べます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 |
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<title>高梁市 吹屋の街並み</title>
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/slider1.css">
<script src="js/jquery.min.js"></script>
<script src="js/slider.js"></script>
<script>
$(function(){
// 早送り・巻き戻し
$("#slider-2").slider({
direction: "up",
time: 24,
speed: 3
});
// サンプル用の追加設定 ====================================
$(window).resize(function() {
// フレームの高さをウィンドウサイズに合わせる。
$(".slideFrame").height($(window).height() - $("footer").height());
}).resize();
});
</script>
</head>
<body>
<section id="main">
<div align="center">
<table border="1">
<tbody>
<tr>
<td><p style="line-height: 35px;"> <font size="5" color="#00ff00">高梁市 吹屋 ベンガラ色の街並み</font></p>
</td>
</tr>
<tr>
<td>
<div class="slideFrame" id="slider-2" align="center">
<ul class="slideGuide up">
<li class="slideCell"><img src="photo/01.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">重要伝統的構造物群保存地区</font></p></li>
<li class="slideCell"><img src="photo/02.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">ベンガラ色の街並み</font></p></li>
<li class="slideCell"><img src="photo/03.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">レトロなボンネットバス</font></p></li>
<li class="slideCell"><img src="photo/04.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">麻田百貨店(お土産店)</font></p></li>
<li class="slideCell"><img src="photo/05.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">吹屋郵便局</font></p></li>
<li class="slideCell"><img src="photo/06.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">ベンガラ染工房</font></p></li>
<li class="slideCell"><img src="photo/07.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">ベンガラ屋(お土産店)</font></p></li>
<li class="slideCell"><img src="photo/08.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">あさだ(お土産店)</font></p></li>
<li class="slideCell"><img src="photo/09.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">長尾醤油酒店</font></p></li>
<li class="slideCell"><img src="photo/10.jpg" alt="" width="500" height="375">
<p style="line-height: 0px;"><font size="4" color="#00ff00">レトロな看板</font></p></li>
</ul>
<div class="slideCtrl up">早戻し</div>
<div class="slideCtrl down">早送り</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</html> |
|
