2016年08月10日 07:00
ブログで使う画像を角丸にする際、フォトショップなどのソフトを使って加工するよりもスタイルシートを使った簡単な方法があるのでご紹介。
難易度(個人的見解)手打ちでブログに画像を貼る事ができる方、スタイルシートでクラスなどがわかる方向け。
※一部僕の作ったテンプレートのみ有効な記事になります。
方法についてですが、画像の<img src="〜" >の 「 > 」 の前にの文字を追加するだけです。
○の部分には角丸の半径の数値を入れます。
ちなみに上の画像は左側に10pxの角丸で右側は角丸の指定をしていません。
例)
<img src="画像url" >が画像やボックスなどの角を丸くする呪文です。
もう少し詳しく見てみましょうか。
スタイルシートを使うメリットに記述するだけで簡単に角丸にしてくれることもそうですが、他にも素敵なメリットが有ります。
上の画像はフォトショップで角丸加工しました。
例えばこれを黒い背景色で表示すると...
画像の四隅に画像を加工した時の背景色が表示されています。
ソフトで角丸の画像を作る際は背景色も考慮しなければなりませんし他の背景色では使えません。
だけど、それをスタイルシートで指定すると。
なんと！背景色を考慮しなくても画像を角丸にしてくれます。
これで、どんな背景色にも対応することができます。
テンプレートのスタイルシートの上の方 /*スマートフォン*/ と書いてある上ぐらいに.kadomaru{border-radius:○px;}を追加してください。(○の中の数値はお好きな数値をどうぞ)
今から僕のテンプレートを利用される方はすでにこの記述は済んでいますので下記の方法からで大丈夫です。
スタイルシートの記述は以上です。次は記事の部分です。
記事中の角丸にしたい画像の<img src="〜" >の 「>」の前にclass="kadomaru"を追加してください。
これで画像が角丸になります。style=〜と書くより簡単でしょ。
例)
<img src="画像url" class="kadomaru">
ブログで書く画像は全て角丸にするので、いちいち全部の画像に記述してられね〜という場合、一文だけで全て角丸にしてくれる方法があります。
テンプレートのスタイルシートの上の方 /*記事内容*/ と書いてある少し下にある.main img{margin: 1em 0;}を.main img{margin: 1em 0; border-radius:○px;}に変更してください。(○の中の数値はお好きな数値をどうぞ)
これで、ブログの記事の部分の画像は全て角丸に変更されます。
ただ、記事下部にある「同じカテゴリーの記事画像」などの画像も一緒に変更されますので、使い方には注意してください。
上記の方法だと、ブログの記事内の画像を一括で角丸に変更してくれるのですが、中には角丸にしたくない箇所もあると思います。
ブログ村やインスタなどのバナーの類など。
方法は今までが画像を角丸にしろと命令していたのを、角丸にするなと命令し直すんです。
角丸にしたくない画像にを追加してやります。
例)
<img src="画像url" >
上記の応用でクラスを作って指定してもいいですし
(僕の作ったテンプレートには.kadomaru_noneというクラスを設けています)
以上が画像を角丸にする方法についてですが
詳しく説明しようと努力はしているんですが、いざ文章にしようとすると中々うまく表現できず、もどかしいっす...。
いまいちよくわからんという方は、わからないところをコメントください。
あ、今週は久しぶりのファミキャンですのでご返信が遅くなるかもしれませんｗ
レスポンシブデザイン対応のテンプレート公開しています。
ご利用いただいた方々からはスマフォやタブレットですごく見やすくなったって言ってもらっています(*´艸｀*)
ご興味のある方はゼヒ！