【Cocoon】サイドバーをすっきり可愛くカスタマイズ｜初心者でもできたCSSまとめ

/* サイドバーを少し細くする */
@media screen and (min-width: 1024px) {
    .sidebar {
        width: 260px !important;
    }
}

/* サイドバーのピンクの見出しを細くする */
.sidebar .widget-title {
    padding: 5px 10px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
}

/* サイドバーの見出し文字を中央揃えにする */
.sidebar .widget-title {
    text-align: center !important;
}

/* プロフィールの自己紹介文を小さくする */
.sidebar .author-description {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* サイト内検索の文字を小さくする */
#sidebar .search-box input,
#sidebar .search-edit {
    font-size: 11px !important;
}

/* カテゴリーの文字サイズと行間を調整する */
#sidebar .widget_categories li {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin: 0 !important;
}

#sidebar .widget_categories li a {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* カテゴリー名の左に小さな丸を表示する */
#sidebar .widget_categories li {
    position: relative;
    padding-left: 18px;
}

#sidebar .widget_categories li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F4B6B8;
}

/* カテゴリーごとに丸の色を固定 */

/* おうちスイーツ */
.sidebar .widget_categories .cat-item-8::before {
    background: #F4B6B8 !important;
}

/* ハンドメイド */
.sidebar .widget_categories .cat-item-12::before {
    background: #A9DDD6 !important;
}

/* 旅行 */
.sidebar .widget_categories .cat-item-33::before {
    background: #F5AAA2 !important;
}

/* 編み物 */
.sidebar .widget_categories .cat-item-35::before {
    background: #A9DDD6 !important;
}

/* ブログ作り */
.sidebar .widget_categories .cat-item-20::before {
    background: #BFD5E5 !important;
}

/* おうち時間 */
.sidebar .widget_categories .cat-item-6::before {
    background: #DCCDBD !important;
}

/* ドイツ語学習 */
.sidebar .widget_categories .cat-item-9::before {
    background: #F3D99B !important;
}

/* 日々のあれこれ */
.sidebar .widget_categories .cat-item-13::before {
    background: #CFC3E6 !important;
}

/* Cocoonカスタマイズ */
.sidebar .widget_categories .cat-item-42::before {
    background: #BFD5E5 !important;
}