【楽天】画像加工せずにCSSで画像をまるく表示させて、ページに動きをプラス！

楽天
Yahoo!

【楽天】画像加工せずにCSSで画像をまるく表示させて、ページに動きをプラス！

2017/03/17

その他

お気に入りに追加する

こんにちは。セブン○レブン信者のオガリア中村です。会社近くのセブン○レブンに「すちこ」に似た男性が居るのですが、なかなか人に言っても伝わらず歯がゆい思いを日々しています。いつもすちこレジ狙いです。

今回は、楽天市場のトップで使われている↓の特集コーナーを真似して作ってみましたー。

デモ

・・・・・・・・・・・・

正方形の画像をまるく表示します。マウスオンした時に、ぶわっと正方形の画像にもどります。
元画像は正方形であればOK！元画像が縦長・横長だと、楕円になってしまうので注意です、、、。

バナー画像は四角い画像をただ並べてしまいがちですが、こうして丸い画像であったり、マウスオンした時の変化をだすことでページに”動き”を出すことができます。

HTMLテンプレート

次にご案内するHTMLをコピーして、RMSへ貼っていきましょー！
かんたんお手軽ver.と、特集コーナーが組める中級者向けver.をご用意しました。

かんたんお手軽ver┃画像1枚ずつに専用classをつける

まるくしたい画像にだけ簡単なタグを書き加えるだけで実装できます。

まずは以下の共通CSSを、全ページ共通表示部分(ヘッダーとか)に貼ります。

<!-- 画像をまるく表示するCSS -->
<style type="text/css">
<!--
.imgCircle {
  border-radius: 50%;
  transition: all .2s ease;
}
.imgCircle:hover {
  border-radius: 0;
}
-->
</style>

まるくしたい画像のimgタグに、「class=”imgCircle”」という記述を追記します。
```
(例)<img src="http://image.rakuten.co.jp/ogaria/image.jpg" class="imgCircle" />
```

上級者向けver.┃特集コーナーをつくる

↑の特集コーナーを作成するHTMLテンプレートです！
シンプルな内容にはなっていますが、リンク先URLや画像URLの書き換えが必要となるため、多少HTMLを理解されている方でないと難しいかもしれません。。

分かり辛いところあれば、コメントにてご質問くださいませー！オガリア中村でした。

お気に入りに追加する

【楽天】画像加工せずにCSSで画像をまるく表示させて、ページに動きをプラス！

オガリア・ネットショップの繁盛レシピ