スマートフォンサイトを作ろう!(3)1カラムにする

0
    JUGEMテーマ:wordpress

    さて、本シリーズ3回目のテーマは「1カラムにする」です。

    前回の最後は、全体が派手に右にはみ出したままでしたので、これをとにかく幅に収めていきましょう。

    PC用サイトはサイドバー付きの2カラム構成になっていますが、スマホ用サイトではこのサイドバーを思い切って無くしてしまおうと思います。
    変更点は、header.phpにある、
                <div id="Side"><?php get_sidebar(); ?></div>
    

    の一文を削除してしまえばOKです。
    併せて、style.cssから「#side」に関する記述を全てコメントアウトしておきます。
    こんな感じです。



    サイドバーがきれいに無くなりました。

    次は、固定幅で右寄せになっているメインのコンテンツを、幅100%にして右寄せを解除します。
    具体的には、style.cssの
    #Contents #Main {
        float: right;
        width: 685px;
        margin-right: 15px;
    }
    

    の部分をコメントアウトします。
    するとこうなります。



    はい、サイドバーのあった空白が消えて、メインのコンテンツが左に寄りました。

    そうしたら、これも固定幅になっているスクリーン幅の指定を100%に変更します。
    具体的には
    #Screen {
        width: 950px;
        background: #fff;
        text-align: left;
        margin: 0 auto;
    }
    

    の2行目をコメントアウトします。
    するとこんな感じ。



    メインの画像以外は、画面の幅に入ってきました。

    メインの画像は、また別のところで幅を規定していますので、こちらも固定幅から100%に変更します。
    #Contents #Main #main_visual {
        width: 685px; → 100%
        overflow: hidden;
    }
    


    するとこうなります。



    ご覧のとおり、はみ出した部分がカットされて、きっちり画面幅に収まりました。

    今回はここまで。次回はスライドメニューを作ってみます。


     


    コメント
    コメントする








       

    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

    楽天ブックス

    楽天