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

1 min 29 views
akira

akira

2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在Youtube、ブログアフィリエイト、バイトと貯金で生活しています。人生山あり谷あり。早く寛解したいです。
>>ブログで収入を得る方法は無料で公開しています

FOLLOW

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

丸める方法

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

記述例

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

CSSファイルに記述

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

記述後のグローバルナビ

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

最後に

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

カテゴリー:
ブログで月5万円収入を得る方法

アルバイトはしていますが、僕は現在定職にはついていません。ブログとYoutubeのアフィリエイト収益で生計をたてています。アフィリエイトでお金を得るのは決して楽なことではありませんが、調子の悪いときは休んで、調子の良い時だけ仕事をするという自分のペースで作業をすることも可能です。以下のリンク先ではブログで収益を得る方法を紹介しています。少しでも興味のある方は読んでみてください

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です