くるみ
- Cocoonの記事一覧のデザインがあまり気に入らない
- トップページの新着記事をどうにかお洒落にしたい
という方に向けて「Cocoonの記事一覧(新着記事)をカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
記事一覧の完成イメージ
PC版
before
after
モバイル版
before
after
カスタマイズ後のインデックスは上の様になります。
そう、お気付きの方もいるかもしれませんが、当サイトで使用しているテーマ「SANGO」のデフォルトのデザインに近づけたものとなっています。
- スニペット(抜粋)と所属カテゴリを非表示にしてシンプルに
- ドロップシャドウで立体感をつけることによって可愛さも
しかしアイキャッチ画像が強調されるようなカスタマイズなので、アイキャッチのクオリティ次第で大きく見栄えが変わるようになります。
「なのでこのカスタマイズを活かせるかどうかは貴方の画像制作のセンス次第…」的な感じです。まあ少し大袈裟かもしれませんが。
もしアイキャッチ画像が欠けて表示されたりサイズが合っていないという場合には以下の記事を参考にしてみてください。
【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ
Cocoonの新着記事一覧のカスタマイズ方法
手順は以下の通りです。くるみ
バックアップは忘れずにしておこう
早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。
「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。
【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法 ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
step1:カードタイプの設定を変える
「カードタイプ」という項目で「縦型カード2列」を選択します。
更にタイトル下にある抜粋を消すために、ページ下部にある「投稿関連情報の表示」の項目の「スニペット(抜粋)の表示」のチェックを外します。
step2:CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

CSSコード
.ect-vertical-card .entry-card-wrap{
max-width: 43%;
box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
border-radius: 3px;
padding:0;
}
@media screen and (max-width:480px){
.ect-vertical-card .entry-card-wrap{
max-width: 46%;
}
.e-card-title {
font-size: 13px;
}
}
.entry-card-title{
color: #5a5a5a; /*見出しの色*/
line-height: 1.6;
}
.ect-vertical-card .entry-card-wrap .entry-card-content {
margin: 8px 12px 9px 12px;
}
.entry-card-meta, .related-entry-card-meta {
color: #b7b7b7;
margin: 4px 8px;
}
.entry-card-wrap .cat-label{
display: none; /*カテゴリを非表示に*/
}
.ect-vertical-card {
justify-content: space-around;
}
.ect-vertical-card .entry-card-wrap{
max-width: 43%;
box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
border-radius: 3px;
padding:0;
}
@media screen and (max-width:480px){
.ect-vertical-card .entry-card-wrap{
max-width: 46%;
}
.e-card-title {
font-size: 13px;
}
}
.entry-card-title{
color: #5a5a5a;
line-height: 1.6;
}
.ect-vertical-card .entry-card-wrap .entry-card-content {
margin: 8px 12px 9px 12px;
}
.entry-card-meta, .related-entry-card-meta {
color: #b7b7b7;
margin: 4px 8px;
}
.entry-card-wrap .cat-label{
display: none;
}
.ect-vertical-card {
justify-content: space-around;
}
ここまで終わればカスタマイズは終了。お疲れ様です!
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は以下のショートカットキーで削除できます。
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
まとめ
やはりサイトの入り口にある記事一覧は目を引くデザインにしたいですよね。
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのCocoonカスタマイズをまとめているので参考にしてみてください。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
トップページの初めにあるカードはどのようにして作られたのですか?
ねこさん
トップページのカードに関しては完全に自作したものでして、
1からPHPファイルに記述して作成したものになります。
(ゆえに何かしらのテーマのデフォルトのものをカスタマイズしたものではありません🙇♂️)