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

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は記事の一覧表示をカスタマイズしてみました。完成するとこんな感じになります↓（gifなので少し荒いですが）

各パーツごとに分けて紹介していきますので、お好きな部分だけ取り入れたりするのも簡単だと思います。それとCocoon設定の「インデックス > カードタイプ」でどれを選んでも大丈夫です。

それでは早速やっていきましょう〜。

メインカラムやサイドバーの背景色を消す

まずは記事一覧ページの背景を消す方法です。これはやらなくても大丈夫なので、まずはそのままカスタマイズしてみて後から調整しても良いと思います。

投稿ページや固定ページは白い背景を残したまま、一覧ページだけ背景を消す時はこちらのコード↓

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

僕の場合は投稿ページも固定ページも全て背景を消して、さらにサイドバーの背景も消しています。その場合はこちらのコードになります↓

.main, .sidebar {
    background: none;
}

記事一覧のカテゴリーの表示をカスタマイズ

ますはカテゴリー表示のカスタマイズですが、１つ目はシンプルに背景色を変えたり角を丸くしたバージョンです。CSSのコードはこちら↓

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

上記コードでこのようになります↓

次はもう少し手を加えて、立体的にリボンがかかっているようなバージョンです。コードも少し長くなりますがこのようになります↓

.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;
}

擬似要素「::after」で右上に小さな三角を配置することで立体感を出していますが、この三角を少し暗めの色にするのがポイントですね。このようになります↓

背景色などはサイトに合わせてお好みで変えてくださいね。

スマホでカテゴリー名が入らない場合

一覧のカードタイプで「画像が左、タイトルが右」になるような設定の場合は、カテゴリー名が長いとスマホで全て表示されない場合があります。

その場合は以下のCSSを追加してください。

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

「font-size」の値でスマホ表示（480px以下）での文字サイズを調整できますが、カテゴリー名の長さによって最適な文字サイズも変わるのでサイトに合わせて調整してみてください。

画像に影を付けてフワっと浮かせる

次は画像にマウスを置いた時にフワッと浮くようにしてみます。最近よく見かけますが、今回は記事タイトルなどは動かさずに画像だけを浮かせるので「SANGO」や「JIN」とは少し違った感じになります。

CSSのコードはこちら↓

.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;
}

冒頭で書いたように基本的にはどのカードタイプを選んでも大丈夫ですが、「縦型カード」「タイルカード」などはタイトルとの距離が近すぎて少し窮屈になってしまいます↓

ということで次はタイトル部分をカスタマイズしてみましょう。

タイトルのデザインを修正

タイトル部分は画像との間に余白を作るのと、デフォルトの行間が少し狭いので広くしてみました。CSSのコードはこちら↓

.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; /*スマホでの行間*/
    }
}

これで余白がついて見栄えも良くなりましたね↓

１つ前のコードで「マウスホバー時の全体の背景色を消す」CSSを入れましたが、タイトルにマウスを置いた時に何も反応がなくなってしまうので、マウスホバーで色が変わる様にしています。

日付部分も調整する

最後に細かいですが、日付の部分も少しいじります。

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

少し色を薄くしたのと、スマホで見た時に文字が大きい感じがしたので小さくしました。こちらもお好みでどうぞ。

ということで今回はCocoonの記事一覧表示のカスタマイズでした！誰かの参考になれば幸いです。ではまた〜♪