WordPress

【CSSで実現】画像を丸や三角や台形、任意の形でくり抜く方法(SVG ファイルを使ったケースも合わせて解説)

広告:ページ内にてアフィリエイト広告を利用しています。


画像を好きな形で切り抜きたい場合がありますよね。そういう形の画像を用意しても良いのですが、CSSで任意に切る撮ることができたら便利です。

ポイント

本記事では、

画像を丸や三角や台形、任意の形でくり抜く方法を解説します。

切っちゃいましょう!バシバシと。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

画像を切り抜く方法

Point.
画像を
切り抜く方法

画像を切り抜く場合は、CSS の「clip-path」を使います。具体的に切り抜くパターンごとに見ていきましょう。

■ 丸く切り抜く

正円で切り抜く

正円で切り抜いています。

clip-path: circle(180px at 200px 200px);

「clip-path」で circle を指定します。上記の例は半径 180px、中心位置 200px、200px で正円で切り抜いています。

■ 楕円に切り抜く

楕円で切り抜く

楕円で切り抜いています。

clip-path: ellipse(300px 180px at 300px 200px);

「clip-path」で ellipse を指定します。2つの半径(長径と短径)と位置を指定して楕円を定義します。

■ 三角形に切り抜く

三角で切り抜く

三角形(山形)で切り抜いています。

clip-path: polygon(0% 100%, 50% 0%, 100% 100%);

「clip-path」で polygon を指定します。三角形や多角形を指定する場合は各矩形の頂点を順番に指定します。

頂点を指定する例

(横=x、縦=y)で指定します。画像の左上が( 0% 0% )、画像の右上が( 100% 0% )、画像の右下が( 100% 100% )です。画像のど真ん中は( 50% 50% )ですね。

■ 台形(左側をカット)に切り抜く

台形で切り抜く

台形(左側を斜めにカット)で切り抜いています。

clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 100% 100%);

「clip-path」で polygon を指定します。台形は頂点が4点ありますので、各頂点を指定しています。

■ 台形(下側を斜めにカット)に切り抜く

台形で切り抜く

台形(下を斜めにカット)で切り抜いています。

clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);

「clip-path」で polygon を指定します。台形は頂点が4点ありますので、各頂点を指定しています。

■ ぐにょぐにょ(好きな形に)に切り抜く

任意の矩形で切り抜く

ぐにょぐにょに切り抜いています。

具体的には、svg ファイル(画像をベクトルで指定したもの)を利用して、切り抜く矩形を指定します。

方法は以下の通りです。

step
1
svg ファイルを用意する

svg ファイル(画像)を用意します。

step
2
svg ファイルを html で表記する

svg ファイルは内部がテキストになっていますので、メモ帳などで開けます。開いてそのまま html で表記します。

<svg version="1.1" height="0" width="0">

<clipPath id="my-svg-1">

<path fill="#000000" d="M 134.175781 (途中省略...) 170.714844 "/>

</clipPath>

</svg>

そのまま書くと画面に svg ファイルを表示してしまうので、height="0" width="0" を指定して大きさのない画像にします。

path タグの前後を、clipPath で囲みます。この時に、任意の名前( id )をつけます。

step
3
CSS で 矩形を指定する

html で書いた svg ファイルの矩形を CSS で結び付けます。

 clip-path: url(#my-svg-1);

url を指定して、svg を記述した際につけた任意の名前に先頭に # をつけて指定します。

step
4
完成です

任意の矩形で切り抜く

完成です。

WordPress で使う場合

Point.
WordPres で
使う場合

WordPress で記事に貼った画像に使う場合はちょっとコツがあります。順に説明します。

step
1
画像にクラスをつける

画像にクラスをつける
  • 画像に「追加 CSS クラス」で任意のクラス名(例:my-sample-cut)を指定する

step
2
CSS を指定する際に img をつける

WordPress の画像は、div タグで自動で囲まれ、その div タグのほうに、任意で付けたクラス名が付与されます。そのままクラス名を指定して切り抜くと、img ではなく div タグのほうを切り抜いてしまうため、明示的に img のほうに CSS を適用します。

<style>
.my-sample-cut img {
  clip-path: circle(180px at 200px 200px);
}
</style>

step
3
完成です

正円で切り抜く

完成です。切り抜けました。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

まとめ:画像を丸や三角や台形、任意の形でくり抜く方法

画像を任意の形で切り抜くには、CSS の clip-path を利用します。

ポイント

  • 正円でくり抜く場合は「clip-path: circle」を利用する
  • 楕円でくり抜く場合は「clip-path: ellipse」を利用する
  • 多角形で切り抜く場合は「clip-path: polygon」を利用する
  • 任意の形で切り抜く場合は svg イメージを利用する

ぐでんぐでんに切り抜いて、かっこいいホームページを演出してくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介!快適な移住先も紹介します

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

この副業
アフィリエイトスクール
ノートパソコン

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン
PR
―― 今日のおみくじ ――

第 87 番

吉


今日のメッセージ

斜に構えるとかっこよく見えるけれど、本当にかっこいいのは真っすぐ生きること。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記