画像にリンクがある場合にCSSだけでゆっくりと透過させる方法

所要時間目安：約2分

This session is using　 IPv4 　is established in

ストレートネック症状と原因そして治し方など

テキストにリンクがある場合にアニメーション効果をつけるCSS方法11選

この記事は2017年3月4日のものです。現在は状況が異なる可能性がありますのでご注意ください。

WordPress カスタマイズ伝えたいこと備忘録

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

リンクが付いたテキストや画像にマウスを乗せた時（マウスオーバー時）に、
いろんなアニメーショや何かしらの効果があると…。

なんだかカッコいいサイトになった気分になりますよね。

そこで今回は、WordPressでブログを運営しているあなたのために！！

プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。

これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょう！

アドセンス336pxPC閲覧記事下表示1つ目コード

画像にリンクがある場合にマウスオーバー時に画像をゆっくりと透過させる方法です。

やり方はいたって簡単です。

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;
 }

「WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

: サーバ上のファイルやフォルダ削除できない時に削除する方法

: Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

: WordPressプラグインなしでコンタクトフォームを作成方法

: スマホやモバイル端末でサイドバー非表示・削除にする方法

: Stinger7にテーマ変更してみたが…。

: YouTube動画が遅い。重い時、掲載しても遅くならない方法

あなたにおすすめ

: Stinger6 Stinger7 WordPress カスタマイズカスタマイズテーマ伝えたいこと備忘録
Stinger6のフッターに3カラムのウィジェットを追加する方法
WordPressのテーマには多くのものがあります。中でも無料のテーマでStingerがとても有名です。かつ、 SEO的にも優れています。また、カスタマイズ性にも良いです。そこで、 Stin…
もっと読む

インフィード広告アドセンス

: Stinger6 Stinger7 WordPress カスタマイズ備忘録
続、プラグインなしでコンタクトフォームを作成方法
先日、 WordPressでプラグインを使わないでお問い合わせ（先）フォーム（コンタクトフォーム）の作成する方法を記載しました。（プラグインなし） WordPressプラ…
もっと読む

インフィード広告アドセンス

: 伝えたいこと治療
パルスオキシメーター酸素飽和度測定おすすめ
今年に入ってから新型コロナの報道や情報ばかりで辟易してしまいますね。でも、軽症者や無症状者もいる中で重症者やお亡くなりになられた方もいらっしゃる事実・・・。この報道されている数字をどう考えるのかはさて…
もっと読む

インフィード広告アドセンス

: 伝えたいこと備忘録時事ネタ
メディファーマが治験１２３件で違反行為…血圧数値改ざんなど、創業以来の組織ぐるみか
こういった製薬関連のデータ改ざんや製造工程の品質管理など人の体に入れる薬なのですから、しっかりしてほしいです。健康被害が今現在ないとか言っていても、その後はわからないですしご本人が気づいていない体調…
もっと読む

インフィード広告アドセンス

: WordPress カスタマイズカスタマイズ伝えたいこと備忘録
アイキャッチ画像を設定し忘れないように自動で設定する方法
WordPressやFC2ブログなどで、アイキャッチ画像を設定しなければならないのは意外と手間ですよね。以前に、アイキャッチ画像を設定し忘れた時にランダムに表示させる方法を記事として紹介しました。 …
もっと読む