検索ウィンドウと月選択ウィンドウ
WordPressテーマ Cocoonの「検索ウィンドウ」と「月選択ウィンドウ」のカスタマイズについてまとめてみました。
なお、ウィンドウをフォーカスしている場合のカスタマイズとなります。
テーマCocoonの検索ウィンドウと月選択ウィンドウ（フォーカス時）
WordPressテーマ Cocoonで使われている「検索ウィンドウ」のフォーカス時は、次の様になっています。
また、WordPressテーマ Cocoonで使われている「月選択ウィンドウ」は、次の様になっています。
検索ウィンドウと月選択ウィンドウのカスタマイズ（フォーカス時）
今回のカスタマイズ内容は、「検索ウィンドウ」または「月選択ウィンドウ」をフォーカスしたときに、ウィンドウの枠線のカラーを変更すると言う単純なものです。
カスタマイズ内容
「人気記事ランキング」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ●検索ウィンドウと月選択ウィンドウの枠線カラー（フォーカス時）
************************************/
.search-edit:focus{ /*検索ウィンドウ（フォーカス時）*/
outline: none;
border-color: #fe619a; /*フォーカス時の枠カラー*/
}
#archives-dropdown-3:focus{ /*月選択ウィンドウ（フォーカス時）*/
outline: none;
border-color: #fe619a; /*フォーカス時の枠カラー*/
}
カスタマイズ後の検索ウィンドウと月選択ウィンドウ（フォーカス時）
今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「検索ウィンドウ」のフォーカス時は、次の様になりました。
また、WordPressテーマ Cocoonで使われている「月選択ウィンドウ」は、次の様になりました。
（※Internet Explorer、Microsoft Edgeは非対象）
最後に
今回、「検索ウィンドウ」と「月選択ウィンドウ」のフォーカス時の枠線のカラーを変えただけのカスタマイズですが、もっと突っ込んでカスタマイズを行うとウィンドウ自体のデザインを変更するのも良いと思います。
ただ自分の場合、この長方形のデザインよりも良いデザインが作れそうも無いので、デザインについてはデフォルトで使っていきます。
コメント