Loading…

記事内にプロモーションが含まれています。

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

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

画像にマウスオーバーした時にゆっくり透過させる方法

所要時間目安:2

This session is using  IPv4  is established in

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

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

目次に行く・戻る

メルカリ招待コード:

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

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

そこで今回は、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;
 }

 

まとめです。

いかがでしたか?

こんなオシャレなアニメーションが簡単にCSSにコピペで実装ができるんです。

是非これで他のサイトとちょっと差を付けてみてください。

上記のコードをスタイルシートCSSに追記するだけで以下のように、

ちょっとおしゃれ(オシャンティー)にサイトをカスタマイズできますよ!!

 

次回は、
テキストにリンクがある場合にマウスオーバー時にゆっくりとアニメーション効果をつける方法を、

紹介します!!

 

いろいろなアニメーション効果をつける方法がありますので期待していてください!!

最後にもう一回マウスオーバー時に画像を透過させた場合のデモです。

画像にマウスオーバーした時にゆっくり透過させる方法

追記)

テキストにリンクがある場合にアニメーション効果をCSSでつける方法を書きました。以下になります。

あなたにおすすめ

間違いメールと迷惑メールとフィッシング詐欺メール判断方法

LINE インターネット セキュリティ 伝えたいこと 備忘録 時事ネタ

クリス松村さん迷惑メールで個人情報流出疑惑抱く「1社登録したらその企業の釣りメール」

言わずもがなしれた方のクリス松村さんですが、一社にメールアドレスを登録した後にフィッシングメールが送信されてくるようになったとのこと。記事の内容には「釣りメール」とありますが、調べてみるとフィッシング…

もっと読む

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

SMAP解散

伝えたいこと 備忘録 時事ネタ

SMAP解散撤回してくれないかな…。SMAPロスは中居君がなくしてくれるかな…。

言わずとも知られている国民的アイドルのSMAPが今年2016年12月31日で、解散してしまう…。1世代でもなく2世代、中には3世代にも渡ってファンです。 という方々も多いのではないでしょうか?ファンで…

もっと読む

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

PC Windows10 カスタマイズ ツール 伝えたいこと 備忘録 設定

NumLockとCapsLockで文字がうまく打てないオンかオフか確認KeyRockCheck

パソコンを使用している時に、キーボード入力にて日本語入力や数字の入力をすると思います。その際に、半角全角キーにて日本語入力のローマ字入力をするのが主流かと思います。 この半角全角キー押下にて半角と全角…

もっと読む

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

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

RSSにアイキャッチ画像を出力する方法Stinger6、Stinger7、StingerPLUS+版

以前、RSSにアイキャッチ画像を出力する方法という記事を書きました。     普通の?RSSフィードに(PINGOOなど)にはアイキャッチがちゃんと表示されていました。 ですが、B…

もっと読む

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

HDDが壊れそうか否か健康状態確認

PC 伝えたいこと 備忘録

CrystalDiscinfoでHDDが壊れそうかどうか確認方法と対処方法

以前と言っても先月末くらいからパソコンから異音が出始めました。 異音の種類によってもどこら壊れそうなのか概ねの判断・推測ができます。 以前の記事が以下です。 これらのことを行っても異音が解消されない場…

もっと読む

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

ネコ

WordPress

アイキャッチ画像を設定してみた。

よく言うアイキャッチ!!正直めんどくさいですよね。でも、訪問者やTwitter、Facebookなどにサムネイル表示される際に、自分のブログの記事にアイキャッチ(画像?)があると…。

おすすめの記事一部広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

お小遣い稼ぎにアンケート。

Multiplex 広告

Total243


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

目次に戻る

よろしかったらシェアよろしくお願いします。

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

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください