タイトルの一部の色を変える

質問

WordPressで作ったサイトのサイトタイトルと固定ページの記事タイトル。
これらの一部の色を変えたいです。

例えば、「MOVE」というサイトタイトル・記事タイトルだと、
「O」だけを赤にしたい場合、どうやればできるでしょうか？

調べてみても、サイトタイトル全部の色を変える方法ばかりでした。
よろしくお願いいたします。

回答No.1

4017B · ベストアンサー

WP標準の公式テーマだと「記事タイトル」の中身の1文字のみをピンポイントで色変化させる様な機能はありませんし、後付けでそれを行える様なHTMLタグ等を付与する機能もありません。従ってそれを実行させるためには自分でそういいた機能を内包するテーマを自作するか、或いは後付けで変更可能な様に自作のJavascript(JS)を作って該当するwebページ内部でそれらのスクリプトを読み込ませて自動実行させる様にするしか方法はありません。

色々なアプローチの仕方が考えられますが…

<h1>記事タイトル</h1> → <h1>記<span class="title-color-change">事</span>タイトル</h1>

.title-color-change {
color: #fff;
}

～以上の様に色変化させたい文字を <span>で囲ってそれにクラス指定してCSSで実際の色変化などを指定する方法が最も簡単な方法ですが…この方法をWPで実装する場合、functions.php に自作関数を記述して全ての記事が投稿編集される毎にDBをチェックして、該当する文字部分に <span class="title-color-change">～</span> を自動付与する様にする必要があり、何というかかなり面倒です。

従ってWP本体や functions.php はあまり弄らずに、後からwebページが表示された時点で動的に表示内容をチャックしてリアルタイムに書き換える方法をJavascriptで実装させた方が、後からの変更修正やメンテナンスも簡単になるのでその方向性をお勧めします。

で、本題ですが…質問では漠然と「"O"だけを赤にしたい」とありますが具体的にはその様な条件で色変化させたいのかが重要です。つまり「先頭から2文字目」なのか「タイトルに含まれる"O"を」なのか？、或いは「タイトルが"MOVE"の時の"O"のみを」なのか？この他にも特定の記事のみに適用させるのか、全ての投稿記事に一律に適用させるのかで条件分岐のさせ方が変わります。PHPにしろJavascriptにしろプログラムは常に "個別具体的に" 記述しないと上手く機能しないので条件を正確に絞り込むのが何よりも最重要事項です。