自分で簡単に！ アメブロのヘッダー画像&メニューボタン以外のカスタマイズ方法【新CSS編集デザイン】

背景色を変える：記事エリア以外

/* 背景色を変える 記事エリア以外
----------------------------------*/
.skin-page , .skin-bgHeader , .skin-blogBody, .skin-blogBodyInner , .skin-blogHeaderNav{
background-color: #fbfded;/*カラーコードを書き換える*/
}

上下線を削除：ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア

/* 上下線を削除　ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア
----------------------------------*/
[data-uranus-layout="headerNav"]{
    border: none;
}

余白を挿入：上部

お好みですが、背景色をつけたり、上下線を削除したり・・・すると、上部に余白を入れた方が、画像が少し際立ってバランスが取れるような気がします。

/* 余白を入れる　上部
----------------------------------*/
.skin-bgHeader{
    padding-top: 50px;/*数値を変えることで余白の縦幅の変更可能*/
}

アイコンの色を変える：ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア

/* アイコンの色を変える　ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア
----------------------------------*/
.skin-topNavIcon{
    color: #56ea2d;/*カラーコードを書き換える*/
}

下線をひく：サブカラムの項目&記事タイトル

ここでは、破線にしています。

/* 下線をひく　サブカラムの項目&記事タイトル
----------------------------------*/
.skin-widgetTitle{
    border-bottom: 2px dashed #5ec1b4!important;/*カラーコードを書き換える*/
    padding-bottom: 1em!important;
    margin-bottom: 1em!important;
}

.skin-entryTitle{
    border-bottom: 2px dashed #5ec1b4;/*カラーコードを書き換える*/
}

リンクの文字色を変える：デフォルト&一度押したことのあるリンク

/* リンクの文字色を変える　デフォルト&一度押したことのあるリンク
----------------------------------*/
a , a:visited {
    color: #5ec1b4;/*カラーコードを書き換える*/
}

背景色・枠線・文字色を変える：フォローボタン

/* 背景色・枠線・文字色を変える　フォローボタン
----------------------------------*/
.skin-btnSidePrimary{
    background-color: #5ec1b4;/*背景色：カラーコードを書き換える*/
    border-color: #5ec1b4;/*枠線：カラーコードを書き換える*/
    color: #ffffff;/*文字：カラーコードを書き換える*/
}

背景色・枠線・文字色を変える：サブカラム内の「一覧を見る」ボタン

/* 背景色・枠線・文字色を変える　サブカラム内の「一覧を見る」ボタン
----------------------------------*/
.skin-btnSide, .skin-btnSide:hover, .skin-btnSide:visited{
    background-color: #ffffff;/*背景色：カラーコードを書き換える*/
    border-color: #5ec1b4;/*枠線：カラーコードを書き換える*/
    color: #5ec1b4;/*文字：カラーコードを書き換える*/
}

背景色・枠線・文字色を変える：記事エリア上のボタン

/* 背景色・枠線・文字色を変える　サブカラム内の「一覧を見る」ボタン
----------------------------------*/
.skin-btnPaging , .skin-btnPaging:hover, .skin-btnPaging:visited{
    background-color: #eae779;/*背景色：カラーコードを書き換える*/
    border-color: #eae779;/*枠線：カラーコードを書き換える*/
    color: #333333;/*文字：カラーコードを書き換える*/
}

丸の背景色を変える：カレンダー

/* 丸の背景色を変える　カレンダー
----------------------------------*/
.skin-calendarDate.is-active {
    background-color: #fffffff;
}