ぱっとカエルコラム

前回の復習

四隅の角丸を一括調整する方法は以下の小技をご確認ください。

四角い画像を丸くす！角丸加工の設定方法

角丸設定をバラバラに設定

一括調整との違いは「高度な設定」の「スタイルシート」の記述だけです。
前回同様に設定していきます。

・画像の高度な設定

画像を選択して「高度な設定」タブをクリックします。
スタイルシート欄に「border-radius: 40% 3% 20% 10%;」と入力して、OKボタンをクリックします。

上記のように、左上：40%、右上：3%、右下：20%、左下：10%で画像が角丸加工されます。
左上を基準に時計回りで設定すると覚えると分かりやすいですね。

ポイント

数字とパーセントの間に入っているのは半角スペースです。
全角スペースにしてしまうと変更が反映されないのでご注意ください。

かまぼこ型

上部を完全に丸くしてかまぼこ型にするなら「border-radius: 50% 50% 0% 0%;」

リーフ型

対角線上にある頂点を丸くしてリーフ型にするなら「border-radius: 50% 0% 50% 0%;」

クローバー型

画像を四つ並べて以下のように設定するとクローバー型にできます。
正方形の画像に対して角丸加工すると綺麗な形になります。

右上の画像：　border-radius: 50% 50% 0% 50%;

左上の画像：　border-radius: 50% 50% 50% 0%;

右下の画像：　border-radius: 50% 0% 50% 50%;

左下の画像：　border-radius: 0% 50% 50% 50%;

このように複数の画像を組み合わせたデザインは、画像のサイズによってはスマートフォンで表示した時に意図した形に表示されないことがあります。

スマートフォンの画面幅に合わせて、画像が動いてしまうからです。
今回のクローバー型はスマートフォンで表示すると縦に1列に並んでしまいます。

以下のように小さなサイズの画像であれば、スマートフォンで表示してもクローバー型のデザインは崩れません。

画像を組み合わせてデザインを作る時は、スマートフォンでの見え方にもご注意ください。

ご不明な点はお問い合わせください

岡山で簡単に更新できるホームページCMSをお探しなら“ぱっとカエル”！
ご要望があればサンプルサイトもすぐにご用意できますので、お気軽にお問い合わせください☆