アメブロカスタマイズ講座(7)

0
    ヘッダ部分が終わりましたので、
    ヘッダ部よりも下の部分の調整していきます。

    ここまでの内容でコツを掴んだ方は、
    どんどん先に進んでいっちゃってくださいね。

    ステップ1
    まずはヘッダより下の部分を大きく囲む
    #wrapの調整をしましょう。


    #wrapは、上記の(4)の部分です。
    この部分の幅を、ベース画像の、以下の部分の幅に合わせます。



    私の場合は#mainが465ピクセル、#sub_aと#sub_bがそれぞれ
    170ピクセルですので、
    465+170+170+余裕分=820ピクセルとします。

    ヘッダ画像の幅が800ピクセルですので、
    これよりも大きくなり過ぎないように、画像の幅を調整します。

    #wrap{
    width: 820px;
    margin-right: auto;
    margin-left: auto;
    }


    表示確認


    先に指定したCSSの「基本レイアウト」部分を調整します。

    /*-----------------------------------------------------
    基本レイアウト
    -----------------------------------------------------*/

    #main{
    float: left;
    width: 465px; /* #mainの幅 */
    margin:0;
    padding:0;
    background-color: #9999CC;
    }

    #sub_a{
    float: right;
    width:170px; /* #sub_aの幅 */
    margin:0;
    padding:0;
    background-color: #FFCC99;
    }

    #sub_b{
    float: right;
    width:175px; /* #sub_bの幅 + 余裕(ここでは5px) */
    margin:0;
    padding:0 5 0 0; /* "5"はwidthで足した余裕分 */
    background-color: #FF9933;
    }


    この前後のステップが一発でうまく行くことは、まずありません。
    画像を貼り付けていく過程で、余分な幅が出てしまったり、
    幅が足りなかったりするものです。
    ここからのステップは、実際に画像を貼り付けて表示確認を
    しながら、画像の幅を調整して再度切り出したり、
    CSS設定の幅をピクセル単位で調整していきます。


    ステップ2

    真ん中のsub_bから調整を進めてみます。
    ベース画像から、みっつの画像を切り出します。
    sub_bヘッダ画像、sub_bボディ画像、sub_bフッタ画像
    とそれぞれ呼ぶことにします。



    これらを、sub_bに貼り付けていくのですが、
    まずはsub_bボディ画像から貼り付けます。
    先ほど指定したばかりの
    #sub_b{
    を修正します。

    #sub_b{
    float: right;
    width:175px;
    margin:0;
    padding:0 5 0 0;
    background-color: #CCCC00;
    background-image: url(sub_bボディ画像のURL);
    background-repeat: repeat-y;

    }


    表示確認


    ここでは、sub_bの右側に少しだけ、
    背景色として指定した#CCCC00の色(■)が見えていますね。
    この部分がsub_bとsub_aの間の「余裕分」「間隔」
    ということになります。

    次回はsub_bのヘッダとフッタを貼り付けます。


    calendar

    S M T W T F S
       1234
    567891011
    12131415161718
    19202122232425
    2627282930  
    << November 2017 >>

    selected entries

    categories

    archives

    recent comment

    recommend

    過去問で効率的に突破する! 「中小企業診断士試験」勉強法 (DO BOOKS)
    過去問で効率的に突破する! 「中小企業診断士試験」勉強法 (DO BOOKS) (JUGEMレビュー »)
    斎尾裕史
    何をどう勉強するかを、具体的に知るための本。受験者必読。

    links

    profile

    search this site.

    others

    mobile

    qrcode

    powered

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