こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
今週の執筆者はショップできすぎくんカスタマイズでおなじみの岡田祐子さんです。
今回はショップできすぎくんでもできちゃうCSSを指定するだけで画像を円形に切り抜く方法です。
使い方のアイディアも提案されていますので、最後まで読んで、ぜひ楽しみながら試してみてください。
では、今週もお楽しみください。
ショップできすぎくんでもできちゃう！ CSSで画像を円形に切り抜く方法
皆さま、こんばんは！
岡田です。
画像を円形に切り抜くにはPhotoshopなど画像編集ソフトが必要？
いえいえ、CSSを指定するだけでもできちゃいます。
もちろんショップできすぎくんでも可能です。
今回はいろいろ使える「border-radius」属性をご紹介します。
どんなことができるのか、見本のページを用意しましたので、こちらをご覧ください。
▼ブラックできすぎくん – CSS border-radius属性を使い画像を丸く切り抜く
border-radius属性とは
border-radius属性とは角の丸いボーダーラインを描画するCSSです。
この機能を利用して、画像を円形に切り取ったように見せかけることができるのです。
実際に画像を切り取るのではなく、画像の四隅を部分的に非表示にしてしまう機能です。
写真の角を丸く切り抜いてみよう
まず、普通に画像を指定します。
そのHTMLコードにCSSを書き加えます。CSS指定の例は以下の通り。
<img src=”画像名.jpg” alt=”画像の説明” style=”width: 450px;height: 300px;border-radius: 50px;” />
はじめに表示サイズ（幅と高さ）を指定します。写真の縦横比を維持した数値にしましょう。
width: 450px ・・・ 横幅
height: 300px ・・・ 高さ
次にborder-radius属性で角の丸み部分の半径を指定します。
border-radius: 50px ・・・ 丸みの半径
数値を変えて実際に表示させながら、好みの形にしてみましょう。
写真を正円に切り抜いてみよう
正円に切り取るには、縦横比が1対1、つまり真四角の画像を使います。
CSS指定の例は以下の通り
<img src=”画像名.jpg” alt=”画像の説明” style=”width: 250px;height: 250px;border-radius: 50％;” />
はじめに表示サイズ（幅と高さ）を指定します。幅と高さは同じ大きさにしましょう。
width: 250px ・・・ 横幅
height: 250px ・・・ 高さ
border-radius属性は「50％」と指定すると正円に切り取られます。
いろいろ使えるborder-radius
border-radius属性を使うと、○つき文字や見出しの背景を角丸にするなど
いろいろと応用できます。
見本のページに例を用意しましたので、参考にしてください。
▼ブラックできすぎくん – CSS border-radius属性を使い画像を丸く切り抜く
まとめ
通販サイトでは、商品画像を丸く切り抜くのは好ましくないかと思いますが、
アイキャッチ画像やプロフィール写真など、アイデア次第で使ってみてはいかがでしょう。
画像以外にも背景や枠線などに活用すると素敵なページができそうです。
また簡単に活用できるCSSをご紹介したいと思っています。
———————————————————–
【今週の執筆者】岡田祐子
（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。
□ぐるめ通販トライアルのブログ
———————————————————–
それでは、次号もお楽しみに。
※この記事は2017年6月8日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。
メルマガのご登録はこちら
ドロップシッピング十戒（pdf版）好評発売中！
どろっぷしっぴんぐ研究所、初のデジタルコンテンツ
pdf版『ドロップシッピング十戒』好評発売中です。
上記のリンク先ではドロップシッピング十戒の一覧や目次も掲載しています。
ご覧いただいてぜひご注文ください。
