WordPressテーマTCDのカスタマイズを研究するサイト

ヘッダーのスライダーで上下に動く円形ボタンの位置を変更する方法

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;等にご変更頂くという事です。

The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。