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

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

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

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

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

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

まずはWordPressのダッシュボードから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;
}

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

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

Diviの最新情報を知りたいなら、このノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

https://tofulab.app/join/

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通