2017-03-20

サイト内検索窓に設定したフォントが継承されない時の対処法

はじめに

ウェブサイトでは一般的にトップページに新着記事が数件表示されていて、サイドやグローバルメニューに各カテゴリーの一覧やサイトマップへのリンクがあると思います。しかし、記事の量が多い場合やカテゴリー分けが細かいなど、それだけでは見たい記事にたどり着くことは難しい場合もあります。

そんな時に役に立つのはサイト内検索です。これも多くのサイトに設置されていると思います。このサイトにもサイト内検索用の検索窓がサイドバー下につけてありますが、最近ふと、検索窓に入力したフォントがサイト全体に適用されているフォントと違うことに気がつきました。

form内の部品に入力された文字にフォントは継承されない

ちょっと調べてみると、formタグ内の見出しにはbodyタグに指定してあるフォントが適用されているようですが、検索窓のtextタイプのinputに入力された文字に対しては、フォントが適用されていないようでした。

わかりやすいフォントに変えてみて比較します。

textへのfont-familyの継承

ださいフォントで有名(らしい)なcomic sansをbodyのフォントに割り当てていて、日本語には対応していないので日本語は変わっていませんが、右側の検索窓に入れた「CentOS」と左側の記事のタイトルの「CentOS」の書体が違う事がわかります。

ほかのinput部品でも試してみます。textareaにしてみるとどうでしょう。

textareaへのfont-familyの継承

レイアウトが崩れているのは気になさらず。こちらもやはりフォントは適用されていません。selectならどうでしょうか。

selectへのfont-familyの継承

これもやはり適用されていませんでした。

form部品に直接フォントを指定する

ではどうすれば良いかというと、ただform部品に対して直接フォントをCSSで指定してやれば良いだけです。input、select、textareaそれぞれの持つidやclassに対してfont-familyをCSSで指定してやります。

form部品へのfont-familyの適用

さいごに

ちょっといじれば解決する問題ではありますが、ページのデザインを隅々までこだわりたい人で、ここについて見落としている人がいればぜひこちらもお忘れなく。また、フォントを変えると検索窓のデザインも崩れる場合があるので、ウェブサイト制作の初めのうちにやっておけると良いですね。



コメントする(※は必須項目です)













画像認証