【WordPress.com】丸い画像を作る・表示させる方法いろいろ

最終更新日:2016-01-06

ここでは、記事などに丸い画像を表示させる方法について覚え書きしていきたいと思います。掲載順番は、私自身の使用頻度に基づいています。

旧エディターのギャラリー機能を使う

WordPress.com のギャラリーを貼り付けるとき、「タイプ」のところを「丸型」に設定すると、

2015-03-17 at 14.39
 

丸い画像のギャラリーを貼り付けることができます。

画像自体を丸く加工する

貼り付ける画像自体を丸くする方法があります。ただし、この方法の場合、CSS で画像に枠を表示させているものについては、別途、その枠を消去する必要があります。

PhotoScape X (mac) で画像を丸くする

Home → Frame & Shape」のところで

2015-03-17 at 15.33
 

丸く切り取ることができます。

2015-03-17 at 15.33
2015-03-17 at 15.32
 

PhotoScape (Windows) で画像を丸くする

私自身が Windows 環境で作業をしている頃は、主に PhotoScape や Inkscape を使って画像の加工を行っていました。PhotoScape を使う場合には、「トリミング」のところで「円形にトリミング」にチェックを入れ、切り取りの比率を「1:1」に指定して切り取れば OK です。

2015-03-17 at 15.42
a0002_003674_m-crop
 

Omnigraffle で画像を丸くする 

以下の記事をご参照ください。

CSS で丸くする

以下のような記述で

<div style="background-image:url('https://comemo508.files.wordpress.com/2015/03/a0011_000123_m.jpg?w=300');width:200px;height:200px;border-radius:100px;"></div>

丸い画像を表示することができます。

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。