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;等にご変更頂くという事です。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!