【ブロックエディター対応】画像(写真)をキラリと光らせるやり方

CSS を使ってブロックエディターの画像ブロックにキラリと光る効果をつけてみました。

キラリと光らせる手順は以下の通りです。

手順① CSS を追加

子テーマの style.css などに以下の CSS を追加します。

.kirari {
    position:relative;
    overflow:hidden;
    display: inline-block;
}

/* 画像ブロックの下マージンなし ※背景色が白の場合はコレなくていいかも */
body .wp-block-image.kirari figure {
    margin-bottom: 0;
}

.kirari::before {
    content:"";
    height:100%;
    width:30px;
    position:absolute;
    top:-180px;
    left:0;
    background: rgba(255,255,255,0.25);
    opacity:0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: kirari 2s ease-in-out infinite;
}

@keyframes kirari {
    0% { -webkit-transform: scale(0) rotate(25deg); opacity: 0; }
    75% { -webkit-transform: scale(0) rotate(25deg); opacity: 0.5; }
    76% { -webkit-transform: scale(4) rotate(25deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(25deg); opacity: 0; }
}

手順② 追加 CSS クラス を指定

とりあえずこれで画像がキラリと光るようになりましたが、画像ブロックがdisplay: inline-block; の指定になっているために画像を中央揃え・右揃えにすることができなくなっています。

手順③ 中央揃え・右揃えするには

画像ブロックをグループ化して、グループを横並びに変換すると、中央揃え・右揃えできるようになります。

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2025年11月5日インストールするだけで 404 ページを改善するプラグインを提供開始しました
• WordPress2025年11月3日カスタム投稿タイプの投稿をランダムにカルーセル（スライダー）で表示した例
• WordPress2025年11月3日並び順をランダムに表示するバナーの作り方
• WordPress2025年10月28日スターターパックの見出しのデザインを追加しました