HTML説明2
「続きを読む」ボタンの装飾
ブログに、「続きを読む」というボタンがあります。それをあれこれ弄る方法を教えます*1。
まずこのブログのCSSを貼っておきます。
p.seemore{ font-size:0px; text-indent:-9999px; } p.seemore a:link, p.seemore a:visited { background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/d/dsjd2254/20120328/20120328181349.gif'); width:91px; height:31px; display:block; } p.seemore a:hover { background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/d/dsjd2254/20120328/20120328181350.gif'); width:91px; height:31px; display:block; } p.seemore a:active { background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/d/dsjd2254/20120328/20120328181351.gif'); width:91px; height:31px; display:block; }
えーと、取り敢えず説明をちょっといれると、
p.seemore a:link, p.seemore a:visited { background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/d/dsjd2254/20120328/20120328181349.gif'); /*背景画像(ボタンの画像)*/ width:91px; /*横の長さ(画像の横の長さ)*/ height:31px; /*縦の長さ(画像の縦の長さ)*/ } p.seemore a:hover { background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/d/dsjd2254/20120328/20120328181350.gif'); /*背景画像, マウスを乗せた時(ボタンの画像)*/ width:91px; /*横の長さ(画像の横の長さ)*/ height:31px; /*縦の長さ(画像の縦の長さ)*/ } p.seemore a:active { background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/d/dsjd2254/20120328/20120328181351.gif'); /*背景画像クリック時(ボタンの画像)*/ width:91px; /*横の長さ(画像の横の長さ)*/ height:31px; /*縦の長さ(画像の縦の長さ)*/ }
widthプロパティとheightプロパティの値はそれぞれ同じにしてください。そうするとロールオーバーがキレイです。
でもこのままだと文字が残るので、色々試した結果、
p.seemore{ font-size:0px; /*大きさを極小に*/ text-indent:-9999px; /*テキストを画面外へ飛ばす*/ }
という感じで、テキストを画面外に飛ばしてしまうのが有効です。しかし、
p.seemore a:link, p.seemore a:visited { display:block; } p.seemore a:hover { display:block; } p.seemore a:active { display:block; }
を入れなければ崩れます。理由は分かりません(ゑ
他のブログでは、続きを読むの所のソースを解読して、それに合わせてセレクタを変えれば大丈夫です。
画像は自分で作ってくださいね。
