WordPress

CSSだけ使用して画像の角や、領域を丸める方法 html ワードプレスなどで使えます

CSSだけ使用して画像やヘッダーなどの領域の角を丸める方法を紹介します。

丸める方法

丸める方法といってもとても簡単です。
border-radius: 20px; 
これをCSSファイルなどに記述すればOKです。
上記の記述で、半径20ピクセルで角が丸くなります。
※ブラウザの種類や、最新版じゃなかったりすると、適応されない場合もあります。

記述例

グローバルナビ
上記画像がCSSファイルに記述前の、グローバルナビです。

CSSファイルに記述

CSSファイルに記述
今回はワードプレスで作ったサイトで説明します。
ワードプレスの「外観」→「テーマの編集」からスタイルシートのグローバルナビ部分に
border-radius: 20px;
を追加記載します。 

記述後のグローバルナビ

記述後のグローバルナビ
このような感じで角が丸まります。

最後に

とても簡単なので、いろいろなところを丸めてみては!!

ABOUT ME
akira
akira
2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在無職で闘病中です。人生山あり谷あり。早く寛解したいです。