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

0
    今日は、ヘッダ部分をいじってみましょう。
    「ブログデザインに挑戦しよう」では、ヘッダ部分を調整したので、
    このあたりはもう慣れたものですよね?(^^

    ステップ1
    ブログへの訪問者が見て、
    「あ、これはアメブロだ」とわかる部分は、
    ページの上部にある「アメブロバー」と「ユーザナビエリア」
    です。
    これ、邪魔ですね。



    邪魔なので消えていただきましょう。
    前回までのCSSの最後に、以下の記述を追加します

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

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



    表示確認


    #userNaviAreaはおとなしく消えてくれましたが、
    #amebaBarは、その高さ分が余白になってしまっています。

    これを消す方法をいろいろと試してみました。
    「#overHeaderごと隠してしまう」という手によって、
    この#amebaBarを完全に消してしまうこともできます。
    しかし、大きな副作用が起きてしまい、
    いろいろと面倒が起きますので、
    今回は#amebaBarによる余白は仕方のないものとして
    このまま行きます。

    ステップ2
    ヘッダ画像を用意します。
    ベース画像から、ヘッダ画像を切り出します。

    これはとても重要なことなのですが、
    アメブロでは幅、高さ共に
    800ピクセルを超える画像をアップすると、自動的に
    リサイズされて、勝手に小さな画像にしてしまいます。

    これを避けるためには、サイズを800ピクセル以内で
    作成する必要があります。
    私もヘッダ画像は800ピクセルぎりぎりで作りました。

    ヘッダ部分の調整と共に画像を貼り付けます。

    /*-----------------------------------------------------
    ヘッダ部
    -----------------------------------------------------*/
    #overHeader{
    margin: 0px;
    padding: 0px;
    height: 158px; /* ヘッダ画像の高さ */
    width: 100%;
    }
    #header{
    margin: 0px auto;
    padding: 0px;
    height: 158px; /* ヘッダ画像の高さ */
    background-image: url(ヘッダ画像のURL);
    background-repeat: no-repeat;
    width: 800px; /* ヘッダ画像の幅 */
    }


    表示確認


    だんだん「らしく」なってきましたね。

    ステップ3
    「ブログデザインに挑戦しよう」でも行った、
    タイトル文字やサイト説明文の調整を行います。
    これはもう、ざっくりとした説明でいいですよね。
    私は、サイト説明文については消してしまいます。
    色や、ピクセル部分については、自分のタイトル画像に
    あわせて調整します。

    #header h1{
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    }
    #header h1 a{
    padding-top: 135px;
    display: block;
    padding-bottom: 12px;
    padding-left: 100px;
    color: #009999;
    }
    #header h2{
    display: none;
    }

    表示確認


    ヘッダ部分については完成しちゃいましたね。
    今日はこのへんにしときましょうか。


    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