コピペで画像を角丸にする方法

【ブログアレンジ(画像角丸、文字装飾など)】
自分がブログやホームページ作成で愛用している小技のうち、今日は画像を角丸化する方法を紹介します。

これも昨日紹介した見出しや文字の装飾と同じくらい、ブログの雰囲気をおしゃれにやわらかくしてくれるのでおすすめです。

ある程度慣れている方には別途CSSファイルに記述することをおすすめしますが、今回は何それ?って方でもコピペだけでできるように紹介したいと思います。


※1文字でも間違えるとブログの表示が大きく崩れてしまうこともあるので、

HTMLやCSSという、プログラム的な作業が好きな方か、冒険してみたい方のみトライしてみて下さい。

※ブログサービスやもともとの設定によって同じようにならない場合や、個別に修正が必要な場合があります。




1 画像をアップロード



まずブログに画像を普通にアップロードして、記事内に貼り付けてみてください。

↓そしたら普通に表示されると思います。

momobanana.jpg


2 再度編集画面へ



ここで編集モードを「htmlモード」にします。

そしたら以下のように表示されていると思います。

<img src="https://blog-imgs-105.fc2.com/s/l/o/slowseikan/momobanana_s.jpg" alt="momobanana.jpg" border="0" width="200" height="175" />

※ブログサービスや設定、アップした画像により内容は変わりますが、

<img という部分は共通してあるはずなので、その直後に、以下のコードを貼り付けてみてください。


3 角丸コードの貼り付け



style="border-radius: 10px 10px 10px 10px;"

という内容を追記して、以下のようにします。

<img style="border-radius: 10px 10px 10px 10px;" src="https://blog-imgs-105.fc2.com/s/l/o/slowseikan/momobanana_s.jpg" alt="momobanana.jpg" border="0" width="200" height="175" />



4 保存・確認



保存して公開ページを確認してみると角丸になっているはずです。

momobanana.jpg

10px 10px 10px 10px は順に、左上、右上、右下、左下の角丸の半径です。

全部同じ値なら
style="border-radius: 10px;"
のように書いてもOKです。



5 アレンジA



個人的にはこれくらいの角丸が気に入っていますが、小さなボタンや画像のときはすべて5pxにしたり、もっと角丸を強調したいときは15pxとかにするのもありです。


momobanana.jpg
style="border-radius: 5px 5px 5px 5px;"


momobanana.jpg
style="border-radius: 10px 10px 10px 10px;"


momobanana.jpg
style="border-radius: 15px 15px 15px 15px;"


さぁ、ここまで来るといたずらしたくなるのが沖メロンです。
数字をとにかく大きくしてみます。


momobanana.jpg
style="border-radius: 30px 30px 30px 30px;"


momobanana.jpg
style="border-radius: 50px 50px 50px 50px;"


momobanana.jpg
style="border-radius: 100px 100px 100px 100px;"

TwitterやFacebookのアイコンみたいになってきましたね。
(元が正方形の画像ならきれいな円が作れそうですね。)


momobanana.jpg
style="border-radius: 200px 200px 200px 200px;"


momobanana.jpg
style="border-radius: 500px 500px 500px 500px;"

※このあとは1000にしても10000にしても変わりませんでした。


6 アレンジB



4つの角のうちいくつかを0にするだけでもまた面白いですよ。


momobanana.jpg
style="border-radius: 30px 0px 0px 0px;"


momobanana.jpg
style="border-radius: 0px 30px 30px 30px;"


momobanana.jpg
style="border-radius: 30px 0px 30px 0px;"


以上です~
関連記事

0 Comments