【Cocoon】サイドバーの見出しデザインをカスタマイズ

1. .sidebar h3 {
2. background-color: #f3f4f5;
3. padding: 16px 10px;
4. margin: 16px 0;
5. }

.sidebar h3 {
    background-color: #f3f4f5;
    padding: 16px 10px;
    margin: 16px 0;
}

1. .sidebar h3 {
2. background: none; /*背景色を解除*/
3. padding: 0; /*余白をなしに*/
4. font-size: 16px; /*文字サイズを小さく*/
5. letter-spacing: 2px; /*文字の間隔を少し広く*/
6. }
7. .sidebar h3:first-letter {
8. font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
9. }
10. .sidebar h3:after { /*グラデーションのラインを引く*/
11. content:"";
12. display:block;
13. height:1px;
14. width:100%;
15. background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
16. background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
17. }

.sidebar h3 {
    background: none; /*背景色を解除*/
    padding: 0; /*余白をなしに*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
}
.sidebar h3:first-letter {
    font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
}
.sidebar h3:after { /*グラデーションのラインを引く*/
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

1. .sidebar h3 {
2. background: none;
3. font-size: 16px;
4. letter-spacing: 2px;
5. display: inline-block;
6. position: relative;
7. width: 100%;
8. padding: 0;
9. text-align: center;
10. }
11. .sidebar h3::before, .sidebar h3::after {
12. content: '';
13. position: absolute;
14. top: 50%;
15. width: 28%; /*ラインの長さ*/
16. border-top: 3px solid #444d53; /*ラインの色*/
17. }
18. .sidebar h3::before {
19. left: 0;
20. }
21. .sidebar h3::after {
22. right: 0;
23. }

.sidebar h3 {
    background: none;
    font-size: 16px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}