さやろぐでは、トップページの記事一覧をカスタマイズするときに、STORK（ストーク）というテーマの一部を参考にしています。
特にカテゴリ名のラベルをアイキャッチ画像の右上に持ってくることで、STORK（ストーク）っぽさが格段に上がりました。
カテゴリ名が判別しやすくていいね！
この記事では、Simplicity2で記事一覧のアイキャッチ画像にカテゴリ名を表示させるカスタマイズの2パターンを、備忘録として残しておきます。
Simplicity2の後継機である「Cocoon」では、標準でアイキャッチ画像にカテゴリラベルを実装できるようになっていますのでカスタマイズは不要です。
INDEX
Simplicity2で記事一覧のアイキャッチ画像にカテゴリ名のラベルを表示させる方法（要php編集）
Simplicity2で記事一覧のアイキャッチ画像にカテゴリ名のラベルを表示させるために、「人生を100倍豊かに生きる秘訣」（アツシゲ様）の記事を参考にさせていただきました。
分かりやすい解説、ありがとうございます！
やったことと言えば、上記のブログの記事で紹介されている内容と同じです。
備忘録がてら、わたしの記事でも残しておきます。
注意
このカスタマイズでは、CSSとentry-card.phpをさわります。
必ずバックアップをとってからカスタマイズを行ってくださいね。
entry-card.phpの記述
まずはentry-card.phpの記述をします。
記述する箇所は2つあります。
1.<div class="catname">
「<?php if ( is_entry_card_style() ): //デフォルトのサムネイルカード表示の場合?>」の真下に以下のコードをコピペします。
<div class="catname">
2.<p class="catname-label">
「<?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>」の真下に以下のコードをコピペします。
<p class="catname-label">
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
</p>
</div>
phpは記述を間違えると、最悪の場合は表示されなくなることがあるとってもデリケートな部分です。
入力する位置や内容などを間違えないようにしてくださいね。
style.cssの記述
style.cssに以下の記述をコピペします。
p.catname-label {
position: relative;
color: #fff;/* 文字色 */
font-size: 12px;/* フォントの大きさ */
background: #000;/* ラベルの背景色 */
padding-right: 5px;/* ラベル内余白(左) */
padding-left: 5px;/* ラベル内余白(右) */
}
.catname {
position: absolute;
font-weight: bold;
text-align: center;
margin-top: -12px;/* ラベルの余白(上) */
margin-bottom: 0px;
}
これで記事一覧のアイキャッチ画像にカテゴリ名のラベルが表示されます。
Simplicity2で記事一覧のアイキャッチ画像にカテゴリ名のラベルを表示させる方法（php編集なし）
上記のカスタマイズ方法でも問題なくカテゴリ名は表示されますが、phpの編集ってちょっと抵抗あったりするんですよね。
そんな方は、CSSのみで実装しましょう。
#list .category .fa {
display: none; /* アイコン非表示 */
}
#list .entry {
position: relative;
}
#list .category {
position: absolute;
right: 0px;
top: 0px;
background: #000; /* 背景色 */
color:#fff; /* 文字色 */
font-size:0.8em; /* 文字大きさ */
border-radius: 4px; /* 角の丸み */
margin:0.5em 1em 0.5em 1em; /* ラベルの外側の余白 */
opacity: 0.9; /* 透明度0～1 */
text-decoration:none!important; /* 下線なし */
}
#list .post-meta .category a {
font-weight:normal; /* リンクの文字の太さ */
}
#list .post-meta .category {
padding: 0.4em 1em 0.4em 1em;
}
わたしはこのCSSでカテゴリ名のラベルの実装をしています。
phpをさわるのに抵抗があれば、CSSのみの実装でよいのかな～と思います。
このCSSはどこかのブログで紹介されていたものをアレンジしたのですが、どこのブログから持ってきたものなのか失念してしまいました。分かる方がいれば教えてください。
アイキャッチ画像にカテゴリラベルを表示させるのはカンタン！
記事一覧のアイキャッチ画像にカテゴリラベルがあると、オシャレに見える上に、カテゴリの分類も分かりやすいですよね。
STORK（ストーク）の記事一覧に惚れこんでこのカスタマイズをしたかったのですが、なかなか実装できず…けっこう調べまくったように思います。
でも悲しいことに（？）最近のテーマは標準でカテゴリラベルが表示できるようになっています。
Simplicity2やその他のテーマなどで、カテゴリラベルが標準で装備されていないテーマを利用している方は、ぜひこちらのコードを利用してみてくださいね。
コードを分かりやすく解説してくださったブロガー様に感謝！
