「まんまる堂」っぽく、というのは、
１．人気ブログランキングのリンクの画像を、角の丸い四角形で囲む
２．人気ブログランキングのリンクの画像を押しボタンっぽくする
この2点です。
ボタンがあると押したくなる人間の心理を巧みに・・・（え！？）
| <!–人気ブログランキング ここから–> <br><table style=”border-collapse:separate; border:1px solid #007fff; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;” width=600 cellspacing=10> <tr><td align=”center” valign=”middle”> <a href=”http://blog.with2.net/link.php???????:????”><input type=”image” name=”test” src=”https://akira-dq.net/wp-content/uploads/imgs/6/9/69f754b1.jpg” onmouseover=”this.src=’https://akira-dq.net/wp-content/uploads/imgs/5/8/58297bdf.jpg'” onmouseout=”this.src=’https://akira-dq.net/wp-content/uploads/imgs/6/9/69f754b1.jpg'”></a><br> 良い記事だと思って頂けたらクリックお願いします。 </td></tr></table> <!–人気ブログランキング ここまで –> |
これの意味が何となくでも分かった人は流用していただいて構いません（こんなの著作権とかいうレベルではないし）。ただし、サポートはいたしかねます。自力で何とかして下さい。
１はテーブルにスタイル指定をすればできます。
→table style=”・・・・・”のところ。
２は、画像を2枚用意して、マウスカーソルを乗せたときと離したときの動作をJavaScriptで書けばできます。
→マウスカーソルを乗せると画像が変化するのは、onmouseover
→マウスカーソルが離れると画像が元に戻るのは、onmouseout
しかし、まんまる堂のソースを覗いてみたら、a class=”opacity” と書いて、画像にマウスカーソルが乗ると背景の白が透過するようにしてある（スタールシートを使う）のと、あとはa:hoverのところでリンクにマウスカーソルが乗ると文字も画像も位置が右下にずれるようになっています。画像を2枚作る必要がないので、その方がスマートですね。書いておいてなんですが、私はまんまる堂の真似をしようと思います。
→透過はやめました。そこだけ透過させるのは好みではないから。つまり、CSSに以下のように書くだけ。
| a:hover { position: relative; left: 1px; top: 1px; } |