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

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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

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

最新の投稿

この著者の記事一覧

• WordPress2024年11月24日ベクトルの公式テクニカルパートナーになりました🎉
• WordPress2024年11月24日観光案内のホームページのデモサイトを追加しました
• WordPress2024年11月5日スターターパックのモバイルナビのボタンが日本語表記に対応しました
• WordPress2024年10月28日スマホでちょうど画面幅いっぱいになるようにフォントサイズを自動調整する