【Cocoon】新着記事一覧をおしゃれにする簡単カスタマイズ

【Cocoon】新着記事一覧をオシャレに!簡単カスタマイズ

くるみ

記事一覧のデザインを可愛くしたいんだぞ
ということで今回は

  • Cocoonの記事一覧のデザインがあまり気に入らない
  • トップページの新着記事をどうにかお洒落にしたい

という方に向けて「Cocoonの記事一覧(新着記事)をカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

記事一覧の完成イメージ

PC版

before

Cocoonのカスタマイズ前の記事一覧

after

Cocoonのカスタマイズ後の記事一覧

モバイル版

before

Cocoonのカスタマイズ前の記事一覧(モバイル)

after

Cocoonのカスタマイズ後の記事一覧(モバイル)

カスタマイズ後のインデックスは上の様になります。

そう、お気付きの方もいるかもしれませんが、当サイトで使用しているテーマ「SANGO」のデフォルトのデザインに近づけたものとなっています。

  • スニペット(抜粋)と所属カテゴリを非表示にしてシンプルに
  • ドロップシャドウで立体感をつけることによって可愛さも

しかしアイキャッチ画像が強調されるようなカスタマイズなので、アイキャッチのクオリティ次第で大きく見栄えが変わるようになります。

「なのでこのカスタマイズを活かせるかどうかは貴方の画像制作のセンス次第…」的な感じです。まあ少し大袈裟かもしれませんが。

もしアイキャッチ画像が欠けて表示されたりサイズが合っていないという場合には以下の記事を参考にしてみてください。
【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ

Cocoonの新着記事一覧のカスタマイズ方法

手順は以下の通りです。

手順
step1
カードタイプの設定を変える
step2
CSSコードをコピペする
思ってたより簡単じゃん!

くるみ

バックアップは忘れずにしておこう

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。
WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法 ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

step1:カードタイプの設定を変える

step1
「Cocoon設定」から「インデックス」を選択
step2
カードタイプを「縦型カード2列」を選択

カードタイプを「縦型カード2列」を選択

「カードタイプ」という項目で「縦型カード2列」を選択します。

step3
スニペットを消す

スニペットを消す

更にタイトル下にある抜粋を消すために、ページ下部にある「投稿関連情報の表示」の項目の「スニペット(抜粋)の表示」のチェックを外します。

step2:CSSコードをコピペする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

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の記事一覧のカスタマイズ方法でした。

やはりサイトの入り口にある記事一覧は目を引くデザインにしたいですよね。

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのCocoonカスタマイズをまとめているので参考にしてみてください。

Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

2 COMMENTS

おはようポテトのアイコン おはようポテト

ねこさん

トップページのカードに関しては完全に自作したものでして、
1からPHPファイルに記述して作成したものになります。

(ゆえに何かしらのテーマのデフォルトのものをカスタマイズしたものではありません🙇‍♂️)

返信する

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。