Diverの検索ボタンの色を変更するカスタマイズ方法!永久サポートのありがたみ。

さて、このブログも徐々に全体のイメージが整ってきたので、どうしても気になっちゃうアレ、検索ボタンのカラーを変更しちゃいます!

カスタマイザーにそんな項目あったっけ…?

 

・・・はい、ありません。(diverバージョン4.6.5の時点では)

検索ボタンの色を変更したかったら、CSSで色変更の指定をかける必要があるんですよね。

ぶち

CSS…?それって難しいんじゃないの?

 

ちゃとら

大丈夫、大丈夫。

きじとらちゃんが【コピーするだけのコード】を用意してくれたから、やり方はとっても簡単。

早速変更方法を紹介していきまーす。

 

Diver検索ボタンの色を追加CSSで変更する方法

難しいことはいいから変更方法だけ教えてちょーだい!という方は下記のコードを、

「外観」⇒「カスタマイズ」⇒追加CSSにコピペしましょう。

(※事前にバックアップと子テーマの使用をお忘れなく)

きじとら
あ、カラーコードはお好みで変更しないと、デフォルトの#3c74adのままです。(入力は半角で)
/*検索ボタン色*/
input[type="submit"].searchsubmit {
    background-color: #3c74ad;
}

 

検索ボタンの色を迷っているなら、

この記事内で紹介してるサイトも活用してみてくださいね。

きじとら
どうして検索ボタンの色が変更できるのか理解できると、他の部分のカスタマイズにも活かせるようになってきます。

Diverの公式ページで検索ボタンのカラー変更方法書いてるやん!

Diverの公式ページ内では、サンプルページだけではなく、機能やカスタマイズについての情報も満載。

Diver公式ページ画像

実はこのカスタマイズを知る前に、「あぁ、検索ボタンの色はカスタマイザーで変更できたら楽なのにな」なんて思って、高木さん(Diverの開発者)に要望を挙げたわけです。メールで。

(決して上からではないですよっ?!)

そしたら、なんとその日のうちにお返事がっ…!

メールの返信画面
(神!ありがたや~)

そう、Diver購入者には「原則永久メールサポート」サービスが付いてるんです!

でもまさか、要望あげただけでお返事いただけるとは!

しかも、公式ページ内にちゃんと【検索ボタンのカラー変更方法】が記載されてるのに、見逃してしまってごめんなさいぃぃぃぃ!

(* > <)⁾⁾

参考ページ(Diverデモサイト内)
ちなみにこのページで書かれてることは、カスタマイズする上で知っておくと便利な重要ポイントです!

検索ボタンは何色がおすすめ?見出しとトーンを合わせるといい感じ

この記事を書いてる現時点で、当ブログの全体の見た目はこんな感じ。

トップページデザイン

検索窓の位置はこれから変更する可能性もあるけれど、ボタンの色を何色にするか迷うとこ。

見出しのカラーとは違う色にしたいけど、あまり違いすぎても今のように違和感がでてしまいます。

ブログ全体のイメージでトーンを合わせて、なじみの良い色・・・

 

はち

よっしゃ!俺っちに任せろ!

 

…ポンポンポンポンポン

Ω\ζ°)チーン

 

 

よし、#88BBDDにだな!

 

 

きじとら
見出しに設定したカラー(#81D8D0)に近すぎず、遠すぎず…

確かにいい感じの色かも。

 

色をカスタマイズしたい時、CSSの追記はどこに入力する?

WordPressのテーマをカスタマイズをする際に、

「外観」⇒「テーマエディター」から子テーマのスタイルシートに追記する方法と、

「外観」⇒「カスタマイズ」⇒「追加CSS」を使う方法がありますが、

どっちに追記しても同じことです。

今回のように色の変更などは、変更後の見た目を確認しながらカスタマイズしたいので、私は「追加CSS」に入力しています。

WordPressダッシュボードの追加CSS
検索ボタンの色変更cssを追記

ブルー
追加CSS内に記述することで、色が合うかどうかチェックしながら変更できるんだな

公開ボタンを押す前に、右側のプレビュー画面でイメージを確認して、OKなら公開ボタンを押します。

ブログデザイン

こんな感じになりました。

まだコンテンツが少ないので、現時点で検索窓を使う人もいないと思うんだけど、ボタンの色を変えただけで違和感なくなって大満足です。

ぜひ活用してみてくださいね~!

きじとら
高木さん、ありがとうございましたm(_ _ )m
このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事