【Cocoon】記事一覧をオシャレにカスタマイズする方法

1. .home .main, .archive .main {
2. background: none;
3. }

.home .main, .archive .main {
    background: none;
}

1. .main, .sidebar {
2. background: none;
3. }

.main, .sidebar {
    background: none;
}

1. .cat-label {
2. top: 0.5em; /*上からの距離*/
3. left: 0.5em; /*左からの距離*/
4. border: none; /*ボーダーを消す*/
5. font-size: 12px; /*文字サイズ*/
6. color: #fff; /*文字色*/
7. background-color: #49add1; /*背景色*/
8. padding: 1px 10px; /*余白*/
9. border-radius: 14px; /*角を丸く*/
10. }

.cat-label {
    top: 0.5em; /*上からの距離*/
    left: 0.5em; /*左からの距離*/
    border: none; /*ボーダーを消す*/
    font-size: 12px; /*文字サイズ*/
    color: #fff; /*文字色*/
    background-color: #49add1; /*背景色*/
    padding: 1px 10px; /*余白*/
    border-radius: 14px; /*角を丸く*/
}

1. .cat-label {
2. top: 0;
3. left: 10px;
4. border: none;
5. font-size: 12px;
6. color: #fff;
7. background-color: #49add1;
8. padding: 1px 5px;
9. margin: -6px 0 0 0;
10. overflow: visible;
11. }
12. .cat-label::after { /*右上に小さな三角を作る*/
13. position: absolute;
14. content: '';
15. top: 0;
16. right: -6px;
17. border: none;
18. border-bottom: solid 6px #3089a9; /*小さな三角の色*/
19. border-right: solid 6px transparent;
20. }

.cat-label {
    top: 0;
    left: 10px;
    border: none;
    font-size: 12px;
    color: #fff;
    background-color: #49add1;
    padding: 1px 5px;
    margin: -6px 0 0 0;
    overflow: visible;
}
.cat-label::after { /*右上に小さな三角を作る*/
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #3089a9; /*小さな三角の色*/
    border-right: solid 6px transparent;
}

1. @media screen and (max-width: 480px){
2. .cat-label {
3. font-size: 9px;
4. max-width: 90%;
5. overflow: visible;
6. }
7. }

@media screen and (max-width: 480px){
  .cat-label {
    font-size: 9px;
    max-width: 90%;
    overflow: visible;
}
}

1. .entry-card-thumb {
2. transition-duration: 0.3s; /*アニメーションの時間*/
3. box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
4. }
5. .entry-card-thumb:hover {
6. transform: translateY(-6px); /*マウスホバーで上に移動*/
7. box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
8. }
9. .entry-card-thumb img { /*画像下の隙間を消す*/
10. vertical-align: bottom;
11. }
12. .a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
13. background: none;
14. }

.entry-card-thumb {
    transition-duration: 0.3s; /*アニメーションの時間*/
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}
.entry-card-thumb:hover {
    transform: translateY(-6px); /*マウスホバーで上に移動*/
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}
.entry-card-thumb img { /*画像下の隙間を消す*/
    vertical-align: bottom;
}
.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
    background: none;
}

1. .entry-card-title {
2. margin-top: 10px; /*上に余白を付ける*/
3. line-height: 1.5; /*行間を広く*/
4. }
5. .entry-card-title:hover {
6. color: #49add1; /*マウスホバー時の色*/
7. }
8. @media screen and (max-width: 768px){
9. .entry-card-title {
10. font-size: 14px; /*スマホでの文字の大きさ*/
11. line-height: 1.4; /*スマホでの行間*/
12. }
13. }

.entry-card-title {
    margin-top: 10px; /*上に余白を付ける*/
    line-height: 1.5; /*行間を広く*/
}
.entry-card-title:hover {
    color: #49add1; /*マウスホバー時の色*/
}
@media screen and (max-width: 768px){
    .entry-card-title {
        font-size: 14px; /*スマホでの文字の大きさ*/
        line-height: 1.4; /*スマホでの行間*/
    }
}

1. .e-card-info {
2. color: #666; /*色を薄く*/
3. }
4. @media screen and (max-width: 768px){
5. .e-card-info {
6. font-size: 11px; /*スマホでの文字サイズ*/
7. }
8. }

.e-card-info {
  color: #666; /*色を薄く*/
}
@media screen and (max-width: 768px){
    .e-card-info {
  font-size: 11px; /*スマホでの文字サイズ*/
    }
}