【ワードプレスDIVER】トップへ戻るボタンが出ない時の対処法をご紹介！

こんにちは！月間最高16万PVの、さはら（＠sahara_momo）です。

ワードプレステーマDIVERでは『 トップに戻るボタン 』がデフォルトで表示されてるし、いざボタンが無くなったら、どうやって戻したらいいか分からんよね？

この記事ではブログに『 トップへ戻るボタン 』の表示方法と、ボタンのカスタマイズ方法についてご紹介します。

ただボタンの表示とカスタマイズには、注意点もあるので一緒に見ていきましょう。

【ワードプレスDIVER】トップへ戻るボタンの設置方法

DIVERでは『 トップへ戻るボタン 』はワードプレスのメニューから簡単に設置することができるねん！

ワードプレスメニューの外観から変更する

まずはワードプレスメニューの『 外観 → カスタマイズ 』をクリックやで。

次にカスタマイズメニューの中の『 メイン設定 』をクリックするねん。

そしたら下の画面になるねん。

ワシの記事からボタンがなくなってる原因は、上の画像の赤丸で囲った箇所のチェックが外れてる事やってん。

そやし、そこにチェックを入れるで！

チェックを入れたら最後に『 公開 』をタップして完了やで！

公開したらプレビューで確認やで！

ちゃんと右下に『 トップへ戻るボタン 』が表示されてたらOK！

【ワードプレスDIVER】トップへ戻るボタンのカスタマイズ方法

DIVERでは『 トップへ戻るボタン 』は背景色と文字色を変えることができるねん！

デフォルトではグレーのボタンが設置されてるけど、ちょっと地味よね（笑）

『 自分のサイトの色とちょっと違うかな？ 』

『 他と一緒やし、自分の色を出したいな。』

って思う人はカスタマイズしてみてね。

『トップへ戻るボタン』の背景色をカスタマイズする

まずは先ほどと同じように『 外観 → カスタマイズ 』をクリックやで！

次に、『 デザイン設定① 』をクリック。

『 トップスクロールボタン 』の『 背景色 』をクリックして、好きな色を選んでね！
fa-exclamation-triangle設定を変更した後は必ず『 公開 』をクリックするんやで！

今回はとりあえず派手目な『 ピンク 』にしてみた（笑）

プレビューを見てみるとこんな感じ（笑）

目立ってええけど派手やね（笑）

他にも好きな色に変えてみる！

どうかな？

自分のサイトにあった色を見つけてね！

『トップへ戻るボタン』の文字色をカスタマイズする

『 トップスクロールボタン 』の『 文字色 』をクリックして、好きな色を選んでね！
fa-exclamation-triangle設定を変更した後は必ず『 公開 』をクリックするんやで！

変更後はこんな感じ！

なんか適当な組み合わせやし、微妙な感じになったな（笑）

自分にあった好きなボタンを作ってね！

【ワードプレスDIVER】トップへ戻るボタンが出ない時の対処法をご紹介！まとめ

最後まで読んでいただいてありがとさんやで！

今回はワードプレスのテーマ、DIVERのトップへ戻るボタンが出ない時の対処法をご紹介しました。

こんな感じで細かいところまでカスタマイズできるDiverはポイント高いよね。

ユーザビリティを高くするためにも、絶対に設置しとかなアカンで！

簡単にできる事ばっかりやし、サクッと終わらせてブログ書きましょね！

これ以外にもワシが遭遇したアクシデント？的なことを書いた、

サムネイル画像がぼやける時の対処法
動くマーカーが出ない時の対処法
目次が表示されない時の対処法

など、該当するもんがあったら参考にしてやで！

これからブログで稼いでいこうとしてるんやったらASPの登録は必須！

ワシも使いまくってるおすすめASPを2つ紹介しとくわな！

まだの人は無料で登録できるし損はないで！