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

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

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

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

アドセンスクエスト

アドセンスの収益公開！初心者時代からアドセンス歴10年目まで

https://life-money-create.com/profile

アドセンスキング・ライムスです。サイトで独立11年目。運営サイト合計で月間1000万PV達成。2025年3月はサイト合計で月間1200万PV突破。AIでサイトを量産しています。初心者がアドセンスの稼ぎ方を徹底的にに学べる、Googleアドセンスマスター講座「アドセンスクエスト」を運営しています。アドクエ戦士のピエールです。アドセンスは、正しいやり方で努力を継続すれば本当に結果はでますよ。アドセンスクエストおすすめPOINT！月収100万円稼ぐまでの道を学べる！ゲーム感覚で楽しく学べる！サイトの書籍化（商業出版）やり方！即...

この記事では、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; }
}

.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>

</div>

ABOUT US

ライムスアドセンスクエスト創設者

「YouTube」を活用した「資産型サイト」合計で月間1000万PV達成。3つの資産型サイトから大手出版社より3冊商業出版。「ブログ」アドセンスと「YouTube」アドセンスの両方を徹底的に学べる、Googleアドセンスマスター講座『アドセンスクエスト』の制作者。Yahoo!ニュース&テレビにて運営サイト複数掲載。2024年9月、個人でできるSEO対策の最高峰 Googleナレッジパネルの認証、申請完了済（本名の方で）