アメブロ・カスタマイズ 最新CSSデザイン ボタンの角を丸くする方法

この記事は2016/3/8以降使えるようになったアメブロの新しいCSS編集用デザインのカスタマイズ方法について書いています。

※プロフィール画像が丸いタイプ

今回ご紹介するのは、ちょっとした小細工ですが、最新デザインの各種ボタンの角を丸くする方法です。

変更可能な場所

  • メインエリアのボタン

記事の下にある「もっと見る」や「次の記事へのボタン」

  • サイドバーのボタン

サイドバーの各種ボタン


▽もとは角は丸くありません。

角丸の設定方法

ブログ管理⇒デザインの変更⇒CSSの編集をクリック

ブログデザインCSSの (5-1) ボタン全体 にあるそれぞれの通常ボタン、強調ボタンのborder-color: #e5e5e5;の下に

border-radius:5px;
を追加してください。
 
 
例えば、サイドバーのボタンを角丸にしたい場合
(変更前)
/* (5-4) サイドボタン
--------------------------------------------*/
/* サイド通常ボタン */
.skin-btnSide {
border-color: #e5e5e5;
background-color: #ffffff;
color: #999999;
}

/* サイド通常ボタン(マウスオーバー、訪問済み) */
.skin-btnSide:hover, .skin-btnSide:visited {
color: #999999;
}

/* サイド強調ボタン */
.skin-btnSidePrimary {
border-color: #404040;
background-color: #505050;
color: #ffffff;
}

 

 (変更後)
/* (5-4) サイドボタン
--------------------------------------------*/
/* サイド通常ボタン */
.skin-btnSide {
border-color: #e5e5e5;
border-radius:5px;
background-color: #ffffff;
color: #999999;
}

/* サイド通常ボタン(マウスオーバー、訪問済み) */
.skin-btnSide:hover, .skin-btnSide:visited {
color: #999999;
}

/* サイド強調ボタン */
.skin-btnSidePrimary {
border-color: #404040;
border-radius:5px;
background-color: #505050;
color: #ffffff;
}

 

これで角が丸くなります!

もっと丸くしたい場合は、5pxを10pxに増やすともっと丸くなります。

 

また、ボタンの色を変えたい場合は

  • border-color:枠の色
  • background-color:背景の色
  • color:文字の色

になります。

カラーコードを変更すれば、色を変える事ができます☆

まとめ

ボタンの角を丸くすることで、少しやわらかい雰囲気になるのかな?って思います。デザインに合わせた変更をあなたもやってみてください。

宜しければ、Facebookページに『いいね!』をお願いします

2017614 大阪・高槻
LINE@導入&活用講座

~スタジオおててくらぶ~

コメントを残す

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。