ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

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

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

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

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事