こんにちは😀広瀬ユキです。
今回は、WordPress有料テーマ【JIN】を使っている方向けに、サイトタイトルの色を変えるCSSカスタマイズをご紹介します。
WordPress有料テーマ【JIN】を使っている方向けの記事です。
サイトタイトルって何?どこに表示されるの?
表示される場所
サイトタイトルは、ページの最上部に表示されます。

色を変えるかサイトロゴを設定するのがオススメ!
サイトタイトルの色は、
WordPressの編集画面から、「外観」→「カスタマイズ」→「カラー設定」→「タイトルの文字色」で変更でき、パソコンの画面上では特に問題はないのですが、
スマホの画面上では、
- サイトタイトル
- 検索バー
- ハンバーガーメニュー(上部の三本線)
上記の色がデフォルト(初期設定)では同じ色になります。
なので、サイトタイトルはCSSでカスタマイズして色を変えるか、サイトロゴを使うことをオススメします。
【オススメの設定】
- カスタマイズ画面で「タイトルの文字色」を設定
- サイトタイトルの色をCSSでカスタマイズする or サイトロゴを設定する


サイトタイトルの色をCSSでカスタマイズする方法
CSSにコードを追加して、サイトタイトルの色を変えてみましょう。
コードを追加する方法が分からない方は、下記の記事を参考にして下さい。


コード
/*サイトタイトル*/
#site-info span a{
color: #aaa !important;/*色*/
}
/*サイトタイトル*/
もっとアレンジしたい方はコチラ↓お好みで、不必要な部分は削除して下さい!
/*サイトタイトル*/
#site-info span a{
color: #aaa !important;/*色*/
font-family: "sans-serif";/*フォント*/
font-size: 1.0rem;/*サイズ*/
font-weight: bold;/*太字*/
}
/*サイトタイトル*/
/* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
#site-info span a{
color: #aaa !important;
}
#site-info span a{
color: #aaa !important;
font-family: 'sans-serif';
font-size: 1.0rem;
font-weight: bold;
}
説明
- color:#aaaには、お好みのカラーコードを入れてください。
- font-family:フォントの種類
- font-size:文字のサイズ
- font-wight:太字
通常、カスタマイズ画面で「タイトルの文字色」を設定すると、以下のような表示になります。※ここでは色を#cc0088に設定
Before | |
パソコン | ![]() ![]() |
スマホ | ![]() ![]() |
では、試しに「タイトルの文字色」はそのままの設定で、サイトタイトルを変えるコードをCSSに追加してみます。すると、このような色になります。
After | |
パソコン | ![]() ![]() |
スマホ | ![]() ![]() |
#site-info span a{
color: #fff !important;
}
サイトタイトルの色を変えるCSSカスタマイズができました‼
サイトロゴを設定する方法
サイトロゴを設定する方法は、下記の記事を参考にしてください。
編集後記
当ブログはサイトロゴを使っていますが、サイトを重くしたくない場合は、CSSでのカスタマイズが良いかもしれません。





