🐾 猫との暮らしは こちらのブログりんのニャンニャン日記で書いています。
PR

アスペクト比の使い方|見切れを防ぎながら画像を直感的に調整できる“感動機能”

テーマ・デザイン
スポンサーリンク

WordPressのブロックエディターでは、画像に簡単なデザインを追加できる「画像スタイル機能」が用意されています。

プラグインを入れなくても、角丸・影・枠線などをワンクリックで設定できるため、ブログの見た目を簡単に整えることができます。

この記事では、WordPressの画像スタイル機能でできることと使い方をまとめます。

画像スタイル機能とは?

画像スタイル機能とは、WordPressのブロックエディターで使える画像の見た目を変更する機能です。

更新によって追加され、標準機能だけで画像を装飾できるようになりました。

スタイル
フィルター
サイズ

できるようになったこと

WordPressの画像スタイルでは以下の設定が可能です。

・角丸
・影(シャドウ)
・枠線
・画像サイズ調整
・カード風の見せ方

使い方

操作はとても簡単です。

① 画像ブロックをクリック
② 右側の設定メニューを開く
③ 「スタイル」を選択

スタイルを選択


④ 好きなデザインをクリックするだけ

👉これだけで反映されます

出てきた一番上のデザインでは形や色のトーンを変えられるので色々押してみて!もし元に戻したければ「デフォルト」で元に戻ります

フィルター

次に出てくるのがフィルター

フィルターのデュオトーンを押すと色々出てきます

出てきた色を押すと色々変わるから押してみて!

デュオトーンで青とオレンを選択したところ

サイズと枠線と影

この部分では、画像の見た目を細かく調整できます。

・サイズ → 画像の大きさ
・枠線 → 画像の外枠
・影 → 立体感を出す効果

数値やスタイルを変更することで、シンプルな画像でもデザイン性を高めることができます。

マージンとは

マージンとは、画像のまわりにできる「余白(すき間)」のことです。

画像そのものの大きさではなく、画像と文章の間や、画像と画像の間にできるスペースを調整するための設定です。

デザインのバランスや読みやすさを調整するときに使われます。

💡簡単にいうと

👉 マージン=画像の外側の空白

🖼イメージ

  • マージン小さい → 文章と画像が近い
  • マージン大きい → 画像のまわりに余白ができる

🧠ポイント

マージンはデザイン調整の機能なので、必須ではありません。
まずはデフォルトのままでも問題なく使えます。

アスペクト比とは?画像の見切れを防ぎながら直感的に調整できる便利機能

アスペクト比はかなり便利で、今回の中でも一番の“感動ポイント”でした。

これまでブログ用の画像を使うときは、
「見せたい部分が切れてしまうので、何度もトリミングをやり直す」ことがよくありました。

でもこの機能では、アスペクト比やサイズを調整すると、
画像のプレビューを見ながら、どこを表示するかをその場で決めることができます。

👉つまり
「あとから切り直す」ではなく
“見ながら完成形を作れる”機能です

この違いがかなり大きくて、
今までの「作って→失敗して→やり直し」がほぼ無くなりました。

直感的に画像の見せたいところを移動できます

枠線と影

一番下の枠線と影で数値を動かすと簡単に枠線を入れたり角を丸くしたりできるのでお好みで調整できます

例えば枠線をつけるだけで画像がカード風になり、記事全体が見やすくなります。

Screenshot

ブログでの活用例

画像スタイルは以下の場面で特に便利です。

・アイキャッチ画像
・スクリーンショット解説
・見出し下の装飾画像

少しの変化でも記事の印象がかなり変わります。

まとめ

WordPressの画像スタイル機能を使うことで、プラグインなしでもデザイン性のあるブログが作れます。

特に初心者にとっては「入れるだけで見た目が整う」便利な機能です。

作業効率を上げたい方へ

画像編集やブログ作業を効率化するには、環境を整えるのも重要です。

・Mac / Windows対応マウス
・外部モニター
・キーボードショートカット環境

ロジクール MX MASTER 3S Bluetooth Edition アドバンスド ワイヤレス マウス 

Logicool(ロジクール)
¥17,630(2026/06/08 10:44時点)
Bluetooth Edition / 超高速スクロールホイールを搭載した人間工学デザインのMXシリーズ高機能ワイヤレスマウス MX MASTER3SのLogi bolt USBレシーバーと充電ケーブルが付属しないBluetooth Editionが登場。*別売りまたはすでにお持ちのLogi Boltレシーバーを使用して接続することはできます。

コメント

タイトルとURLをコピーしました