アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -335ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 333 | 334 | 335 | 336 | 337 | 最初次のページへ >>

CSS　ヘッドのアメブロ広告が変わりました

2009.10アメブロによって変更されています

ブログの上をスキンに合わせます＆検索ボタン

こちらを参考にしてください

-----------------------------------------------

本日、ヘッドのアメブロ広告が変わりました・・・・
と、いっても見かけは同じなのでわからないと思います

以前のこの部分のidはoptionHeadUsr、新しいidはtoolbarになっています
他にもこのCSSにはnowBanner、bannerList なんて現在使われていない設定が書かれています

・・・新しい広告用？
　　　・・・記事下の広告をなくした場合、上に出るようにするの？
　　　　　　・・・現在のところでは、どう使うかはわかりません・・・？

ということで
以前の記事を参考にしている方は下のように変更下さい

2007.11.22
CSS 上の線を消しちゃおう
http://ameblo.jp/exlink/entry-10056637865.html

#optionHeadUsr{
border-bottom:1px solid #ffffff;
}

↓

#toolbar{
border-bottom:0 solid;
}

2007.11.30
ページトップのアメブロのCM
http://ameblo.jp/exlink/entry-10057784026.html

#optionHeadUsr{
margin:0 auto;
width: 800px;/*スキンの横幅にあわせる*/
border-bottom:1px solid #ffffff;
}

↓

#toolbar{
margin:0 auto;
width: 800px;/*スキンの横幅にあわせる*/
border-bottom:0 solid;
}

CSS 新広告をなんとかしちゃおう番外

風邪ひいて・・・

ボーとしていることもあって・・・・

簡単なのを・・・・・番外ということで

使う方・・・・　いないかも・・・？

ボーダーで囲みます

ＣＳＳの最後にコピペしてください

#advertising2 {
border:1px solid #999999 !important;
padding:0 15px 10px !important;
}

CSSをさわれないスキンの場合はフリープラグインに

border:1px solid #999999
　1pxは線の太さ　solidは線の種類　#999999は線の色です

　　　solid ・・1本線
　　　double ・・2本線
　　　dashed・・破線。
　　　dotted・・点線

　　　　・・・他にもあります　border-style　で検索してみてください

padding:0 15px 10px
　上　左右　下　の順でスキマを設定します（今回、上は最初から空くので0でちょうどいいくらい）

　　　　・・・・padding:0 15px 10px 15px　は上右下左　の順番でスキマを設定
　　　　・・・・padding:0 15px　は上下　左右　の順番でスキマを設定

　　　　・・・・padding:15px　は上下左右　全部同じでスキマです

　　　　・・・・margin　とかも同じ順番です、0は単位を書かなくてもOKです

今回は2行で書いていますが

#advertising2 {
border-width: 1px !important;;
border-style: solid !important;;
border-color: #999999 !important;;
padding:0 15px 10px !important;
}

と、同じです

上だけに線を使ってみました・・・こっちなら使ってくれる方いるかも

#advertising2 {
border-top:2px dotted #ff33cc !important;
margin-top:20px!important;
}

　・・・border-top:2px; と　　border-width:2px 0 0 0; （上、右、下、左）は同じです

※こちらはmargin-top:を指定します　記事の最後と線とのスキマをあけます
　上の線で囲む方はpaddingを指定しました　線と中の広告のスキマをあけます

　今回は使ってはいませんが両方を組み合わせて位置を調整してください

　メチャクチャ簡単に説明　marginは外のスキマ、paddingは中のスキマ　・・

・・・・　自分の頭がおバカになっているから、基本的なことまで説明してみました

　　　　・・・・　少しはわかっていただけたら　　　　うれしいかな

　　　　　　　　・・・　ズ～っと、おバカでいてください　　なんてリクはしないでください

CSSの最後にコピペしてから　表示を確認する　でプレビューします

位置、スキマが希望通りになるまで調整して

ＯＫでしたら保存してください

保存するまでは何度でもやりなおせます・・・　

保存しちゃってもやりなおせばいいだけじゃん！わざわざ言うことではなかったです

CSS 新広告をなんとかしちゃおう 3

新広告に背景をつけます

風邪であたまが馬鹿になっています・・・

セキもとまんないし・・・

この冬・・・何回目の風邪でしょ？

・・・で、詳しい説明は後日アップしますm(_ _)m

サイズ的には3カラムの方には何とかなりそうかな・・・

001

サイズ400×190

/* 広告の背景に画像 */
.contents #advertising2{
margin-top: 50px;
padding: 5px 10px 0px 10px;
display:block;
width: 380px;
height:231px;
background:url(背景画像のURL) no-repeat!important
}

002

サイズ400×200

/* 広告の背景に画像 */
.contents #advertising2{
margin-top: 50px;
padding: 10px 10px 0px 10px;
display:block;
width: 380px;
height:231px;
background:url(背景画像のURL) no-repeat!important
}

003

サイズ400×175

/* 広告の背景に画像 */
.contents #advertising2{
margin-top: 50px;
padding: 0px 10px 0px 10px;
display:block;
width: 385px;
height:231px;
background:url(背景画像のURL) no-repeat!important
}

004

サイズ400×185