【Gush2】モバイル画面用に、サイドバーの検索窓の幅を画面幅に合わせました。カスタマイズってほどじゃないけど書いとこ。
スマホ画面で、サイドバー広告を中央寄せ表示に変えたら、検索窓の左寄せが気になってしまったので、修正しました。
検索窓は、外枠と文字入力部分とボタンの3パーツでできているので、意外と調整が難しいのです。
「中央寄せ」にしたら3パーツが重なって真ん中に来ちゃうはずなので、3つまとめた形で指定しなきゃダメだと思うのだけど、そのやり方がわからなかったので、「中央寄せ」はあきらめました。
で、検索窓を画面幅いっぱいに広げることにしました。
1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 |
/* 検索フォーム */ #searchform { margin-bottom: 24px; width: 98%; background: #fff; padding: 5px 0; border: 1px solid #ccc; border-radius: 5px; } #searchform input[type="text"] { height: 24px; float: left; margin: 0; width: 84%; border: 1px solid #fff; padding: 0 0 0 5px; font-size: 15px; } |
もともとの数値は、枠が298px、テキスト入力部分が250pxです。PC画面のサイドバー幅は300pxとコメントで書いてあったので、そこから計算して98%と84%にしてみました。
タブレットの幅広画面だとボタンが真ん中に寄りすぎると思って、ボタンを右寄せにすることも試みたのですが、背景色のグレーが見えちゃったりして、どうにもうまくいかなかったので、あきらめました。
もともとの値が相当計算された値だと思うので、修正は少ないほうがいいだろうし、ということで「pxを%にするだけ」に落ち着きました。
Gush2は、コードの構成がわかりやすいですね。日本語コメントが適切に入っているので、理解するのが楽です。修正箇所を簡単に探せます。こういうコードだとカスタマイズを楽しめます。ほんと良いテーマです。
こちらも合わせてご覧ください。(2015/5/3 記)
検索フォームの文字「キーワード検索」を「サイト内検索」に変える方法
検索フォームの文字「キーワード検索」を「サイト内検索」に変える方法
この記事へのコメントはこちら