WordPressで画像をキラリと光らせる方法【CSSのみで簡単】

アドセンスキングのライムスです。

主にGoogle AdSenseを主軸としたサイトやASP高額案件で独立9年目。2022年6月に月間650万PV達成。現在10サイト以上運営。専門はアルゴリズムの大変動を逆算したサイト設計。ゲーム感覚でサイトの稼ぎ方を学べるRPG型教材「アドセンスクエスト」の制作者。月利数十万円プレイヤーを多数輩出。

僕の詳しいプロフィールはコチラをどうぞ。

 

ライムス
この記事では、WordPressで画像をキラリと光らせて目立たせる方法について解説します。
初心者:スラ子
画像が光っていると目に付きますもんね。私もブログで光る画像を試してみたいです。

WordPressのキラリと光る画像の作り方

サンプル例

このように、キラリと光る目立つ画像を作ることが出来ます。

CSS

CSSのみで画像をきらっと光らせるスクリプトになります。
JSを使わずCSSのみで実装可能なので非常に手軽です。

.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
 
.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}
 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

HTML

<div class="reflection">
<img src="画像の URL">
</div>

ライムスからのプレゼント♪

当サイトを発見したあなたには、ライムスから、ブログ収益に直接結びつく特別なプレゼントを複数ご用意しました。「アドセンスクエスト」に少しでもご興味ある方には、必ずメリットがある特典ですので、お宝ゲットしてくださいね!

ライムス
このプレゼントが、あなたのブログ人生を変える大きなきっかけになるかもしれません。
スラ子
何が入ってるかドキドキしてきました♪

プレゼントはこちらから

Googleアドセンスマスター講座

ゲーム感覚で月収100万円までの道を学べるGoogleアドセンスマスター講座です。