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

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


    だんだん「完全オリジナルデザインのアメブロ」
    の完成が見えてきましたね!
    ゴールはすぐそこです。

    今日は.entryの中身を調整していきます。

    現在の状況をブラウザで確認すると、こんなカンジです

    表示確認(部分)


    ステップ1
    広告(#advertising2)と
    「同じテーマの最新記事」(#themeBox)というのが、
    どうにも邪魔ですね。
    邪魔なので、消しましょう。

    既存のCSSを修正します。

    /*-----------------------------------------------------
    広告/アメブロ特有コンテンツ
    -----------------------------------------------------*/

    #amebaBar,#userNaviArea,#ameblo,#themeBox{
    display: none;
    visibility: hidden;
    }

    #defaultAd,#advertising2{
    position: absolute;
    left: -9999px;
    height: 1px;
    display: none;
    margin: 0px;
    padding: 0px;
    }


    表示確認(部分)


    あ〜、スッキリした。
    いかに邪魔だったか、よくわかりますね。

    ステップ2
    .entryの中の文字を調整します。
    以下の点に注意して調整を進めます。

    1)
    私の場合.entryヘッダ画像左側にある、
    葉っぱの画像を見せたいため、
    日付、日記タイトル、テーマなどは全体に右に寄せます。
    また、日付と日記タイトル、テーマの間隔を広げて余裕を持たせ、
    ヘッダ画像がよく見えるようにします。

    2)
    日記本文の文字は、見易さ/読みやすさを最優先します。
    文字の色(color)は薄すしすぎないよう、注意します。
    文字の大きさ(font-size)は小さくなりすぎないように
    注意します。
    40代以上の人でも苦労なく読める大きさは
    15pxくらいからです。私は16ピクセルに設定します。

    3)
    日記本文の行間(line-height)にも注意します。
    読みやすい行間は135〜200%くらいです。
    狭すぎると窮屈になって読みにくくなります。
    200%を大きく上回ると、毎回よぶんに改行しているように
    見えてしまいます。

    4)
    「コメント」などがある、日記下部の.footは、
    ラインで区切ったり、全体を右寄せにして
    日記本文と区別するようにします。
    私の場合は、薄くラインを引き、日記本文との間のスペースに
    少し余裕を持たせます。

    この部分は、日記の読みやすさに直接影響しますので、
    丁寧に表示確認を繰り返しながら設定します。

    /*-----------------------------------------------------
    .entry(日記部分)
    -----------------------------------------------------*/
    #main .entry{
    background-image: url(http://stat.ameba.jp/user_images/e3/42/10118472541.jpg);
    background-repeat: no-repeat;
    padding: 10px 0px 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    }
    #main .entry .entry_head{
    text-align: right;
    margin: 0px 0px 18px;
    padding-top: 0px;
    padding-right: 10px;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    }
    #main .entry .title {
    display: block;
    margin-left: 70px;
    padding-left: 2px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #006666;
    color: #006666;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 18px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }
    #main .entry .theme {
    display: block;
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    padding: 0px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 15px;
    margin-left: 0px;
    }
    #main .entry .contents {
    background-image: url(http://stat.ameba.jp/user_images/c7/18/10118472543.jpg);
    background-repeat: repeat-y;
    font-size: 16px;
    line-height: 180%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #CCCCCC;
    }
    #main .entry .foot {
    background-image: url(http://stat.ameba.jp/user_images/c4/41/10118472544.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 10px;
    font-size: 13px;
    text-align: right;
    }


    表示確認


    これで日記部分の設定完了!
    残るは後少しになってきましたね。


    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << September 2017 >>

    selected entries

    categories

    archives

    recent comment

    recommend

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

    links

    profile

    search this site.

    others

    mobile

    qrcode

    powered

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