【Cocoon】投稿した画像を加工せずに円形や長方形にトリミングするCSSの方法【WordPress】

WordPressのブログ記事に画像をアップしたものの、周りに写っているものをトリミングしたいな〜でも加工して再アップしたくないなという時ありませんか？

こんな方におすすめの記事です。ぜひ参考にしてください。

投稿した画像を加工せずにトリミングする

ブログを書いていると、挿絵を自分で用意したり撮影した写真を投稿しますよね。

その投稿した画像をアップしてから

あれ？余白が気になるな

とか

余計なものが写ってる…

と気付いて画像を加工して再アップしなきゃ行けない時ありませんか？

わざわざ画像を加工し直さなくてもいいように便利なCSSを追加することにしました。

私はブログ記事のアイキャッチ画像を正方形で作ることにしていて、アイキャッチ画像を作ったその流れで挿絵を作るのですが、正方形のキャンバスのまま作ると上下に余白が出てしまいます。

その画像の余白部分を加工すれば良いだけの話なのですが、いちいち面倒くさいです！w

なのでいっそ全部正方形で作ってCSSで余白をトリミングして長方形にしちゃお！と思ってCSSを書きました。（雑すぎる）

ちなみにアイキャッチや挿絵などは全てCanvaで作成しています！使える素材が多くて便利！

同様に、アップした画像の周りによく見たら邪魔なものが写ってたりして「真ん中だけ入ってたらいいのに」という時ありませんか？

そんな時のために真ん中の部分だけを「円形」にトリミングするCSSもついでに書きました。

投稿画面ではクラス名を追加するだけなので、とても簡単でいちいち画像を加工して再アップする必要はなくなりますよ！

そちらも同じ要素に対してのCSSを書きます。

クラス名の違いで切り替えることができますよ。

.wp-block-image.trim img {
  height: 12rem;/* 任意の高さ */
  object-fit: cover;
}

.wp-block-image.circle img {
  border-radius: 100%;
  width: 300px;/* 任意の幅 */
  height: 300px;/* 任意の高さ */
  object-fit: cover;
}

CSSの追加ができたら、投稿画面では該当の画像ブロックにクラス名を追加するだけです！

長方形なら「trim」、円形なら「circle」ですね。

トリミングするサイズは任意で設定して大丈夫ですが、

画面サイズによって高さを変えて調整しないと見えづらくなってしまうので必ず

スマホとPC（タブレット）それぞれの画面で確認してくださいね。

以上が投稿した画像を加工せずにトリミングするCSSの書き方でした。

後からトリミングできるので気軽に画像をアップしていけますよ🙆‍♀️

毎回綺麗に加工するのが面倒くさいめんどくさがり屋さんにはおすすめです！

こんなお悩みの方の参考になっていれば幸いです。