人気ブログランキングのボタンを「まんまる堂」っぽくする方法

「まんまる堂」っぽく、というのは、
1.人気ブログランキングのリンクの画像を、角の丸い四角形で囲む
2.人気ブログランキングのリンクの画像を押しボタンっぽくする
この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://file.blog.fc2.com/akira2018/imgs/6/9/69f754b1.jpg" onmouseover="this.src='https://file.blog.fc2.com/akira2018/imgs/5/8/58297bdf.jpg'" onmouseout="this.src='https://file.blog.fc2.com/akira2018/imgs/6/9/69f754b1.jpg'"></a><br>
良い記事だと思って頂けたらクリックお願いします。
</td></tr></table>
<!--人気ブログランキング ここまで -->

これの意味が何となくでも分かった人は流用していただいて構いません(こんなの著作権とかいうレベルではないし)。ただし、サポートはいたしかねます。自力で何とかして下さい。

1はテーブルにスタイル指定をすればできます。
→table style="・・・・・"のところ。

2は、画像を2枚用意して、マウスカーソルを乗せたときと離したときの動作をJavaScriptで書けばできます。
→マウスカーソルを乗せると画像が変化するのは、onmouseover
→マウスカーソルが離れると画像が元に戻るのは、onmouseout

しかし、まんまる堂のソースを覗いてみたら、a class="opacity" と書いて、画像にマウスカーソルが乗ると背景の白が透過するようにしてある(スタールシートを使う)のと、あとはa:hoverのところでリンクにマウスカーソルが乗ると文字も画像も位置が右下にずれるようになっています。画像を2枚作る必要がないので、その方がスマートですね。書いておいてなんですが、私はまんまる堂の真似をしようと思います。

→透過はやめました。そこだけ透過させるのは好みではないから。つまり、CSSに以下のように書くだけ。

a:hover {
position: relative;
left: 1px;
top: 1px;
}

人気ブログランキング

にほんブログ村 ゲームブログ ドラクエ10へ

時計、強さ予報

Twitter

検索フォーム

カレンダー

プルダウン 降順 昇順 年別

10月 | 2020年11月 | 12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -


人気記事

画像等の著作権

(C)ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX All Rights Reserved.(C)SUGIYAMA KOBO(P)SUGIYAMA KOBO

ブログランキング

PVアクセスランキング にほんブログ村