アメブロカスタマイズ講座(7-2)

0
    ================
    アメブロのサイドバーにある、
    広告の削除方法についての記事です
    ヘッダ部分にある「ユーザナビ」の消し方はこちら
    ================


    ここまで「表示確認」で示していたサンプルの確認画面に
    間違いがあったので、訂正します。
    今の段階では、以下のように#sub_bの中に広告が
    表示されているはずです。



    非常に目立つ場所にあって(広告なんだから当たり前か)、
    邪魔ですので、これを抜いてしまいましょう。
    やっていいものかどうか考えてしまいますが、
    できるんですから、やっちゃいましょう。

    この広告は、ヘッダの説明文を消したときのような
    displayの設定では消えません。
    そこで、画面の外に飛ばしてしまいます。
    CSSの「広告/アメブロ特有コンテンツ」部分に
    以下を追加します。

    #defaultAd{
    position: absolute;
    left: -9999px;
    height: 1px;
    float: left;
    display: none;
    }


    表示確認


    広告は画面の左の遥か彼方、
    9000ピクセル向こうに飛ばしてしまいました。

    ここまでのCSSを一通り示しておきます。
    コピペして利用してください。
    URLやピクセルなどは、各自の設定に合わせて調整してくださいね。

    /*-----------------------------
    スタイルリセット
    ---------------------------*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,
    pre,form,input,textarea,p,blockquote{
    margin:0;
    padding:0;
    }

    ul,li,ol{list-style-type:none;}
    img{
    border:none;
    vertical-align:bottom;
    }
    form{
    margin:0px;
    }


    #frame,
    #wrap,
    #defaultAd dl{display: inline-block;min-height: 1%;}


    * html #frame,
    * html #wrap,
    * html #defaultAd dl{height: 1%;}
    #frame,
    #wrap,
    #defaultAd dl{display: block;}

    /*-----------------------------------------------------
    基本レイアウト
    -----------------------------------------------------*/

    #main{
    float: left;
    width: 465px;
    margin:0;
    padding:0;
    background-color: #9999CC;
    }

    #sub_a{
    float: right;
    width:170px;
    margin:10 0 0;
    padding:0;
    background-color: #FFCC99;
    }

    #sub_b{
    float: right;
    width:175px;
    background-color: #CCCC00;
    background-image: url(http://stat.ameba.jp/user_images/50/5e/10118485389.gif);
    background-repeat: repeat-y;
    padding: 0px;

    }
    #frame{
    width:100%;
    background-image: url(http://stat.ameba.jp/user_images/99/f2/10121210573.jpg);
    background-repeat: repeat-x;

    background-color: #009997;
    display: block;
    margin: 0px;
    padding: 0px;

    top: 0px;
    }
    #wrap{
    width: 820px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;

    }
    /*-----------------------------------------------------
    背景画像を見せるための処理
    -----------------------------------------------------*/

    #frame:after,
    #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
    }

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

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


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


    /*-----------------------------------------------------
    ヘッダ部
    -----------------------------------------------------*/
    #overHeader{
    margin: 0px;
    padding: 0px;
    height: 158px;
    width: 100%;
    }
    #header{
    margin: 0px auto;
    padding: 0px;
    height: 158px;
    background-image: url(http://stat.ameba.jp/user_images/88/cd/10118181820.png);
    background-repeat: no-repeat;
    width: 800px;
    }
    #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
         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