Web

Most Viewed Posts

WordPressでのレスポンシブ化に関して、改善したところを挙げてみる

WordPressでのレスポンシブ化に関して、改善したところを挙げてみる

相変わらず旧サーバのエラーページに繋がったりしていてゲンナリのやまぐろ(@yamaguro)です。ゲンナリしつつもレスポンシブ化のためにあれこれやっていたので、ここに残しておこうと思います。利用しているテーマ自体がレスポンシブに対応しているので、大きくいじる必要は無いはず!ということで、まずは目に付くところから修正してみました。


Responsive Design Platform Measurements / UXmosis

結構気になっていた、画像やら動画やらがブラウザの画面からはみ出る現象。まずはこれを修正。

動画も画像も縮小はCSSで

調べてみた限り、スタイルシートでサイズなどを指定する方法が一番簡単そうだったので、私もCSSで対応しました。

【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出さずに表示させる方法 | HaLPosT【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出さずに表示させる方法 | HaLPosT

▲こちらの記事を参考にし、無事youtubeの動画が縮小表示されるようになりました。動画に関してはwidhtを100%で指定してあげれば良さげな感じか。毎回動画を埋め込む度にdivで囲む必要がありますが、Wordpressユーザー的に必須なプラグイン「AddQuicktag」を利用すれば苦にもなりません。Wordpressマジ便利!

画像に関してはjqueryを利用した方法もあるようですが、こちらもCSSで対応しました。大きい画像は縮小されるように、小さい画像はそのまんま表示されるようなっていると思います。たぶん。

とにかく、スマートフォンでありがちな「画像がはみ出てるせいで下方向へスクロールし辛くなる現象」は無くなったはず!まだiPhone4でしか確認できていませんが、少なくともiPhone4に関しては問題ない感じですね。

以下の記事を読むと、レスポンシブデザインについて知りつつ作業できて捗ります▼

レスポンシブwebデザインで制作する時のポイント │ Design Spiceレスポンシブwebデザインで制作する時のポイント │ Design Spice

今後やりたいこと

・フォントまわりを見やすくする(size,lineheightとか)

・タブレットで見たときの表示を良い感じにする

・現状モバイルもヨコ320pxを基準に合わせているだけなので、もうちょい色んなサイズに対応するようにする (まずは480pxからやりたい)

変更、確認を繰り返す地味な作業になりそうですね。

所詮、趣味なブログなのでユーザビリティなんちゃらは余り気にすることはないのかも知れません。……でも(私がやりたくなっちゃったから)しょうがないですよね!なんだかブログがメモ帳みたいになってきていますが、それもしょうがないですよね!

頑張れメジャーリーガー。

Return Top