1.
1.
※編集点
HTMLでロゴ画像挿入
リンクの文字の部分削除
HTMLでCTAボタンに画像挿入
2.
※編集点
HTMLで背景画像を挿入
CSSでボタンの色変更
bottom: ◯◯%;,left: ◯◯%で配置を調整
3.
4.
※編集点
・JavaScriptのカルーセル設定内に
breakpoints: {
// 画面幅が 0px 以上〜599px まで：1枚ずつ表示
0: {
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: false
},
// 画面幅が 600px 以上〜1px まで：2枚表示
600: {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true
},
// 画面幅が 1024px 以上：3枚表示（デフォルトと同じ）
768: {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true
}
}
を追加し、SP幅で閲覧した際のスライド枚数を設定する。
・CSSのメディアクエリで矢印の大きさを小さく、色と透明度を薄くし、SP幅で閲覧した際に矢印が邪魔にならないようにする。
5.
※編集点
・CSSでボタンの大きさ、フォントサイズ、色を設定
・メディアクエリを追加し、
.bg-switch-img {
content: url("〇〇");
}でSP閲覧時の背景画像を設定。メディアクエリ内でtext-align: center;を設定し文字を中央揃えに。
6.
7.
8.
※編集点
・JavaScriptのカルーセル設定内に
breakpoints: {
// 画面幅が 0px 以上〜599px まで：1枚ずつ表示
0: {
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: false
},
// 画面幅が 600px 以上〜1px まで：2枚表示
600: {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true
},
// 画面幅が 1024px 以上：3枚表示（デフォルトと同じ）
768: {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true
}
}
を追加し、SP幅で閲覧した際のスライド枚数を設定する。
・CSSのメディアクエリで矢印の大きさを小さく、色と透明度を薄くし、SP幅で閲覧した際に矢印が邪魔にならないようにする。
9.
※編集点
・CSSでボタンの大きさ、フォントサイズ、色を設定
・メディアクエリを追加し、
.bg-switch-img {
content: url("〇〇");
}でSP閲覧時の背景画像を設定。メディアクエリ内でtext-align: center;を設定し文字を中央揃えに。
10.
※編集点
HTMLのimgタグをすべてvideoタグに変更する
<video class="pc lazyload" autoplay="" muted="" loop="" playsinline="" width="100%" height="812">
<source type="video/mp4" src="◯◯.mp4">
</video>
11.
12.
13.
※編集点
・JavaScriptのカルーセル設定内に
breakpoints: {
// 画面幅が 0px 以上〜599px まで：1枚ずつ表示
0: {
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: false
},
// 画面幅が 600px 以上〜1px まで：2枚表示
600: {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true
},
// 画面幅が 1024px 以上：3枚表示（デフォルトと同じ）
768: {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true
}
}
を追加し、SP幅で閲覧した際のスライド枚数を設定する。
・CSSのメディアクエリで矢印の大きさを小さく、色と透明度を薄くし、SP幅で閲覧した際に矢印が邪魔にならないようにする。
14.
※編集点
・CSSでボタンの大きさ、フォントサイズ、色を設定
・メディアクエリを追加し、
.bg-switch-img {
content: url("〇〇");
}でSP閲覧時の背景画像を設定。メディアクエリ内でtext-align: center;を設定し文字を中央揃えに。
15.
16.
※編集点
・CSSで
width: 70%;に設定することで余白を作り、サムネイル画像が一画面に収まるように設定した。
さらにmargin: 0 auto;を設定し、Widgetが画面の中心に配置されるようにした。
・CSS内にメディアクエリを追加し、SP表示にした際に画像が縦一列に配置されるよう設定した。
@media screen and (max-width: 600px) {
.imgGroup__area > img,
.imgGroup__area > picture {
width: 100%;
}
}
17.
18.
※編集点
・JavaScriptのカルーセル設定内に
breakpoints: {
// 画面幅が 0px 以上〜599px まで：1枚ずつ表示
0: {
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: false
},
// 画面幅が 600px 以上〜1px まで：2枚表示
600: {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true
},
// 画面幅が 1024px 以上：3枚表示（デフォルトと同じ）
768: {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true
}
}
を追加し、SP幅で閲覧した際のスライド枚数を設定する。
・CSSのメディアクエリで矢印の大きさを小さく、色と透明度を薄くし、SP幅で閲覧した際に矢印が邪魔にならないようにする。
19.
20.
21.
22.
23.
24.
25.
26.
27.
※編集点
・CSS内で
text-align: center;
color: #545454;
を設定し、文字の配置と色を変更した。
※個人の感想です
28.
29.
30.
31.
※編集点
・JavaScriptのカルーセル設定内に
breakpoints: {
// 画面幅が 0px 以上〜599px まで：1枚ずつ表示
0: {
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: false
},
// 画面幅が 600px 以上〜1px まで：2枚表示
600: {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true
},
// 画面幅が 1024px 以上：3枚表示（デフォルトと同じ）
768: {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true
}
}
を追加し、SP幅で閲覧した際のスライド枚数を設定する。
・CSSのメディアクエリで矢印の大きさを小さく、色と透明度を薄くし、SP幅で閲覧した際に矢印が邪魔にならないようにする。
HTMLのカルーセル部分にラッパーを追加（<div class="carousel-wrapper">）し、CSSでラッパーに背景色を追加した。
32.
33.
※編集点
・JavaScriptのカルーセル設定内に
breakpoints: {
// 画面幅が 0px 以上〜599px まで：1枚ずつ表示
0: {
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: false
},
// 画面幅が 600px 以上〜1px まで：2枚表示
600: {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true
},
// 画面幅が 1024px 以上：3枚表示（デフォルトと同じ）
768: {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true
}
}
を追加し、SP幅で閲覧した際のスライド枚数を設定する。
・CSSのメディアクエリで矢印の大きさを小さく、色と透明度を薄くし、SP幅で閲覧した際に矢印が邪魔にならないようにする。
34.
35.
36.
※編集点
・CSSで
right: 50%;
を設定し、画面下中央に配置されるようにした。
37.
※編集点
・CSSで
top: 200px;
right: 0px;
に設定し、画面右上に表示されるようにした。
・メディアクエリを追加し、SPでの閲覧時にボタンが表示されないよう設定した。
@media screen and (max-width: 767px) {
.followed-button {
display: none !important;
}
}
38.
※編集点
・ロゴ画像挿入
・不要なテキスト削除
・CSSで背景色と文字色を変更