リンクが付いたテキストや画像にマウスを乗せた時(マウスオーバー時)に、
いろんなアニメーショや何かしらの効果があると…。
なんだかカッコいいサイトになった気分になりますよね。
そこで今回は、WordPressでブログを運営しているあなたのために!!
プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。
これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょう!
2025年10月1日 (水曜日)本日の人気記事トップ10
今日は2025年10月1日です。
2025年10月1日 (水曜日)↓における週間月間人気記事トップ3は?↓
計測データがありません。
計測データがありません。
計測データがありません。
リンクが付いたテキストや画像にマウスを乗せた時(マウスオーバー時)に、
いろんなアニメーショや何かしらの効果があると…。
なんだかカッコいいサイトになった気分になりますよね。
そこで今回は、WordPressでブログを運営しているあなたのために!!
プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。
これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょう!
やり方はいたって簡単です。
CSSに以下のコードを追記するだけでこんな風に簡単に画像にリンクがある場合はゆっくりとアニメーション効果をつけることができます。
/*画像にリンクがあった時にゆっくり透過させるCSS*/
a:hover img {
opacity: 0.5 ;
filter: alpha(opacity=50) ; /* Ie用 */
}
img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}
いかがでしたか?
こんなオシャレなアニメーションが簡単にCSSにコピペで実装ができるんです。
是非これで他のサイトとちょっと差を付けてみてください。
上記のコードをスタイルシートCSSに追記するだけで以下のように、
ちょっとおしゃれ(オシャンティー)にサイトをカスタマイズできますよ!!
紹介します!!
いろいろなアニメーション効果をつける方法がありますので期待していてください!!
最後にもう一回マウスオーバー時に画像を透過させた場合のデモです。
追記)
テキストにリンクがある場合にアニメーション効果をCSSでつける方法を書きました。以下になります。
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
よろしかったらシェアよろしくお願いします。
新着コメント