×
~ご契約初月無料キャンペーン~  2018年10月18日 ~ 10月26日9:59まで お申込はこちら >>> 1MF1008
  • 楽天
  • Yahoo!

画像加工なしで画像を角丸にする方法をご紹介!

1

今回は画像加工なしで画像を角丸にする方法をご紹介したいと思います!

デモ

bisque-wbs001

CSSだけで画像加工なしで角丸加工ができました!

CSS

楽天

<style>
img{
border-radius:16px;
}
</style>

画像すべて角丸になります。
px数を大きくするほど丸くなります。

ヤフー

<img src="画像URL" style="border-radius:16px;">

ヤフーの場合はimgタグに直接CSSを書き込みます。
画像単体に指定されます。

ogariaツールに反映

e10bea67dfabbd365dfcb29b56095d4d

アイコンみたくて可愛い印象になりますね!

<script>
<!--
//なんでも商品ランキングの商品画像を角丸にする
$(function(){
	checkDOM({
		url:"http://www.rakuten.ne.jp/gold/otbj/ogaria/show_item/index.html?id=31",
		selecter:".item"
	},function(p,d){
		d.closest("body").append("<style>.item_image img {border-radius:16px;}</style>");
	});
});
-->
</script>

詳しい設定方法はこちらから

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。