about

sogo  
fukidasi

  social

Count per Day

  • 767現在の記事:
  • 438今日の閲覧数:
  • 6現在オンライン中の人数:

WordPress小技 SearchBOXから検索の文字を消す

WordPressではデフォルトの検索フォーム(SearchBOX)をウィジェットからサイドバー等に追加
すると、「検索ボタン」の他にもう一つの検索というテキストが左側に表示されてしまいます。

つまり、検索という文字が2つになってしまい、見た目的にもなんとなくみっともないのでは・・・・・

↓ こんな感じになってしまうと思います。




しかし、このテキストを外そうにも、どのPHPを見ても ” 検索 ” らしいの記述が見当たらないのです。
(どこかにはあると思うのですが・・・・私には見つけ出せません)

でも、ブラウザ上からソースを確認してみると、screen-reader-textというクラス内に ” 検索 ” の文字が挿入されているのがわかりました。


CSSで検索のテキスト表示を外す


そこで、CSSに無理矢理?記述をして、このやっかいな表示を制御させてみたいと思います。

.screen-reader-text {
position: absolute;
left: -9999px;
}

はい、上記コードを追加するだけで ” 検索 ” のテキストは見事に消え去ってくれました。

しかし・・・・テキストが消えた分だけBOX全体の表示が小さくなって左に寄ってしまいます。



CSSで検索BOXの見た目を変更する


そこで、さらなるコードをCSSに追加記述。

#s{/* 検索文字を入力する部分 */
  width:180px;
  height:20px;
}
#searchsubmit{/* 右側の[検索]ボタン */
  width:30px;
  height:20px;
}

(もちろん、お好みで用意したボタンを ” background-image ” で指定することもOKです。)

はい、これでどうにかテキストが外れ綺麗に表示されるようになりました(各数値は任意です)






おそらく、どのテーマでも通用すると思いますが、お悩みだった方は、是非お試しください。


Pocket

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。