Twenty Fourteenの検索枠の色変更

Twenty Fourteenの検索枠の背景色を変更以前に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をフォトログにカスタマイズ Twenty Fourteenをフォトログ的に使う
Twenty Fourteenのトップページに写真をきれいに並べてフォトログテーマ風にカスタマイズしました。写真ギャラリーとして使えます。
Twenty Fourteenの背景色を変更する Twenty Fourteenの背景色を変更する
WordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。
WordPressのTwenty FourteenにヘッダーにSNSアイコン画像を貼る Twenty FourteenのヘッダーにSNSアイコン設置
レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。
Twenty Fourteenのトップページをアイキャッチ画像と記事タイトルの一覧にするカスタマイズ Twenty Fourteenのトップをタイトル一覧にする
Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。
Twenty Fourteenのメインコンテンツの横幅を広げた Twenty Fourteenのコンテンツ部分横幅を広げる
Twenty Fourteenはデフォルト状態ではメインコンテンツ部分が若干狭いので、余白サイズを変更し横幅を広げるカスタマイズを紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>