Q.ヘッダーのスライダーで上下に動く円形ボタンの位置を変更したい
「テーマオプション」>「トップページ1」>
「トップページ第1ブロック – キャッチコピーと円形ボタンの設定」>「キャッチコピー」
の文字数が多い場合や、機種やブラウザによっては、トップページのヘッダーのスライダー内で上下に動く円形ボタンがキャッチコピーの文字と重なってしまう場合がございます。その場合、円形ボタンの位置を少し下に変えれば、キャッチコピーの文字との重なりを回避できます。
A.下記の手順で円形ボタンの位置を調整します
編集するファイル:agent.css
編集する箇所:
.next-button {
display:block;
height:150px;
width:150px;
position: absolute;
left:0;
right:0;
bottom:60px;
background:white;
color:#3fa6f5;
text-align:center;
border-radius:100px;
cursor:pointer;
font-size:20px;
letter-spacing:-.05em;
padding-top:30px;
margin-left:auto;
margin-right:auto;
box-sizing: border-box;
-moz-animation: bounce 4s infinite;
-webkit-animation: bounce 4s infinite;
animation: bounce 4s infinite;
box-sizing: border-box;
}
↓
.next-button {
display:block;
height:150px;
width:150px;
position: absolute;
left:0;
right:0;
bottom:30px;
background:white;
color:#3fa6f5;
text-align:center;
border-radius:100px;
cursor:pointer;
font-size:20px;
letter-spacing:-.05em;
padding-top:30px;
margin-left:auto;
margin-right:auto;
box-sizing: border-box;
-moz-animation: bounce 4s infinite;
-webkit-animation: bounce 4s infinite;
animation: bounce 4s infinite;
box-sizing: border-box;
}
※bottom:60px;の部分を bottom:30px;等にご変更頂くという事です。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!