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

0
    ================================
    この記事は、連載でお送りしています。
    部分的に読んだだけでは、内容がわからない場合がありますので、
    前回以前の記事を参考にしてください。
    記事に掲載されている内容についてコメントで質問いただいても
    お応えできない場合がありますので、予めご了承ください。
    ================================


    前回は.entryの背景画像の設定をしました。
    今回は.entryの上部「ページャ」(.page)の設定と
    関連する細かな調整をします。
    (前回の予告と違っていてすみません)

    ページャ(.page)とは、この部分です


    ステップ1
    .pageの中の文字を中央寄せにし、文字の大きさや高さなどを設定します。

    /*-----------------------------------------------------
    #main ページャ
    -----------------------------------------------------*/

    #main .page{
    font-size: 12px;
    text-align: center;
    padding: 5px;
    height: 12px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    background-color: #FFFFFF;
    }


    表示確認


    ステップ2
    .pageが存在しているので、
    .entryの上端と、sub_b/sub_aの上端がズレています。
    これらの上端を揃えます。
    (必要な場合のみ)


    すでに設定している#sub_a、#sub_bの設定に
    以下を加えて調整します。
    数値はご自身のデザインに合わせて調節してください。

    #sub_a{
    float: right;
    width:170px;
    padding:0;
    background-color: #97D4D5;
    background-image: url(http://stat.ameba.jp/user_images/92/73/10122831307.jpg);
    background-repeat: no-repeat;
    margin-top: 17px;
    }


    #sub_b{
    float: right;
    width:175px;
    background-image: url(http://stat.ameba.jp/user_images/50/5e/10118485389.gif);
    background-repeat: repeat-y;
    padding: 0px;
    margin-top: 27px;

    }


    #mainに設定していた、背景色を抜きます

    表示確認


    上部が揃って、スッキリしましたね。
    次回は.entryの中を調整する予定です(^^;


    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