CSS ページトップへのアイコンを変更する

記事下についているページトップへのアイコンを変更します

標準のアイコン　　

コレを　 　　に、さらに マウスが乗った時の画像も　 　　( 8px × 8px )

※横8px 縦11px　で画像を作るとピッタリはまります

画像が用意できましたら

いつものようにCSSの最後にコピペです

/*ページトップへアイコン変更*/

.foot .pagetop img {
visibility : hidden ;
}
.foot a.pagetop {
background-repeat : no-repeat ;
background-image : url(画像のURL) ;
}
.foot a.pagetop:hover {
background-repeat : no-repeat ;
background-image : url(画像のURL );
}

html:first-child .foot .pagetop img {/*Opera*/
visibility : visible ;
}

マウスオーバーの必要が無い場合は・・・・

ってここのサイトで試していただければわかりますが

たぶん指のアイコンに隠れてしまうので必要ないのかもです・・・・

/*ページトップへアイコン変更*/

.foot .pagetop img {
visibility : hidden ;
}
.foot a.pagetop {
background-repeat : no-repeat ;
background-image : url(画像のURL) ;
}

html:first-child .foot .pagetop img {/*Opera*/
visibility : visible ;
}

※注意 Operaだけハック使ってもとの画像が表示されます

　このサイトではOperaハックしていませんのでOperaで見ると表示されないはずです

　Oprea8.5 ×　Opera 9.2　OK　でした　・・・　古いOperaは無視する？

CSS 記事下の点線を変更

破線を消す場合は・・・

.entry .foot{
border:none;
}

ついでに・・
ベーシックスキンでテーマの下の波線を消すには

.entry .theme{
border:none;
}

黒の破線を緑の点線に変更してみます

いつものように青字部分をCSSの最後にコピペです

.entry .foot{
border-top:3px dotted #00ff00;
}

黒の点線を消して画像を配置してみます

.entry .foot{
border-top:none;
background-image:url(画像のURL);
background-repeat:repeat-x;
}

画像がかぶってしまいますので位置を上にします
padding-top:で上に上げます
※これは画像の位置を上に上げるのではなくて記事URL|コメント|トラバ| の上にスキマを作ります・・・・結果、画像が上に上がったように見えます

※逆にもっと下げてこの部分の背景画像にするのもありかな

　その場合は　padding-bottom:　を使って位置を下げてください

.entry .foot{
padding-top:15px;
border-top:none;
background-image:url(画像のURL);
background-repeat:repeat-x;
}

もちろん画像を繰り返さないで1つの画像の配置でも可能です
ついでに文字も画像に合わせて中央寄せにしてみます

.entry .foot{
text-align:center;
padding-top:15px;
border-top:none;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position: center top;
}

記事に枠をつけていない場合は下にも配置してみます

.entry{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position: center bottom;
}

今度は下がかぶってしまいますので.entryにpadding-bottom:を設定します

.entry{

padding-bottom:10px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position: center bottom;
}

・・・・　なんか下の画像だけでもいいような

.entry .foot{
text-align:center;
border-top:none;
}
.entry{
padding-bottom:10px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position: center bottom;
}

または↓↑　どちらも同じ状態になります

.entry .foot{
text-align:center;
border-top:none;
padding-bottom:15px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position: center bottom;
}

※背景画像は同じところに2つ以上配置できません
　.entry内に背景を設定している場合は下の方法を使ってください

CSS 記事に背景画像＋新しい記事にNEW!マーク

記事に背景画像 をチョット応用

前に書いた新しい記事にNEW!マークをつけちゃおう を使って

公開24時間以内の新しい記事に背景をつけてみます

※24時間たてば何もしなくても消えます

少しウザそうですがわかりやすくこんな画像を繰り返して使ってみます

記事が読みにくくならないような画像を使ってください

もちろん繰り返さないで1つの画像だけでもOKです

いつものようにCSSの最後に

/*NEW 記事の背景画像*/
.entry.new{
background-image:url(画像のURL);
background-repeat:repeat-y;
}

NEW 画像を記事のジャマになりにくい右側に表示します

/*NEW 記事の背景画像*/
.entry.new{
background-image:url(画像のURL);
background-repeat:repeat-y;

background-position:right top;
}

background-repeat:　

background-position:

は、自由に設定下さい

.entry {background-image:url(画像のURL);}/*NEWの記事背景*/
.entry .contents {background-image:url(画像のURL);}/*記事の背景*/
あるいは
.entry {background-image:url(画像のURL);}/*記事の背景*/
.entry .contents {background-image:url(画像のURL);}/*NEWの記事背景*/
にすると記事の背景にいつも背景画像が表示されていて24時間以内は＋NEW画像も表示されます

.entry {background-image:url(画像のURL);}/*普段の記事背景*/
.entry.new {background-image:url(画像のURL);}/*NEWの記事背景*/
にすると24時間以内はNEW画像が表示されて、それ以後は普段の記事背景が表示されます

↓わかりにくいですが白字のNEW透過処理画像を使って

.entry{
width:97%;
border:3px solid #00ff00;
background-color:#ccffcc;
}
.entry.contents{
background-image:url(画像のURL);
background-position: 90% 80%;
background-repeat:no-repeat;
}
.entry.new{
background-image:url(画像のURL);
background-repeat:repeat-y;
}
.contents #advertising2{
background:none !important;
}

※.entry{
　background-image:url(画像のURL);
　}

　で、記事の背景をすでに設定している場合はコレより後ろに加えてください