F.Ko-Jiの「一秒後は未来」

梅酒.inがスマートフォンから閲覧・投稿しやすくなりました

今年も梅酒の季節になりましたね、というわけで、数年前からいつかやろういつかやろうと思って手をつけていなかった「梅酒.inのスマートフォン向け対応」を一夜漬けでおこないました。

umeshu-in-responsive-01.jpg

↑ レスポンシブWebデザインでやってます。

umeshu-in-responsive-02.jpg

↑ サイドバーのコンテンツは、見出しをタップする方式に。

今回の作業では、ざっくりと以下のようなCSSの追加・修正をおこないました。あとjQueryをちょろっと。

  • 「@media all and (max-width: 480px) 」でレスポンシブの制御。
  • 全体的に float しないように。
  • ブロック要素の幅を100%に。
  • サイドバーのコンテンツはページ下部にまとめて見出しのみ表示。
  • 見出しをタップすればコンテンツをトグル表示。
  • 画像サイズの調整。
  • ページによっては画像を中央表示。
  • PC版ではロゴの下にあるヘッダーのグローバルメニューを、最上部に position:absolute; で絶対配置。
  • グローバルメニューは1行でおさまるように、はみ出た部分は「More」をタップでトグル表示。
  • margin, padding の調整もろもろ。

これでスマートフォンからも閲覧したり投稿したりしやすくなったかと思いますので、梅酒を飲んだら感想を投稿したり、飲みたい梅酒が飲める店を検索してみたり、今年つくった自家製梅酒があればレシピを登録したりしてみていただけると嬉しいです。

TwitterやFacebookのアカウントでログインもできますので、お気軽にどうぞ。どこか表示のおかしいところがあったら、Twitterなどで教えていただけると助かります!

» 梅酒.in – 美味しい梅酒をみつけよう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など