あれ、TOPに戻るボタンがテンプレートのままだな？
Webディレクターの自己学習として始めたWordpressによるブログ制作ですが、TOPページ、ヘッダーやフッターの表示、サイドバーの調整など課題だらけの数日。
SANGOのテンプレートを調整してデザインのトンマナなども整えられた！と思った時に１つ問題が。
TOPへ戻るボタンの色が、デフォルトのブルーのままでした。
今回はこちらの解決方法を解説します。
- WordPressでTOPに戻るボタンがデフォルトのままになってしまう原因
- デザインの変更方法と手順
目次 非表示
TOPへ戻るボタンとは？
SANGOでは画面をスクロールすると、右下に「TOPへ戻る」ボタンが表示されます。
このボタンは長い記事でもページ上部へすぐ戻れるため、ユーザビリティ向上に役立つ機能です。ただ、色味がデフォルトのままだとサイトのトンマナと合わず、何とか調整したいところ。
修正前
修正後
解決方法は？
管理画面から
外観
↓
カスタマイズ
↓
SANGOオリジナル機能
↓
トップへ戻るボタン
を開きます。ボタン色やスマホで表示するかどうかの変更が出来ました。
おすすめのカラーコード
「TOPへ戻る」ボタンは、サイト全体のデザインに合わせた色を選ぶことで統一感が生まれます。迷った場合は、以下のカラーがおすすめです。このサイトは③を使っています。
① ネイビーブルー（おすすめ）
カラーコード： #2563EB
信頼感や清潔感があり、IT・Web系のブログと相性抜群です。Web制作会社やSaaS企業でもよく使われる定番カラーで、長く運営するブログにもおすすめです。
② エメラルドグリーン
カラーコード： #10B981
落ち着いた印象を与えつつ、「成長」や「前向きさ」を感じさせるカラーです。転職やキャリア、副業系のブログによく合います。
③ ダークグレー
カラーコード： #374151
シンプルで高級感のあるカラーです。主張しすぎず、洗練されたデザインに仕上げたい方におすすめです。
④ インディゴ
カラーコード： #4F46E5
少しモダンな雰囲気を演出できるカラーです。Web・デザイン関連のブログや、スタイリッシュなサイトデザインによく合います。
まとめ
今回のポイントは、以下の通りです。
- SANGOのデフォルトの色が合わず、追加CSSで色味の調整をした
- カスタマイズのSANGOオリジナル機能で更新した
見直すと設定がうまくできてない部分を多く発見するから、アップ後のチェックはマストですね。
