【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

comemoarrow

2015-03-17 at 15.32

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

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

2015-03-17 at 15.42

comemoarrow

a0002_003674_m-crop

Omnigraffle で画像を丸くする 

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

CSS で丸くする

以下のような記述で

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

 

参考:アイキャッチ画像が丸い WordPress.com テーマ
  • Spun - demo 円いアイキャッチ画像が特徴的な無料テーマ「Spun」についての覚え書きです。
  • Mina Olen - demo 団体・組織・チーム等の紹介サイト用に使えそうなプレミアムテーマ「Mina Olen」についての覚書です。
  • Largo - demo 投稿スライダー・折りたたみ式メニュー付きで丸いアイキャッチ画像が特徴的なプレミアムテーマ「Largo」についての覚え書きです。

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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