PCインストラクターの川上です。
今日からいよいよ札幌のスクールも開校です！
張り切って更新していきますね^^!
今日のレッスンは、
アメブロの記事エリアやサイドメニューの枠を丸みに帯びた形にすることができます。
角を丸くすると、柔らかいイメージを与えることができますので、そう印象を与えたい方はカスタマイズするとよいですね^^
記事を囲む枠線を角丸にする
まず、このように↓記事を囲む枠線を丸くするには
アメブロのCSS編集ページを開き、次↓のCSSソースを追加してあげます。
/*記事枠の角を丸くする */
.skinArticle{
border-radius:20px;
}注！ IE8以前では反映されませんのでご注意ください。
サイドメニューの各項目に丸みをつけるには
次に、このように↓サイドメニューの各項目にも丸みをつけてみます。
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
.skinMenu{
border-radius:10px;
}
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
background-color:#fffacd;/*レモン色*/
}
/*メニューのヘッダー*/
.skinMenuHeader{
background-color:#ffa500;/*オレンジ色*/
}
/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
}
/*枠内の色*/
.skinMenuBody{
background-color:#ffffff;/*白色*/
}注！ IE8以前では反映されませんのでご注意ください。
色合いはご自分で変更なさってみてくださいね^^!
背景色をグラデーションにするには
さらに、サイドバーのヘッダータイトルの背景色をグラデーションにしたい場合は
background-imageにlinear-gradient()関数を指定してあげます。
CSS3のlinear-gradient()関数は、線形グラデーションを指定する際に使用します。
/*メニューのヘッダーをグラデーションに*/
.skinMenuHeader{
background-image: linear-gradient(orange,white);
}注！ IE9以前では反映されませんのでご注意ください。
このグラデーションは他の背景でも応用できますね^^!
興味があれば、チャレンジしてみてください！！
＜追記１＞
ピンク色のご要望がありましたので、
そちらのコードものせておきますね。
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
background-color: #fceeeb;/*さくら色*/
}
/*メニューのヘッダー*/
.skinMenuHeader{
background-color: #ea9198;/*ピンク色*/
}↑の箇所だけを変えればいいのですが、面倒な方はこちら↓をコピペするといいです。
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
.skinMenu{
border-radius:10px;
}
/*メニューのヘッダー*/
.skinMenuHeader{
background-color: #ea9198;/*ピンク色*/
}
/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
}
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
background-color: #fceeeb;/*さくら色*/
}
/*枠内の色*/
.skinMenuBody{
background-color:#ffffff;/*白色*/
}
また、グラデーションにしたい場合は、
こちらのコードを追加するとよいです↓
/*メニューのヘッダーをグラデーションに*/
.skinMenuHeader{
background-image: linear-gradient(pink,pink,white);
background-color: #ea9198;/*ピンク色*/
}↑の箇所だけを変えればいいのですが、面倒な方はこちら↓をコピペするといいです。
→◆ピンクのグラデーション１
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
.skinMenu{
border-radius:10px;
}
/*メニューのヘッダー*/
.skinMenuHeader{
background-image: linear-gradient(pink,pink,white);/*ピンク色のグラデーション*/
background-color: #ea9198;/*ピンク色*/
}
/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
text-shadow: 1px 1px 3px #000;
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
}
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
background-color: #fceeeb;/*さくら色*/
}
/*枠内の色*/
.skinMenuBody{
background-color:#ffffff;/*白色*/
}
記事エリアもあわせて角を丸くして、線の色をピンクにしたい、という場合は次のCSSコードを追加するとよいです。
/* ■記事エリアの枠指定■ */
/*記事エリア枠の角を丸くする */
.skinArticle{
border-radius:10px;
border: 1px solid #ea9198; /* 記事エリアの枠線－ピンク色 */
}
→◆ピンクのグラデーション２
こちら↑のバージョンですと、この↓CSSコードになります。
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
border-radius:10px;/*角を丸く */
background-color:#ffffff;/*白色*/
border: 1px solid pink; /* タイトル領域の枠線－ピンク色 */
}
/*メニューのヘッダー*/
.skinMenuHeader{
padding: 6px 6px; /* タイトルと枠の間の余白 */
background-image:linear-gradient(white,pink,pink);/* ピンクのグラデーション */
background-color: pink; /* タイトル領域の背景色－ピンク色 */
}
/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
text-shadow: 1px 1px 3px #000;
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
}
/*枠内の色*/
.skinMenuBody{
background-color: #fceeeb;/*さくら色*/
}
/* ■記事エリアの枠指定■ */
/*記事エリア枠の角を丸くする */
.skinArticle{
border-radius:10px;
border: 1px solid pink; /* 記事エリアの枠線－ピンク色 */
}
＜追記２＞
また･･･、緑色グラデーションのご要望がありましたので、
そちらのコードものせておきますね。
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
border-radius:6px;/*角を丸く */
border-radius:6px;/*角を丸く */
background-color:#ffffff;/*白色*/
border: 1px solid #3fb135; /* タイトル領域の枠線－緑色 */
}
/*メニューのヘッダー*/
.skinMenuHeader{
padding: 6px 6px; /* タイトルと枠の間の余白 */
background-image:linear-gradient(white,#3fb135,#3fb135);/* 緑のグラデーション */
background-color: #3fb135; /* タイトル領域の背景色－緑色 */
}
/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
text-shadow: 1px 1px 3px #000;
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
}
/*枠内の色*/
.skinMenuBody{
background-color:#ffffff;/*白色*/
}
なお、記事エリアも緑の線で丸くしたいのであれば、こちらのCSSコードを追加してみてくださいね。
/* ■記事エリアの枠指定■ */
/*記事エリア枠の角を丸くする */
.skinArticle{
border-radius:10px;
border: 1px solid #3fb135; /* 記事エリアの枠線－緑色 */
}
また…
さらに、もういっちょ～、はコチラへ^^!
＜追記＞
この記事は、新デザイン（横幅が980px）に対応したカスタマイズになります。プロフィール画像が丸く、横幅が1120pxの新しいデザインでは対応しておりません。
その場合は、こちらをご参照くださいませ↓
『最新のデザインでサイドバーをカスタマイズする方法』
以上、アメブロカスタマイズ・ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大