Entry_Headlineにてカテゴリーごとにlabelの色分けをするには

[y k]

お世話になっております。

随分昔にどなたかのブログで拝見したことがあるような気がするのですが探しきれなかったため質問させてください。

v.2.10.15を使用しております。

Entry_Headlineにカテゴリーラベルが表示されております。

そのラベルの色をカテゴリーごとに変更したいのですが

1.どのファイルの

2.どの場所へ

3.どのように

記述すれば良いか教えて頂けませんでしょうか？

お忙しいところ恐縮ですがよろしくお願い致します。

[Sugar]

お世話になっております。

アップルップルの菅原です。

カテゴリーごとに色を変更したいということですね。

Entry_Headlineにカテゴリーラベルが表示されているということなので、{categoryName} の変数を使用されていますでしょうか？

Entry_Headlineの変数表に{categoryCode}という変数もありますので、そちらをクラスとして出力してCSSで色の装飾をするとできるかと思います。

1.どのファイルの

2.どの場所へ

3.どのように

ですが、カスタマイズされている状況によって変わってきますので、v.2.10.15に入っているsite2019を例にお答えします。

① カテゴリー色装飾用classを追加

themes/site2019/include/entry/headline.html の

<span class="acms-label">{categoryName}</span>

を、下記に変更

<span class="acms-label headline-label -{categoryCode}">{categoryName}</span>

② 装飾用classのスタイルを記述するファイルを開く

scssを使用しているなら

themes/site2019/scss/_headline.scss

を開きます。

scssを使用していないなら

themes/site2019/include/head/link.html で読み込んでいるCSSファイルを確認し、そのファイルを開きます。

例）themes/site2019/css/dest/site.css

③ スタイルを追記

②で開いたファイルに下記をカテゴリーの数ぶん追加します。site2019 であれば .headline-title {} の下あたりがいいかと思います。

.headline-label.-カテゴリーコード {

background-color: #f3d2acなどのカラーコード;

/* color: #333333などのカラーコード; */

}

以上となります。

お試しください。

2021年6月18日金曜日 14:57:00 UTC+9 yumiko....@gmail.com:

[y k]

菅原 様

お世話になっております。

大変詳細な情報を有難うございます。

上記の通り作業致しましたら、出来ました！

本当に有難うございました。助かりました。

2021年6月21日月曜日 11:45:22 UTC+9 suga...@appleple.com: