
さて、このブログも徐々に全体のイメージが整ってきたので、どうしても気になっちゃうアレ、検索ボタンのカラーを変更しちゃいます!
カスタマイザーにそんな項目あったっけ…?
・・・はい、ありません。(diverバージョン4.6.5の時点では)
検索ボタンの色を変更したかったら、CSSで色変更の指定をかける必要があるんですよね。
CSS…?それって難しいんじゃないの?
大丈夫、大丈夫。
きじとらちゃんが【コピーするだけのコード】を用意してくれたから、やり方はとっても簡単。
早速変更方法を紹介していきまーす。
Contents
Diver検索ボタンの色を追加CSSで変更する方法
難しいことはいいから変更方法だけ教えてちょーだい!という方は下記のコードを、
「外観」⇒「カスタマイズ」⇒追加CSSにコピペしましょう。
(※事前にバックアップと子テーマの使用をお忘れなく)
/*検索ボタン色*/
input[type="submit"].searchsubmit {
background-color: #3c74ad;
}
検索ボタンの色を迷っているなら、
この記事内で紹介してるサイトも活用してみてくださいね。
Diverの公式ページで検索ボタンのカラー変更方法書いてるやん!
Diverの公式ページfa-external-link内では、サンプルページだけではなく、機能やカスタマイズについての情報も満載。
実はこのカスタマイズを知る前に、「あぁ、検索ボタンの色はカスタマイザーで変更できたら楽なのにな」なんて思って、高木さん(Diverの開発者)に要望を挙げたわけです。メールで。
(決して上からではないですよっ?!)
そしたら、なんとその日のうちにお返事がっ…!
(神!ありがたや~)
そう、Diver購入者には「原則永久メールサポート」サービスが付いてるんです!
でもまさか、要望あげただけでお返事いただけるとは!
しかも、公式ページ内にちゃんと【検索ボタンのカラー変更方法】が記載されてるのに、見逃してしまってごめんなさいぃぃぃぃ!
(* > <)⁾⁾
検索ボタンは何色がおすすめ?見出しとトーンを合わせるといい感じ
この記事を書いてる現時点で、当ブログの全体の見た目はこんな感じ。
検索窓の位置はこれから変更する可能性もあるけれど、ボタンの色を何色にするか迷うとこ。
見出しのカラーとは違う色にしたいけど、あまり違いすぎても今のように違和感がでてしまいます。
ブログ全体のイメージでトーンを合わせて、なじみの良い色・・・
よっしゃ!俺っちに任せろ!
…ポンポンポンポンポン
Ω\ζ°)チーン
よし、#88BBDDにだな!

確かにいい感じの色かも。
色をカスタマイズしたい時、CSSの追記はどこに入力する?
WordPressのテーマをカスタマイズをする際に、
「外観」⇒「テーマエディター」から子テーマのスタイルシートに追記する方法と、
「外観」⇒「カスタマイズ」⇒「追加CSS」を使う方法がありますが、
どっちに追記しても同じことです。
今回のように色の変更などは、変更後の見た目を確認しながらカスタマイズしたいので、私は「追加CSS」に入力しています。



公開ボタンを押す前に、右側のプレビュー画面でイメージを確認して、OKなら公開ボタンを押します。
こんな感じになりました。
まだコンテンツが少ないので、現時点で検索窓を使う人もいないと思うんだけど、ボタンの色を変えただけで違和感なくなって大満足です。
ぜひ活用してみてくださいね~!
