こちらが さきほど もうひとつのブログにアップした角丸なしの画像です
ブログに画像を貼り付けた時点で
<p><img /></p>
というタグが生成され
imgタグ の中に画像の情報が入っています。
実際のソースコードは<p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/e/ericosblog/20200718/20200718222059.png" alt="f:id:ericosblog:20200718222059p:plain" title="f:id:ericosblog:20200718222059p:plain" class="hatena-fotolife" itemprop="image" />
</p>
このimgタグの中に 角丸にするための情報を追加します
今回は角に20pxのRをつけてみました
コードは
style="border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;"
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;"
最初のが一般的なブラウザ用コード
あとの2つが 古いブラウザに対応するためのコードです
最初のコードに角丸情報を追加したのが下記のコードです<p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/e/ericosblog/20200718/20200718222059.png" style="border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;" alt="f:id:ericosblog:20200718222059p:plain" title="f:id:ericosblog:20200718222059p:plain" class="hatena-fotolife" itemprop="image" />
</p>
で完成がこちらです
ブログ全体に反映させることもできますが
その場合は やり方が変わりますので
今回は この画像のみ角丸にするということで書いてみました。
20pxをおっきくしたり ちっさくしたりして
遊んでみてください
こちらが 50%にした場合の画像です
円形になります
画像も正方形のものを使ってくださいね
長方形だと楕円になります
それもまた いいですけどね 笑