こんにちは。
Diverを使っている方なら必ず「？」と思う検索ボタンについてです。
気になりますよね～、どうしても。
デフォルトでは、検索ボタンだけ紺色なんです。
↑ こんなふうにね。
そこで、「検索ボタンの色を変えたいな」と思って、ダッシュボードのカスタマイズ欄を探しても、
「検索ボタンの色だけ項目が無い」
「どこから変えたら良いのか分からない」
という壁にぶつかるのです。
そうなんです。
カスタマイズには、検索ボタンの色を変える項目はないのです。
変更するには、CSSコードを入れなければならないのです。
※バージョン4.6.5の時点では、変更ボタンはありませんでしたが、
現在バージョン4.8.0に大幅にアップデート中のようですので、
もしかしたら簡単に変更できるようになるかもしれませんね。
CSS？ 何それ。難しいんじゃない？
と思われたあなた。
大丈夫です。簡単です。
PCに弱い私でもできたくらいなので大丈夫です。
コピペするだけのコードを載せておきますので、
お好きな色コードを追加して貼り付けるだけです。
Diver検索ボタンの色を追加CSSで変更する方法
難しいことはいいから変更方法だけ知りたいという方は以下の手順で操作してください。
ダッシュボードから、「外観」→「カスタマイズ」→「追加CSS」を開けましょう。
次に、下記のコードを、「追加CSS」にコピペしましょう。
その際、事前にバックアップを取ることと、子テーマの使用をおすすめします。
カラーコードはお好みで変更しないと、デフォルトの＃3c74adのままです。
最後の「#〇〇」部分に、お好きなカラーコードを半角で入力するだけです。
入力したら、上の公開ボタンを押しましょう。
カラーコードは下記サイトをご参考にしてみてください。
Diver公式サイトにも検索ボタンのカラー変更方法が書いてあります。
https://tan-taka.com/diver-demo/cutomize/7416
Diverの公式サイト内では、サンプルページだけではなく、機能やカスタマイズについての情報も満載。
もし、公式サイト内を探しても解決しない問題が発生した場合は、サポートに問い合わせることも可能です。
Diver購入者には原則永久メールサポートのサービスが付いているので、問い合わせれば回答がもらえます。
私も２回ほど問い合わせをしましたが、ものすごい速さで回答が返ってきます。
このサイトで書かれてることは、カスタマイズする上で知っておくと便利なことばかりですので、一度目を通しておくとよいと思います。
検索ボタン おすすめの色は？
当ブログの全体の見た目はこんな感じですので、やはり検索ボタンはサイトの色のトーンに合わせたいところです。
見出しのカラーとは違う色にしたいけど、あまり違いすぎても今のように違和感がでてしまいます。
ブログ全体のイメージでトーンをそろえるほうがよいと思います。
CSSの追記はどこから入力するか
WordPressのテーマをカスタマイズをする際に、
「外観」→「テーマエディター」から子テーマのスタイルシートに追記する方法と、
「外観」→「カスタマイズ」→「追加CSS」を使う方法がありますが、
どっちに追記しても同じことです。
今回のように色の変更などは、変更後の見た目を確認しながらカスタマイズしたいですし、
カスタマイズから入力する方が簡単なので、いつも私はダッシュボードから操作しています。
というわけで、「追加CSS」に入力していきます。
追加CSS内に記述することで、色が合うかどうかの体裁をチェックしながら変更できます。
公開ボタンを押す前に、右側のプレビュー画面でイメージを確認して、OKなら公開ボタンを押します。
私はサイトの色に合わせて、こんな感じに変更しました。
全体的な色のトーンをカフェモカ配色にしたので、検索ボタンは茶色にしました。
ボタンの色を変えただけでサイトの体裁に統一感が出て、デフォルトの紺色から違和感なくなって大満足です。
ぜひ活用してみてください。
