以前にTwenty Fourteenの配色を変更する記事を書いたが、今回は検索枠部分の背景色を変更してみた。
Twenty Fourteenの左サイドバー部分にある検索枠である。
デフォルトでは検索枠はほぼ透過しており、サイドバー部分の背景色が変われば検索枠部分も背景色が変わったかのように見える。
しかし、検索枠のみの配色を変えるには別の指定が必要なのである。
style.cssの編集
ほんの少しのコードなんだけど、意外にも解析が大変であった....primary-sidebar .widget input { background-color: rgba(100, 100, 100, 0.1); border-color: rgba(100, 100, 100, 0.2); color: #000; } |
本記事上部の画像の色設定と透過となっているので、適宜変更を。
感想
サイト内の情報量が膨大になった時に役に立つ検索機能。検索枠が目立つようになれば、使いやすいサイトとなるので、ぜひとも工夫を!!
関連記事

WordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。

レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。

Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。

Twenty Fourteenはデフォルト状態ではメインコンテンツ部分が若干狭いので、余白サイズを変更し横幅を広げるカスタマイズを紹介します。