【Gush2】モバイル画面用に、サイドバーの検索窓の幅を画面幅に合わせました。カスタマイズってほどじゃないけど書いとこ。

   2015/05/03

スマホ画面で、サイドバー広告を中央寄せ表示に変えたら、検索窓の左寄せが気になってしまったので、修正しました。
検索窓は、外枠文字入力部分ボタンの3パーツでできているので、意外と調整が難しいのです。
「中央寄せ」にしたら3パーツが重なって真ん中に来ちゃうはずなので、3つまとめた形で指定しなきゃダメだと思うのだけど、そのやり方がわからなかったので、「中央寄せ」はあきらめました。
で、検索窓を画面幅いっぱいに広げることにしました。

もともとの数値は、枠が298px、テキスト入力部分が250pxです。PC画面のサイドバー幅は300pxとコメントで書いてあったので、そこから計算して98%と84%にしてみました。
タブレットの幅広画面だとボタンが真ん中に寄りすぎると思って、ボタンを右寄せにすることも試みたのですが、背景色のグレーが見えちゃったりして、どうにもうまくいかなかったので、あきらめました。
もともとの値が相当計算された値だと思うので、修正は少ないほうがいいだろうし、ということで「pxを%にするだけ」に落ち着きました。

Gush2は、コードの構成がわかりやすいですね。日本語コメントが適切に入っているので、理解するのが楽です。修正箇所を簡単に探せます。こういうコードだとカスタマイズを楽しめます。ほんと良いテーマです。

こちらも合わせてご覧ください。(2015/5/3 記)
検索フォームの文字「キーワード検索」を「サイト内検索」に変える方法
  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。