リンクが付いたテキストや画像にマウスを乗せた時（マウスオーバー時）に、
いろんなアニメーショや何かしらの効果があると…。
なんだかカッコいいサイトになった気分になりますよね。
そこで今回は、WordPressでブログを運営しているあなたのために！！
プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。
これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょう！
プロモーションを含みます
画像にリンクがある場合にCSSだけでゆっくりと透過させる方法
メルカリ招待コード：
2025年9月6日 (土曜日)本日の人気記事トップ１０
This session is using IPv4 is established in
今日は2025年9月6日です。
この記事は2017年3月4日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年9月6日 (土曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
-
スキャンしたデータを保存できませんでした。応急代替スキャン方法 1PV
以前にBrother iPrint&Scanスキャンしたデータを保存できませんでしたというタイトルにて、Brother iPrint&Scanにてスキャンデータが保存できませんでした。…
-
車の燃費が悪い原因を改善し良くする一つの方法オススメのエアフィルター交換 2PV
最近の車ではプリウスをはじめとしたハイブリッドカーが多くなってきています。しかし、どんな車でも吸気系統と排気系統はあります。 両方大事ですが、排気系統はマフラーを交換するくらいしかありません。またマフ…
-
PHPコードウィジェットをプラグイン使わずにウィジェット作成方法 2PV
WordPressの管理画面の外観にてウィジェットを選択すると、テーマによりですがどこにウィジェットを追加可能なのかがわかります。WordPressのデフォルトであるウィジェットやテーマ独自のウィジェ…
-
国産Webブラウザ「Kinza3.2.0」の最新版リリースでMacにも対応 2PV
2年くらい前に純国産ブラウザにとても安心できる「Kinza」というweb（ウェブ）ブラウザがあることを知りました。その後、順調に進化し続けて6月15日に最新版の「Kinza」がリリースされたようです。…
-
PHPコードウィジェットをプラグイン使わずにウィジェット作成方法 2PV
WordPressの管理画面の外観にてウィジェットを選択すると、テーマによりですがどこにウィジェットを追加可能なのかがわかります。WordPressのデフォルトであるウィジェットやテーマ独自のウィジェ…
-
国産Webブラウザ「Kinza3.2.0」の最新版リリースでMacにも対応 2PV
2年くらい前に純国産ブラウザにとても安心できる「Kinza」というweb（ウェブ）ブラウザがあることを知りました。その後、順調に進化し続けて6月15日に最新版の「Kinza」がリリースされたようです。…
-
エクストレイルT32オススメなPIAA製PN82エアエレメント交換 2PV
これまでにいくつかの車のメンテナンスに関するものを投稿してきました。ほぼ車のメンテナンスに関するものがほとんどなのですが・・・。 エアコンフィルター交換。 プラグ交換。 その他のカスタマイズ。 LED…
画像にリンクがある場合にマウスオーバー時に画像をゆっくりと透過させる方法です。
やり方はいたって簡単です。
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でつける方法を書きました。以下になります。
あなたにおすすめ
¥1,980 （2025/07/06 13:22時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）
- 車のキーナンバー確認方法。キーレス紛失や壊れた時
- カーメイトのエンジンスターターでエラー15表示と対処方法
- アイドリングストップシステム異常警告灯表示対処方法
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
- 日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）
- シガーライターがない車にシガーライターソケットの付け方と増設方法
- エクストレイルT32マイナーチェンジ後ステアリング外し方
おすすめの記事一部広告
- アイドリングストップシステム異常警告灯表示対処方法117
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ111
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法103
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく97
- 車のキーナンバー確認方法。キーレス紛失や壊れた時86
- カーメイトのエンジンスターターでエラー15表示と対処方法76
- エクストレイルT32マイナーチェンジ後ステアリング外し方67
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR203249
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）48
- シガーライターがない車にシガーライターソケットの付け方と増設方法43
Total771
よろしかったらシェアよろしくお願いします。
コメントを表示（0）
新着コメント