2014年2月19日

ブログ村バナーカスタマイズ 完全版 ソースコード公開












この記事を書いた後で発覚した問題があるので
あらかじめ「ブログ村バナーの問題点と謝罪」ご覧頂き、
ご了承頂けるようでしたらソースコードを参考にしてください。







今度こそ実現できた。

完全版。

ソースコード公開。



あ、ちなみに、

アメブロにブログ村のバナーを貼り付ける場合のみ使えるやり方です。





■毎回の記事に貼り付ける方のソースコード




ココに貼り付けるとリンクになってしまい
ソースコードが読めないので
コメント欄に書きますね。









■毎回の記事に貼り付ける方のソースコード(ちょっと長いです)




p.blogmura a{
display : block ;
padding-top : 100px ; /* ←実際に貼り付ける画像の縦サイズ*/
text-align : center ;
background-repeat : no-repeat ;
background-position : top center ;
}

p.blogmura a:link{
background-image : url(通常時の画像のURL) ;
}

p.blogmura a:visited{
background-image : url(通常時の画像のURL) ;
}

p.blogmura a:hover{ background-image : url(マウスを乗せた時の画像のURL) ;
}

p.blogmura a:active{
background-image : url(通常時の画像のURL) ;
}





全く同じサイズの2種類の画像を用意してサーバなりに置いてください。

で、

通常時の画像のURLを

p.blogmura a:link

p.blogmura a:visited

p.blogmura a:active

に書いて



マウスを乗せた時の画像の方のURLを

p.blogmura a:hover

に書く。




以上です。


ちなみにこのやり方だと

記事を書いた時のプレビューでは画像が出てこないので

実験的に記事を公開しないと

CSSが合ってるのか確認できないので、そこ注意してください。















3 件のコメント:

  1. SECRET: 0
    PASS:
    <p class="blogmura">
    <a href="ランキングページのURL" target="_blank">リンクさせたい文字</a>
    </p>
    ↑この3行です

    返信削除
  2. SECRET: 0
    PASS:
    貴女はすごい人なんだと驚きます。
    おじさんには全く解らないです。しかし、理解出来るようになりたいと思ったりします。
    流石です。

    返信削除
  3. SECRET: 0
    PASS:
    ��ウツウツ君さん
    貴女って(笑)
    全くわからないってことは、長尾がどれくらいヘボなのかバレないってことですね。わーい。

    返信削除