梅酒.inがスマートフォンから閲覧・投稿しやすくなりました
今年も梅酒の季節になりましたね、というわけで、数年前からいつかやろういつかやろうと思って手をつけていなかった「梅酒.inのスマートフォン向け対応」を一夜漬けでおこないました。
↑ レスポンシブWebデザインでやってます。
↑ サイドバーのコンテンツは、見出しをタップする方式に。
今回の作業では、ざっくりと以下のようなCSSの追加・修正をおこないました。あとjQueryをちょろっと。
- 「@media all and (max-width: 480px) 」でレスポンシブの制御。
- 全体的に float しないように。
- ブロック要素の幅を100%に。
- サイドバーのコンテンツはページ下部にまとめて見出しのみ表示。
- 見出しをタップすればコンテンツをトグル表示。
- 画像サイズの調整。
- ページによっては画像を中央表示。
- PC版ではロゴの下にあるヘッダーのグローバルメニューを、最上部に position:absolute; で絶対配置。
- グローバルメニューは1行でおさまるように、はみ出た部分は「More」をタップでトグル表示。
- margin, padding の調整もろもろ。
これでスマートフォンからも閲覧したり投稿したりしやすくなったかと思いますので、梅酒を飲んだら感想を投稿したり、飲みたい梅酒が飲める店を検索してみたり、今年つくった自家製梅酒があればレシピを登録したりしてみていただけると嬉しいです。
TwitterやFacebookのアカウントでログインもできますので、お気軽にどうぞ。どこか表示のおかしいところがあったら、Twitterなどで教えていただけると助かります！
著者について
コメントを残す