カラムレイアウトで写真を左右反転して使う TIPS

カラムレイアウトで写真を使うときの話

このようなカラムレイアウトのときは、（パソコン閲覧時に）写真の男性の指がこっちのコンテンツの方を指していてほしいですよね。

こういうときに役に立つ TIPS を紹介します。

カラムを入れ替えればこうなるけど...

レイアウトの都合上、写真を右に配置したいこと、ありますよね。

例えば、この部分をスマホで見ると男性の指が上を指していますが、コンテンツは下にあり、違和感があります。

こういうとき、元画像を加工して左右反転したものを使うやり方もありますが、画像を加工せずそのままで、CSS を使うやり方を紹介します。

CSS で画像を左右反転する

画像ブロックの追加 CSS クラスに mirror-image と入力します。

以下の CSS を記述します。

.mirror-image {
    transform: scaleX(-1);
}

すると、このようにパソコンで見てもスマホで見ても違和感を感じないレイアウトにできます。

おまけ

VK Blocks がインストールされていると、カラムの方向を逆にすることができます。

この設定を使えば、パソコンでは写真を左に配置して、スマホでは写真を下に配置することができます。 ※ここでは CSS を使っていません。

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

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

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

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

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

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

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

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

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