ブログのカスタマイズの時には色々なところを注意深くみて、問題が起こっていないかを確認しているつもりですが、まだまだ見落としがある @azur256 です。

ブログの検索ボックスがはみ出しているらしい

検索機能は Stinger 3 の標準ではなく、以下のように Google カスタム検索をするようにカスタマイズしています。

[WP] Stinger 3 の検索ボックスを Google カスタム検索に変更しました

しかし、このカスタマイズのためにモバイルブラウザから見ると検索ボタンがはみ出してしまっているそうです。以下のブログで教えていただきました。
googleカスタム検索をwordpressに設置する場合、スマホ用タグで幅がはみ出す場合 – ブラックバスを引っ張り出せ！

実際に iPhone で見てみるとこんな風にはみ出しています。

原因と対策

モバイルブラウザの場合、横幅が 300px になっているので、アイコンサイズ 50px をすべて表示させるためには、表示開始位置を変更する必要があるのに変更していませんでした。こちらが元々の CSS です。



smart.css に関してだけ表示開始位置を 250px に変更します。


これできちんと表示されるようになりました。



とくにこういう表示不正はなかなかチェックしきれませんね。何かよい方法をご存知でしたら、ぜひ教えてください。

WordPress 関連のエントリ

インストールや設定変更とデータ移行

プラグイン

バージョンアップ

カスタマイズ

Stinger 3関連

チューニング

MAMPを使ったバックアップサイトの構築

開発関連

---

最後まで読んでいただきありがとうございます。

左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします

RSSリーダへの登録は こちら からどうぞ。