1.
2.
※編集点
・挿入する画像にボタンの画像をあらかじめ配置しておく
・ボタンの数に合わせてリンクボックスの数を編集
・<a>タグの中身を text-indent: -9999px; で非表示にし、background: transparent; & border: none; で完全に透明化し、.imgLink__area に position: relative; を設定。.linkItems li に position: absolute; を指定。
・li:after を使用していた不要な線を削除。
・メディアクエリで min-width: 601px と max-width: 600px を設定し、SP,PCそれぞれの環境に応じた top, left, right, width, height を設定。
・ボタンのそれぞれに飛び元のアンカーリンク <a href="#heading1">...</a>、<a href="#heading1">...</a>を設定する。
3.
※編集点
・線の色を#fffで白にする。
・<div id=heading1>...</div>を追加する。
4.
5.
※編集点
・つなぎの背景画像を挿入
・<div id=heading2>...</div>を追加する。
6.
7.
※編集点
・見出しタイトルを削除
・見出しのボックスを一つに
・Qのアイコン <span class="icon"> Q</span>と.accordion-trigger .icon:not(:has(img)) {
background-color: #dc1c5f;
color: #ffffff;
}を削除
・max-height: 100vhの数字の部分を変更してアコーディオン内の文章の長さに合うよう設定
・背景色と文字色を変更
8.
9.
※編集点
・<source media="(max-width: 580px)">を挿入して背景画像のレスポンシブを設定
・CSSで
text-align: center;
background: linear-gradient(to right, #ffffff, #cceaff);
color: #000;
border: 2px solid #2B8AD9;
でテキストの中央揃え、グラデーションの背景色、文字色、枠線を設定
・.bg-button:not(:has(img)) .btn:hover,
.bg-button:not(:has(img)) .btn:active {
background: #2B8AD9;
color: #fff;
}
でホバー／タップした際の色を設定
10.
11.
※編集点
・<source media="(max-width: 580px)">を挿入して背景画像のレスポンシブを設定
・CSSで
text-align: center;
background: linear-gradient(to right, #ffffff, #cceaff);
color: #000;
border: 2px solid #2B8AD9;
でテキストの中央揃え、グラデーションの背景色、文字色、枠線を設定
・.bg-button:not(:has(img)) .btn:hover,
.bg-button:not(:has(img)) .btn:active {
background: #2B8AD9;
color: #fff;
}
でホバー／タップした際の色を設定
12.
13.
14.
※編集点
・見出しタイトルを削除
・Qのアイコン <span class="icon"> Q</span>と.accordion-trigger .icon:not(:has(img)) {
background-color: #dc1c5f;
color: #ffffff;
}を削除
・背景色と文字色を変更
・.widget-container {
padding: 2em;
border-radius: 1em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
で見出し同士の余白、Widget全体の角の丸さ、影のエフェクトを追加
15.
※編集点
・背景色を変更
・動く画像、テキスト部分を削除
・max-width: 450px;で画像全体をやや縮める
・.image-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 102, 300, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
border-radius: 100px;
}
.image-wrapper:hover::after,
.image-wrapper:active::after {
opacity: 1;
}
を追加して、ホバー／タップ時のフィルターを設定
※ここにテキストを入力します。
ここにテキストを入力します。
16.
※編集点
・背景色を変更
・動く画像、テキスト部分を削除
※ここにテキストを入力します。
ここにテキストを入力します。
17.
18.
Copyright © SIVAinc All rights reserved.
19.
※編集点
・画像を挿入
・botttom: で電話ボタンと被らないように位置を調整
20.
※編集点
・画像を挿入
・botttom: で電話ボタンと被らないように位置を調整
・.fixBanner__area にz-index: 9999;を追加し、スクロール時画像の下に被らないよう設定
21.
※編集点
・.pagetopBtn:not(.page-top-img) {
left: 20px;
}
を追加し、ボタンを左に寄せる