【テーマ編集】検索窓search-boxの幅を縮めてボタンのズレを修正する
当サイトで愛用中の
TCDテーマ「Reviewer」のカスタマイズ例です。
編集するテーマ:Reviewer TCD026
編集するファイル:style_sp.css
サイトのかなめ
スマホ表示時のサイドバー機能を充実させよ~
今日はwidgetに検索BOXを設置してみよう。
…あれ?ボタンがズレた。助けて~ サーバーガール!
今日はwidgetに検索BOXを設置してみよう。
…あれ?ボタンがズレた。助けて~ サーバーガール!
サーバーガール
かなめちゃん、サイト装飾で困ってるならCSSを修正してみたら?
#search-boxの幅を調整する
1 2 3 4 5 6 7 |
/* search */ .widget_search #search-box, .widget_search #s { width:80%; margin:0 0px 5px 0; } .widget_search #search-btn input, .widget_search #searchsubmit { width:14%; } /* google search */ .google_search #search_input, .google_search #s { width:80%; margin:0 0px 5px 0; } .google_search input#search_button, .google_search #searchsubmit { width:14%; } |
width:80%; 2箇所を、
width:70%; に変更する。
⇓
1 2 3 4 5 6 7 |
/* search */ .widget_search #search-box, .widget_search #s { width:70%; margin:0 0px 5px 0; } .widget_search #search-btn input, .widget_search #searchsubmit { width:14%; } /* google search */ .google_search #search_input, .google_search #s { width:70%; margin:0 0px 5px 0; } .google_search input#search_button, .google_search #searchsubmit { width:14%; } |