非公開のテキストの色をかえる設定

「非公開」の文字だけ色を変える手順

非公開の設定をすると、以下のようにタイトルの頭に非公開と表示されるようになる。デフォルトは黒色で荷太さもタイトルと同じである。

非公開のテキストの色をかえる設定

その文字をパッとみた時『非公開』と分かるようにオレンジにした。

1. functions.php にコードを追加する

テーマの functions.php ファイルに、以下のコードを追加。
実際は『コードスニペット』PHPで設定している。

function custom_private_title_format($format) {
    // 「非公開:」の文字を専用のspanタグで囲む
    return '<span class="private-text">非公開</span>: %s';
}
add_filter('private_title_format', 'custom_private_title_format');

このコードを入れることで、「非公開」の文字の周りに .private-text というクラス名をつけて出力してくれるようになる。

2. 追加CSSで色を指定する

実際は『コードスニペット』CSSで設定している。

/* 「非公開」の文字だけを好きな色(例:赤)に変える */
.private-text {
    color: #ff9900; /* ここにお好みのカラーコードを入れてください */
    font-weight: 400; /* 必要に応じて太字にする場合 */
}

これで「非公開」という文字だけにスタイルが適用され、後ろに続く記事タイトルは元の色のままにすることができる。

スポンサーリンク

polo-web

Macにハマって30年近く、毎日コンピュターの前に座って時間を過ごしている。

お陰で頭痛との戦いである。