カバーブロックの背景画像を CSS で左右反転するやり方
WordPress のブロックエディターでカバーブロックを使って以下のような見出しのデザインを作ることがあります。
お部屋の紹介
ROOMS
文字の色を白にして作ったとき、文字の背景部分の色が明るいとこの例のように読みづらく感じてしまいます。
背景画像の右半分は暗い色なので、以下の例のように背景画像を左右反転して使うと文字が読みやすくなります。
お部屋の紹介
ROOMS
このようにしたいとき、左右反転した画像を別途用意せずに、CSS だけでカスタマイズするやり方を紹介します。
VK Blocks Pro がインストールされている場合
カバーブロックの カスタム CSS に以下のコードを書きます。
selector > img {
transform: scaleX(-1);
}VK Blocks Pro がインストールされていない場合
カバーブロックの 追加 CSS クラス に lr-flip と入力して、子テーマの style.css などに以下のコードを書きます。
.lr-flip > img {
transform: scaleX(-1);
}【補足】スマホで見やすくするにはフォーカルポイントを使う
スマホで見たときに背景画像の色が暗い部分が文字の後ろにくるようにするために「フォーカルポイント」が役に立ちます。
フォーカルポイントを設定してあるおかげで、このページの例では両方ともスマホで文字が見やすくなっています。
関連記事
サイト運営者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2026年1月20日スターターパックのテーブルに流れ（フロー）②のスタイルを追加しました
WordPress2026年1月19日スターターパックのテーブルに流れ（フロー）のスタイルを追加しました
WordPress2026年1月13日スターターパックのアコーディオンのデザインを追加しました
WordPress2025年12月26日スターターパックのトップページの新着表示のデザインが増えました
WordPress のトラブル解決・設定・カスタマイズ
ベクトル公式テクニカルパートナー
があなたをお手伝いします
Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。
PHP / jQuery / CSS / アクションフック / フィルターフック のカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。
