WordPress Cocoon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSのコードはこちら↓

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

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

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

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

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

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

日付部分も調整する

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

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

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

コメント

  1. カスタマイズ記事大変参考になります!
    Cocoonで実装されたAmazonなどのショートコードを見栄えよくカスタマイズする方法を記事にしていただくと助かります。
    (ボタンの幅だとか色合いなど)

    • リクエストありがとうございます!
      近いうちに書きますね!