Diviのトップに戻るボタンをカスタマイズ

こんにちは、ナオミです!
Diviは縦に長いページを作るのに適しています。
そのためDiviには『トップに戻るボタン』が実装されています。

この記事では、そのボタンを有効化する方法と、カスタマイズする方法を紹介します。

Diviのトップに戻るボタンを表示

Diviのトップへ戻るボタンを有効化

長いページを下にスクロールしてもこのボタンが表示されない場合は、Diviのテーマオプションから『トップへ戻る』ボタンを有効にします。

Diviのトップへ戻るボタンが右下に表示された

これをクリックするとスクリーンが上までジャンプします。
これが『トップへ戻るボタン』です。

Diviのトップへ戻るボタンのカスタマイズ

Diviのトップへ戻るボタン

これがデフォルトのデザインですが、これを変換してみましょう。

ここからはCSSを追加しますので、やり方がわからない方はこの記事を最初に呼んでください。
>>DiviでカスタムCSSを追加する4つの方法

アイコンを変える

アイコンを変えるには、CSSが必要です。
アイコンはCSSで次のようにセットされています。

.et_pb_scroll_top:before {
  content: "2";
}

この、『2』がどのアイコンを使うかを表しています。

アイコンを選ぶ

このサイトに行きます。
https://dividezigns.com/divi-icon-codes/

Diviのアイコンをメニューに追加する

このようにアイコンが沢山出てくるので、使いたいアイコンの下にある文字列をコピーします。
例えば、上の画像の?のアイコンだと\75です。

アイコンコードを置き換える

.et_pb_scroll_top:before {
  content: "\75";
}

このように先ほどのCSSの『2』を『\75』で置き換えてみました。

Diviのトップへ戻るボタンのアイコンを変換成功

こんな感じでアイコンが代わります。

このコードをCSSに追加して、アイコンを変えてみましょう。

ボタンのスタイルを変える

次にアイコンだけじゃなく、スタイルも変えたい場合を紹介します。
アイコンのスタイルを変えるためのCSSセレクターはこれです。

.et_pb_scroll_top.et-pb-icon {

}

ここにCSSを足して現存するデザインを変えることができます。
例えばこんな感じにすると、

.et_pb_scroll_top.et-pb-icon {
  background: red;
  font-size: 60px;
  border-radius: 50px;
}
Diviのトップへ戻るボタンをCSSでデザイン変換

このようにデザインが変わります。
アイコンと組み合わせれば、

Diviのトップへ戻るボタンをCSSでデザイン変換2

このようにデザインを変えることができます。

ちなみに動画で使われたコードはこちらです。

.et_pb_scroll_top:before {
  content: "\e039";
}

.et_pb_scroll_top.et-pb-icon {
  background: #ff6a88;
  font-size: 50px;
  border-radius: 30px;
  padding: 3px 6px 6px 3px;
  right: 15px;
  bottom: 234px;
}

いかがだったでしょうか?
是非試してみてください。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です