【Cocoon】インデックスの記事説明のカスタマイズ

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoon インデックスの記事説明
インデックスの記事説明のカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のインデックスの記事説明
最後に

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

今回は、WordPressテーマ Cocoonでの「インデックスの記事説明」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon インデックスの記事説明

WordPressテーマ Cocoonのインデックスは、過去にもカスタマイズを行ってきました。

【Cocoon】インデックスホバー時のタイトルのカスタマイズ

WordPressテーマ Cocoonのインデックスについては先日にもカスタマイズを行ってきました。今回そのインデックスをホバーしたときのタイトルに対して少しだけ変化（タイトルに対してサイトカラーのピンク枠線を表示するデザイン）を付けてみました。

【Cocoon】インデックスのタイトルのカスタマイズ

WordPressテーマ Cocoonのインデックスについては過去にもカスタマイズを行ってきました。今回そのインデックスの中のタイトルについて「見出し１タイトル（h1タグ）」と同じく、ピンクで左に縦線を入れたデザインとしてみました。

【Cocoon】インデックスをカスタマイズする

WordPressテーマ Cocoonの【インデックス（カードタイプ：縦型カード2列）】をカスタマイズしてみました。主なカスタマイズの内容は、インデックスの枠を表示し、マウスカーソルをホバーすると枠を強調するものとなっています。

現在、WordPressテーマ Cocoonの設定で「インデックスの記事説明」は、次の様になっています。

タイトルについてはカスタマイズが完了しているので、次に「インデックスの記事説明」についてカスタマイズを行ってみました。

インデックスの記事説明のカスタマイズ

WordPressテーマ Cocoonで「インデックスの記事説明」のカスタマイズを行います。

カスタマイズ内容

「インデックスの記事説明」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

.entry-card-snippet.card-snippet.e-card-snippet{
  font-weight: 600; /*文字強調*/
}
.post-date, .post-update{
  font-weight: 600; /*文字強調*/
}
.post-comment-count{ /*コメント数*/
  color: #333; /*文字色*/
  font-size: 14px; /*フォントサイズ*/
  font-weight: 600; /*文字強調*/
}