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

0
    年末だろうがなんだろうが、進んじゃいます(^^;

    前回までに#sub_bに背景画像を設定しました。


    今日は#sub_bにsub_bヘッダ画像、sub_bフッタ画像を設定し、
    #sub_bの内容を調整します。

    STEP1
    まず、自分の#sub_bの内容を見て、
    一番先頭にあるコンテンツ、一番下にあるコンテンツを
    確認します。

    私の場合は、#sub_bの先頭のコンテンツは#calendar、
    最後のコンテンツは#rssという名です。


    デフォルトでは、#sub_bの最後のコンテンツは#rssですが、
    先頭のコンテンツは、アメブロカスタマイズ講座(3)のSTEP3
    で設定した内容によって異なりますので、
    ご自身の#sub_bの先頭コンテンツの名を調べる必要があります。

    コンテンツの名前(ID)の調べ方は
    予備講座(2)を参照してください。

    ちなみに、先頭コンテンツのタイトルが「カレンダー」
    である場合、HTMLファイルの「カレンダー」という文字列を
    探し出し、直前の"id="という記述を探し出します。
    これが、「カレンダーの名前(ID)」です。

    以下、先頭コンテンツが#calendar、最後のコンテンツが
    #rssである場合を例に記述を進めます。

    /*-----------------------------------------------------
    sub_b
    -----------------------------------------------------*/
    #sub_b #calendar{
    background-image: url(「#sub_bヘッダ画像のURL」);
    background-repeat: no-repeat;
    padding-top: 10px; /* 要調整 */
    }

    #sub_b #rss{
    background-image: url(「#sub_bフッタ画像のURL」);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 10px; /* 要調整 */
    }


    表示確認(部分)


    これで、#sub_bへの画像の設定は終わりました。
    レイアウト確認用のために最初に設定した、
    #sub_bの背景色を抜きます。
    #sub_aへの背景画像の設定の方法も全く同じですので、
    ここでは重複の説明をしません。
    ぜひ#sub_aへの背景画像設定にチャレンジしてください。

    #sub_a,#sub_bへの背景色が設定できたものとして
    先を進めます。

    表示確認


    STEP2
    #sub_aと#sub_bの中の文字の大きさや、
    スペースの取り方を設定します。
    #sub_aと#sub_bを一気に設定してしまいます。

    /*-----------------------------------------------------
    sub_a/sub_b共通
    -----------------------------------------------------*/

    #sub_a .menu_frame, #sub_b .menu_frame{
    margin-top: 0px;
    margin-right: 12px;
    margin-bottom: 5px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #999999;
    font-size: 12px;
    line-height: 135%;
    }
    #sub_b ul,#sub_a ul{
    list-style-type: none;
    margin: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    }

    #sub_a .menu_title,#sub_b .menu_title{
    font-size: 14px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #006666;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    }
    #sub_a .mainMenu,#sub_b .mainMenu{
    margin: 0px;
    padding: 0px;
    }


    数値の部分や、色の設定部分は、
    デザインにあわせて調整してください。
    line-heightは、行間設定です。
    100%だと、行間は0です。
    読みやすい行間は135〜180くらいです。
    私の場合、日記の本文は180%くらい、
    メニュー部などの、本文以外の文章には135%くらいを
    設定しています。

    文字サイズも、メニュー部は日記部より、少々小さめ
    (今回は12ピクセル)を設定しました。

    表示確認(部分)


    残念ながら年内に連載が終了しませんでしたが、
    年末年始の時間があるときにでも、
    ぜひチャレンジしてみてくださいね〜


    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