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

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


    アメブロカスタマイズ講座も、
    実質上は今回が最終回です。
    目標としてきた「アメブロのデザインカスタマイズ」
    は、今回で完成します。

    今日は、「日記の下部にある広告を消す」
    「フッタを調整する」
    です。

    ステップ1
    アメブロの広告の多さには、正直言ってウンザリしますが、
    そのほとんどは消すことができるんですね。
    ただし、消すためにはこの講座のように、
    CSSをいじる必要があります。

    「日記の下部にある広告」とは、この部分のことです。


    他の部分の広告とほぼ同様の手法で消すことができますが、
    ちょっとだけ厄介です。

    CSSの「アメブロ特有コンテンツ」の中を修正します。
    赤い部分が修正/追加部分です。

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

    #footer_ad{
    line-height: 0%;
    }


    表示確認(部分)


    ワリとキレイに消えてくれました。

    ステップ2
    さて、最終ステップ、フッタです。
    ベース画像から、フッタ画像を切り出します。
    この画像を配置し、アメブロアイコンをレイアウトする為の
    CSSを記述します

    /*-----------------------------------------------------
    フッタ
    -----------------------------------------------------*/
    #footerArea{
    clear: both;
    text-align: center;
    padding: 25px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-image: url(「フッタ画像のURL」);
    background-repeat: repeat-x;
    }


    さーて、本番でレイアウト確認です。
    これまでは何度か本番(実際のブログ)で
    表示テストしてきたかもしれませんが、
    多くはローカルでの表示テストだったと思います。
    これまで作成した全てのCSSをコピーし、

    アメブロ管理画面>デザインの変更>スキンCSSの編集

    から、CSSをペーストします。

    本番ブログでの表示確認


    完成おめでとうございます!
    やりましたね!
    完全なオリジナルデザインのブログの完成です。

    実際の私のアメブロはこちらからご覧いただけます。
    (しばらくはこのままにしておきますが、
    気が変わってデザインを変更するかもしれません。)

    =============
    ここまで「アメブロカスタマイズ講座」に
    お付き合いくださいました皆さん、
    励ましてくださった皆さんに
    心から感謝申し上げます。
    ありがとうございます。
    =============


    もし、この「バサラなブログ」の
    「アメブロカスタマイズ講座」を参考にしてブログをカスタマイズ
    された方がいらっしゃいましたら、ぜひコメントなどを通じて
    お知らせくださいますとうれしいです。

    皆さんの目には、私がスムースに作業を進めているように
    見えるかもしれません。
    しかし実際には、
    私もこの記事を書きながら、
    試作と失敗を何度も何度も繰り返しています。
    うまくいったものだけを記事にしているだけです。

    ちょっと失敗しただけで諦めず、
    ぜひトライしてください。

    まだこの連載は終わらせたくありません。
    次回からは、アメブロのデザインカスタマイズに使える
    TIPS(ちょっとしたコツやテクニック)を
    紹介したいと考えています。

    他のブログサービスでのデザインカスタマイズを
    連載しようかな?とも思っています。

    実際にどうなるかは気分次第です^^;


    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