2024年9月27日 / 最終更新日 : 2024年9月27日対馬俊彦 WordPress

画像ブロックにフォトフレームをつけるやり方の比較

いままで違いを意識せずにその時の気分😅で使っていたのですが、あれ、なんか違うな…と感じまして（今更）、WordPress コアの画像ブロックにフォトフレームをつけるいくつかのやり方を比較してみました。

周囲のブロックとの関係を考慮してレイアウトするときなど、具体的には position: absolute; にするときやネガティブマージンを指定するときにそれぞれの特徴の違いを理解して使い分けたいと思います。

オリジナル

① border

② border

③ VK Blocks

④ box-shadow

① CSS プロパティ border を使用

フォトフレームを含めたサイズがオリジナル画像と同じ。
その分、画像のサイズが小さくなる。

② CSS プロパティ border を使用＋ box-sizing: content-box;

画像のサイズが変わらない。
フォトフレームの分、サイズが大きくなる。

③ VK Blocks のスタイル「フォトフレーム」を使用

画像のサイズが変わらない。
フォトフレームの分、サイズが大きくなる。
ワンクリックで設定できる😊

④ CSS プロパティ box-shadow を使用

画像のサイズが変わらない。
画像の位置が変わらない。
フォトフレームの分、サイズが大きくなる。

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

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

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

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

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

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

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

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

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

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく