スマートフォンサイトを作ろう!(7)修正そして修正

0
    JUGEMテーマ:wordpress

    スマホサイト初アップロードで出た不具合の数々をつぶしてゆきます。

    簡単なところから行くと、メニューの表示内容がおかしかった件、これはローカルの開発環境ではなくサーバの実環境のWordPressでメニューの設定をするのを忘れていたためでした。
    ローカルと同様にslider用のメニューを作ってやると、問題なく表示されました。

    問題はここから。
    ・タイトルの文字が小さい。
    ・でもサブタイトルの文字は普通に大きい。
    ・挨拶と更新情報の文字は、まあ大きい
    ・でもサムネール画像の下に書いた文字は全部ちっさい
    ・マージン関係もあらかた小さい
    ・グローバルメニューまで小さい。
    ・これら全部が、FireFox上のシミュレータとは体裁が全然違う。

    まずはとにかくシミュレータが役に立たないことは良くわかったので、実機のスマホを使った開発に切り替えます。
    具体的には、FFFTPを立ち上げっぱなしにしておいて、コードをいじったら即座にサーバに上げて、表示をスマホで見る、という段取りです。体裁の問題なのでいじるのはほぼstyle.cssだけでいいと思います。

    ではまずタイトル文字から。
    色々試行錯誤した結果から言いますと、えー、css内にあったコメントのせいで、h1タグに関する設定が読み込まれていなかったのが原因でした。PCに戻り、FireBugで実際に読み込まれているcssを確認したことで判明しました。やれやれ、要らないコメントは全部きれいに消して、さあこれでOK!
    と思ったら、あれ?反映されない?
    再度FireBugで確認したところ、今度は修正したcssが読み込まれていない。リロードが甘かったようです。
    「Control+F5」でスーパーリロードしたところ、無事に反映されました。
    でもいちいちControl+F5を押すのも面倒だな、第一スマホでスーパーリロードってやれんのか?と思っていたら、見つけました。WordPressのcssを呼び出す部分に細工をすることで、普通にリロードするだけで毎回自動的に最新のcssが読み込まれるようにすることができます。詳しくは
    kachibito.net
    さんに書いてありましたので、そちらもご覧ください。

    で、タイトル文字ですが、解決したかと思ったら大間違い。まだまだ深い謎があるようです。
    またまた試行錯誤の結果、変な現象にたどり着きました。
    h1タグのdisplayをblock, inline, inline-blockと変えると文字サイズが変わるのです。
    もう何だか意味不明です。
    ブラウザのデフォルトが意地悪しているかと思ってhtml5Doctorのリセットcssを使ってみましたが、変化はありません。
    仕方がないのでdisplayはinline-blockと決めて、文字サイズを調整しました。
    文字サイズの指定方法もpxをやめてremにしてみました。
    それと、スマホで長いタイトルを1行で表示するとどうしても文字が小さくなってしまうので、h1タグの中身をbloginfo('name');で出力するのをやめ、「ペーパークラフトが</br>好きなんです」と直接打ち込むことにしました。
    これでやっとこさ何とか調整が利くようになりました。

    次に、タイトル横のメニューボタン。
    これはcssで描いているわけですが、この線の幅やらマージンやらを全て4倍してやりました。これでOK。
    タイトルが2行になった分、マージンを調整してやって完了です。
    スライドメニューの中身はまた後ほど。

    次はトップ画像です。
    これは、width:100%を指定していた相手が画像そのものではなく、画像を含んだdiv要素だったのが原因のようです。div要素のid指定の横に「img」と足してやり、height:auto;としてやったところ、画面横幅ぴったりに表示されるようになりました。

    次に諸々の文字サイズ。
    もうこれはほんとに試行錯誤です。詳細は勘弁してください。
    ばくっと言うと、html,body要素のfont-sizeを48pxに上げてやり、あとはremで調整しました。

    次にメニューの幅。これはjPanelMenuの呼び出しオプションで、
    openPosition: '70%'
    としてやることで、絶対値ではなく画面幅基準で開いてくれるようになりました。
    併せて、メニューの上下のパディングも調節しました。

    それから、
    コメント欄の文字も大きくしました。
    キャプチャ画像も大きくしました。
    コメント欄の枠も大きくしました。
    管理人紹介のテーブルの幅も調節しました。
    管理人の似顔絵画像も大きくしました。

    そして最後に、ちっちゃくなっていたgoogleの広告も全部削除し、代わりにフッターにレスポンシブデザイン版のgoogleの広告を入れなおしました。


    終わりました。

    お疲れさまでした。

    あとは更新情報を書き込んで終了です。


    ということで、このシリーズはこれで終了です。
    皆様、次の企画をお楽しみに!
     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天