2016/10/08
検索フォームを設置する時、いつも検索して調べたり、過去に制作したものを参考にしたりしているので。。。
テンプレートタグ
<?php get_search_form(); ?>
htmlとしては下記のように出力されます。
<form role="search" method="get" id="searchform" class="searchform" action="(サイトのURL)"> <div> <label class="screen-reader-text" for="s">検索:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="検索" /> </div> </form>
これに合わせてスタイルシート設定すれば、思い通りの検索フォームの完成です。
当サイトの検索フォームはテンプレートタグは使わず、以下の通り
テーマファイル
<div id="searchform_con"> <form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>" > <input type="text" value="" name="s" class="s" /> <input type="submit" class="searchsubmit" value="search" /> </form> </div>
CSS
#searchform_con{ width: 90%; height: auto; text-align: center; float: left; margin-left: 5%; margin-right: 5%; margin-bottom: 20px; background-color: #000000; } #searchform{ width: 100%; height: auto; text-align: center; padding-top: 20px; padding-bottom: 20px; } #searchform input[type="button"], #searchform input[type="submit"] { background-color: #FFF798; background-image: -webkit-linear-gradient(270deg,rgba(255,247,152,1.00) 0%,rgba(255,247,152,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,247,152,1.00) 0%,rgba(255,247,152,1.00) 100%); border: 1px solid #555555; padding-top: 5px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; font-size: 100%; color: #555555; cursor: pointer; width: 10%; } #searchform input[type="text"], #searchform input[type="email"] { padding-top: 5px; padding-right: 15px; padding-left: 15px; padding-bottom: 5px; border: none; font-size: 120%; background-color: #FFFFFF; width: 30%; } #searchform input:link , #searchform input:active { background-color: #EFEFEF; border: none!important; -webkit-box-shadow: 0px 0px 0px 0 #F4F4F4!important; box-shadow: 0px 0px 0px 0 #F4F4F4!important; } #searchform input:hover { filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80; transition: 1.0s; } #searchform a:focus, #searchform input:focus{ outline:none; }