アメブロのサイドバーの色・デザインを変える方法【CSSコピペ】

動画で解説#

サイドバーデザインを編集する#

管理画面→デザインの変更

CSSの編集をクリックします。

CSSの編集をクリックします。

入力欄の(4)サイドエリアのスタイルのセクションを変更します。

1
/* サイドモジュールタイトル */
2
.skin-widgetTitle {
3
color: #666666;
4
border-bottom: 1px solid #e5e5e5;
5
padding-bottom: 10px;
6
margin-bottom: 6px;
7
}

例えば

• 文字色を「#644527(茶色)」に
• 線の色を「#644527(茶色)」に
• 線の太さを1pxから3pxに

変更してみます

1
.skin-widgetTitle {
2
color: #644527;  /* 色を変更 */
3
border-bottom: 3px solid #644527; /* 色と線の太さを変更 */
4
padding-bottom: 10px;
5
margin-bottom: 6px;
6
}

上記のように変更して「保存する」と、以下のように表示が変わります。

before

after

solidの部分を変えると、線のデザインを変更することもできます

solid(実線）

dotted（ドット）

double（二重線）

色のコードは以下の配色大辞典から選んでみてくださいね。

https://www.colordic.org/

えみ

その他のデザインは下でご紹介しています✨

カレンダーの見出しのデザイン#

プロフィールとカレンダーの見出しは別の場所を修正します。

(4-3-a) カレンダーの中にあるカレンダーのウィジェットタイトルに記述します。

1
/* カレンダー */
2
#calendar .skin-widgetTitle {
3
border-bottom: 0;
4
padding-bottom: 0;
5
margin-bottom: 0;
6
}

例えば、以下のように、上のタイトルでつかったデザインに差し替えて保存してみましょう。

1
/* カレンダー */
2
#calendar .skin-widgetTitle {
3
color: #644527;  /* 文字色追記 */
4
border-bottom: 3px solid #644527; /* 線を追記 */
5
padding-bottom: 10px;
6
margin-bottom: 6px;
7
}

プロフィールのデザイン#

(4-3-c) プロフィールの中にあるプロフィールのウィジェットタイトルに記述します。

1
/* プロフィール */
2
#profile .skin-widgetTitle {
3
border-bottom: 0;
4
padding-bottom: 0;
5
margin-bottom: 0;
6
}

こちらにも下線を追記してみます。

1
/* プロフィール */
2
#profile .skin-widgetTitle {
3
color: #644527;  /* 文字色追記 */
4
border-bottom: 3px solid #644527; /* 線を追記 */
5
padding-bottom: 10px;
6
margin-bottom: 6px;
7
}

サイドバーデザインサンプル#

{}の間に下記のコードを入れると、デザインを変更できます。

#644527の色コードはお好きに変更してくださいね。

https://www.colordic.org/

1
.skin-widgetTitle {
2
color: #644527;  /* 文字色追記 */
3
border-top: 2px solid #644527; /* 上の線 */
4
padding-top: 12px;
5
border-bottom: 2px solid #644527; /* 線を追記 */
6
padding-bottom: 12px;
7
margin-bottom: 6px;
8
}

1
.skin-widgetTitle {
2
color: #644527;  /* 文字色追記 */
3
border-left: 5px double #644527; /* 上の線 */
4
padding: 10px;
5
border-bottom: 0;
6
margin-bottom: 6px;
7
}

1
.skin-widgetTitle {
2
color: #ffffff;  /* 文字色 */
3
background-color: #644527; /* 背景色 */
4
padding: 12px;
5
border-bottom: 0;
6
margin-bottom: 6px;
7
}

まとめ#

いかがでしたか？

サイドバーの色合いをかえるだけでも、全体のデザインに統一感がでます。ぜひお試しください。

他にもアメブロのデザインカスタマイズ方法をまとめています↓

自分でできる。アメブロのおしゃれなカスタマイズまとめ