WordPressのテーマ「Skeleton」で画像の角を丸くするには　【解決編】

Tweet

[`evernote` not found]

Pocket

数日前に作成した記事、

　WordPressのテーマ「Skeleton」で画像に縁取りをつけるには　【解決編】

で画像に外枠がつけられるようになってホクホクしていたのですが、
サイトの他の部分や雰囲気に合わせて
画像の角を丸くしたい衝動にかられてしまいました。

こちらも上の記事で紹介したのと同様、
スタイルシート（style.css）にさらに数行書き込むことで
実現することができます。




先日の記事で画像に縁取りをつけるのに、
style.cssに以下のコードを書き加えました。
img {
margin: 5px;
padding: 10px;
border: solid #dddddd 2px;}




今回は外枠をつけた画像の角を丸くするのに
以下のコードを加えて
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;


最終的に下のような状態のコードにしました。
img {
margin: 5px;
padding: 5px;
border: solid #dddddd 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}




・radius
　半径のことです。
　数値が大きくなるほど、より丸みがかかります。


外枠と画像の間の距離を決める「padding」は、
枠内の画像も丸くなるように
10pxから5pxに減らしました。




縁取りをつけずに画像の角を丸くするには、
コードを以下のように変えて加えます。

img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}




こういう細かいことって、
サイト作りをしていると結構気になるんですよね。

個人事業をしながら収入を安定させるために
もうひとつ柱となる収入源がほしい、

今は会社勤めだが、副業から
ゆくゆくは独立起業を考えている、

ネットで稼いで自由な人生を手に入れたい、

そんな方にぴったりの
無料電子書籍＋動画＋メールマガジンです。


特にメールマガジンは、
ネットを事業に使っている人には
読み物としてもおもしろく、
毎回ためになる情報が発信されているので絶対にお見逃しなく！

Tweet

[`evernote` not found]

Pocket