佐野元春 Blog Ringのバナーを張りました

ちょうど1ヶ月前になるが、SUNDAY MORNING BLUEのあすかさんの呼びかけに応えて、佐野元春のBlog Ringに参加した。
そのリングバナーを張ろうと思っていたのだが、RingSurfから送られてきたタグをそのまま張ったのでは、どうもうまくいかない。
この連休を利用して、CSSにも多少手を加えて、ようやく自分のイメージに合うものになったので、正式に公開(?)します。
その間に、新曲をCCCDで出す・出さないのEpic Sonyとの確執、佐野さんのレーベルが独立するなど、いろんな動きがあったが、それぞれに佐野さんのポリシーを感じて、ますますファンになった次第である。
これぞ、Rock’nRollの精神だね。
Rockの神髄は権力・権威への健全な反抗心。
僕もこの精神を忘れずに、これからも一ファンとして応援していきたい。
CSSについて詳しく知りたい方は、続きを読んでください(^^)


RingSurfから送られてきたタグは、次のようなものだった。
<table border=0>
<tr><td>
<div style=”{padding: 5px; border: solid 1px #0000aa;}”>
<center><b><a href=”http://asuka.jugem.cc/?eid=106″>The Golden Blog Ring</a></b><br></center>
…略…
</div>
</td></tr>
</table>
このまま、<div clas=”side”>〜</div>で囲んでも、どうもうまくいかない。
テーブルの枠が表示されないし、リンクもすべてもともとのCSSで設定した色になってしまって、全体的なイメージが崩れてしまう…
border=0としている以上、枠が表示されないのは当然だと思うのだが、あすかさんのソースを見る限りうまくいっているし、僕が何か間違っているのか…
要は、僕のBlogはブルーが基調なので、それに合わせたい。
タグの中にstyleタグを使ってCSSを埋め込む手もあるが、それだと全体のイメージを変えるときに面倒なので、新しいclassをCSSに書き加えた。
.goldenring {
border:1px solid #336699;
}
.goldenringtitle {
font-family:”ヒラギノ角ゴ Pro W3″, “MS Pゴシック”, “Osaka”, verdana, arial, sans-serif;
font-size:small;
background:#FFF;
line-height:140%;
padding:5px;
text-align: center;
}
.goldenringbody {
font-family:”ヒラギノ角ゴ Pro W3″, “MS Pゴシック”, “Osaka”, verdana, arial, sans-serif;
font-size:x-small;
font-weight:normal;
background:#FFF;
line-height:140%;
padding:2px;
}
.goldenringtitle a { color:#003366;}
.goldenringtitle a:link { color:#003366;}
.goldenringtitle a:visited {color:#003366;}
.goldenringtitle a:active {color:#999966;}
.goldenringtitle a:hover {color:#999966;}
.goldenringbody a { color:#333;font-weight:normal;}
.goldenringbody A:link { color:#333;font-weight:normal;}
.goldenringbody A:visited {color:#333;font-weight:normal;}
.goldenringbody A:active {color:#99CCFF;font-weight:normal;}
.goldenringbody A:hover {color:#99CCFF;font-weight:normal;}
こうすることで、tableタグを使わずに同じように表現できるし、全体的な色調もブルーに統一することができた。
しかも、「Golden Ring Blog」の名の通り、ポインターを合わせるとテキストの色が「金色」に変わるので、まずますイメージにぴったり(^^)
ちなみに、index.htmlには次のようなタグを書き込んでいる。
<div class=”goldenring”>
<div class=”goldenringtitle”><a href=”http://asuka.jugem.cc/?eid=106″>The Golden Blog Ring</a><br></div>
<div class=”goldenringbody”>
…略…
</div>
</div>
<div>を多用して、あまりスマートではないのかもしれないが、これ以外に解決方法を考えつかなかった(:_;)
でも、CSSについて、また少し賢くなった気がする。
間違いがあれば、教えてくださいm(__)m

2 個のコメント

  1. 成功したようですね!
    レイアウトもとてもきれいです。これからもよろしくお願いします♪

  2. >あすかさん
    一応、義理堅い男のつもりなんで(^^)
    何とか約束を果たせて、ほっとしました。
    次は「Go 4」のバナーを、うまくBlogに入れ込もうと思案中です。
    また時間がかかるだろうけど、気長に待ってください。
    では、お互い、佐野さんを接点に、これからもおつきあいのほど、お願いしますm(__)m

コメントを残す

メールアドレスは公開されません

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください