スマートフォンサイトを作ろう!(5)色々な体裁を整える

0
    JUGEMテーマ:wordpress

    さてそろそろこの短期集中連載も終わりが近づいてきました。
    今回は、全体を眺めて、体裁のおかしいところを直していきます。

    ということで、全体を眺めてみたところ、次の5つの問題が見つかりました。

    (1) iPhone 3Gの画面サイズ(横幅320px)にすると、タイトルが長すぎて、メニューボタンが改行されてしまう。
    (2) トップページでいきなりブログが始まる。前にサイドバーにあったご挨拶を復活させたい。
    (3) iPhoneより幅が広い画面のスマホでは、サムネイル画像が左に寄ってしまう。
    (4) 逆に320pxだと拡大画像が右にはみ出してしまう。
    (5) コメント欄が右にはみ出している。

    では一つ一つ対応細かく見ていきましょう。


    (1) iPhone 3Gの画面サイズ(横幅320px)にすると、タイトルが長すぎて、メニューボタンが改行されてしまう。



    ご覧のとおりです。これは高度なことを言わなければ簡単です。20ptの文字サイズを18ptに落としてみましょう。
    するとこの通り、



    まあ、いいんじゃないでしょうか。


    (2) トップページでいきなりブログが始まる。前にサイドバーにあったご挨拶を復活させたい。

    写真は(1)を見て頂くとして、トップ画像とブログコーナーの間に、ご挨拶と更新情報を入れてやりましょう。
    以前サイドバーにあったコードをそのままコピペです。
    するとこんな感じ。



    なーんか、本文が真ん中に寄ってしまってますよね。マージン設定が大きすぎます。
    このご挨拶と更新情報は.information-containerというクラスにしてありますので、これに対してマージンを新たに定義してやりましょう。調べると現状は左右それぞれ4emもありましたので、両方とも1emにしてやります。するとこんな感じ。



    うーん、いいんじゃないでしょうか。


    (3) iPhoneより幅が広い画面のスマホでは、サムネイル画像が左に寄ってしまう。



    調べてみるとここは、画像のwidth:150px、margin-right:10pxという設定でした。320pxだとぴちぴちなので目立ちませんが、画面が大きくなるとずれが目立ちます。左にマージンが無いのも不自然ですよね。
    ということで、width:45%、margin:0 5px 15pxにしました。するとこうなります。



    まぁまぁまぁ、いいんじゃないでしょうか。


    (4) 逆に320pxだと拡大画像が右にはみ出してしまう。



    たしかにちょっと中心がずれているように見えます。
    調べるとどうもこれはWordPressが吐き出すhtmlにwidth="325"と書かれているためのようです。
    これはCSSで調整できますので、この画像のクラスを特定して100%指定にしてやりましょう。

    #Contents #Main .image .wp-post-image{
        width: 100%;
        height: auto;
    }

    するとこうなります。



    いい感じに真ん中にそろいました。


    (5) コメント欄が右にはみ出している。



    これはWordPressのcomment_form()のデフォルト設定のコメント欄幅が大きすぎるのが原因です。
    こいつはオプションで修正してやりましょう。元々はデフォルトでの呼び出しだった、
    <?php comment_form(); ?>

    の部分を、次のように変えてやります。

    <?php
    $comment_field = '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" required="required" name="comment" cols="32" rows="8" aria-required="true"></textarea></p>';
    $args = array('comment_field'=>$comment_field);
    ?>
    <?php comment_form($args); ?>

    あと、マージンも広すぎるので、左右4em→2emくらいにしてやります。
    すると、なんということでしょう、



    ばっちりコメント欄が縮まりました。


    ということで、あとはこれをサーバに公開して完了です!
    最後までお付き合いありがとうございました。

     


    コメント
    コメントする








       

    calendar

    S M T W T F S
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
    << July 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

    楽天ブックス

    楽天