SWELLでTOPページに記事一覧のサムネイル下にタグを全表示させる方法

2025-04-01

ファイルのパス

親テーマに記述しました。

更新すると消えますがとりあえず。

ファイルのパスはこちらです。
parts/post_list/style_normal.php

一番下の方

</a>

より下、

</li>

より上に記述した。

表示させるコード

    <!-- タグ表示の追加部分 -->
    <?php
    if (has_tag()) {
        echo '<div class="post-tags it-tag c-tagList">';
        the_tags("", " ", ""); // カンマで区切る
        echo '</div>';
    }
    ?>

CSS

デザイン調整

/*=================*/
/** 投稿リストのタグ表示 **/
/*=================*/

/* アイコン非表示 */
.c-tagList:before {
    display: none;
}

/* タグ間の余白を調整 */
.p-postList__body .post-tags a {
    display: inline-block;
    margin-right: 5px; 
}

.p-postList__link {
    display: inline;
}

.post-tags {
    display: inline-block;
}

/* タグのデザイン調整 */
.it-tag a {
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background-color: #49b7e6; /* 背景色 */
    border-radius: 16px; /* 背景角丸 */
    padding: 2px 10px; /* 背景余白 */
    margin-top: 3px;
    font-size: 12px !important; /* 文字サイズ */
}