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

0
    年末年始の話題もこれくらいにしておいて、
    おなじみの話題の続きに行きましょうか。

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


    アメブロカスタマイズ講座も、中間点を折り返し、
    後半戦に入ってきました。
    ゴールはすぐそこです。

    今日は、ブログの中心部とも言える、日記部分、
    アメブロで言うところの.entry周りの調整に入ります。

    まず、.entryの論理構造のおさらいです

    1).entry
    2).entry_head
    3).title
    4).theme
    5).contents
    6).foot

    ステップ1
    ベース画像から、.entryに貼り付ける画像の切り出しを行います。
    それぞれ、
    .entryヘッダ画像、.entryボディ画像、.entryフッタ画像
    と呼ぶことにしましょう。


    ステップ2
    次に、切り出したそれぞれの画像を、.entryの中の
    どのクラス(.entry_headなどのこと)に割り当てるかを
    考えます。

    これは、ヘッダ画像によって割り当てるクラスを
    変更する必要があるからです。
    以下の画像をご覧下さい。



    ヘッダ画像の高さが低い場合、
    ヘッダ画像の中には「日付」だけ入ればよいため、
    .entry_headに.entryヘッダ画像を割り当てます。

    .entryに.entryボディ画像
    .entry_headに.entryヘッダ画像
    .footに.entryフッタ画像

    という割り当てです。
    これはわかりやすいですね。

    ところが私が作った.entryヘッダ画像は高さがあり、
    この画像の中に日付、タイトル、テーマを入れたいと思います。
    その場合

    .entryには.entryヘッダ画像
    .contentsに.entryボディ画像
    .footに.entryフッタ画像

    を割り当てます。

    /*-----------------------------------------------------
    .entry(日記部分)
    -----------------------------------------------------*/
    .entry{
    background-image: url(「.entryヘッダ画像のURL」);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    }
    .entry .contents{
    background-image: url(「.entryボディ画像のURL」);
    background-repeat: repeat-y;
    }
    .entry .foot{
    background-image: url(「.entryフッタ画像のURL」);
    background-position: 0px bottom;
    background-repeat: no-repeat;
    }


    表示確認(部分)

    .entryヘッダ画像の中に、日付、タイトル、テーマが
    入っているのがお分かりいただけると思います。

    次回は、.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