MENU

Arkhe｜投稿リストブロックのサムネイルの上にカテゴリーを表示する方法

広告
テーマカスタマイズ
Arkhe
masu
Arkheで投稿リストブロックのサムネイルの上にカテゴリーを表示する方法

WordPressテーマArkheの投稿リストにおいて、アイキャッチ画像の右上にカテゴリー名を表示するカスタマイズです。CSSのみでカスタマイズしています。

目次

Arkheの投稿リストのサムネイル上にカテゴリーを表示した例

実現したいことは次のように、カード型投稿リストにおいて、サムネイルの上にカテゴリー名を表示することです。

カード型の投稿リスト

通常、カード型の投稿リストでは投稿日のすぐ隣にカテゴリー名が表示されます。

SWELLのように外観＞カスタマイズからカテゴリーの表示位置を変更できないか探しましたが、残念ながらそういったオプションはありませんでした。

CSSを駆使してカスタマイズしてみました。

コードの完成形

早速ですがコードの完成形です。style.cssに追加してください。

.p-postList.-type-card {
    position: relative;
}

.p-postList.-type-card .p-postList__link:hover .p-postList__body {
    opacity: 1;
}

.p-postList.-type-card .p-postList__body,
.p-postList.-type-card .p-postList__meta {
    position: static;
}

.p-postList.-type-card .p-postList__meta {
    letter-spacing: 0.05em;
}

.p-postList.-type-card .p-postList__category {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--ark-color_bg); /* 好きな色に調整 */
    background-color: var(--ark-color_main); /* 好きな色に調整 */
    margin: 0;
    padding: 0.25em 1em;
    opacity: 1;
    border-radius: 0 0 0 10px;
}

.p-postList.-type-card .p-postList__category svg {
    display: none; /* アイコンを表示する場合は不要 */
}

カテゴリーの文字色と背景色はお好きなものに変更してご使用ください。

また、アイコンを表示する場合は.p-postList__category svgのdisplay: none;は不要です。

テーマカスタマイズ
Arkhe
目次