【WordPress】【JIN】サイトタイトルの色を変えるCSSカスタマイズ★オススメ★

こんにちは😀広瀬ユキです。

今回は、WordPress有料テーマ【JIN】を使っている方向けに、サイトタイトルの色を変えるCSSカスタマイズをご紹介します。

サイトタイトルって何？どこに表示されるの？

表示される場所

サイトタイトルは、ページの最上部に表示されます。

JIN MANUAL

あわせて読みたい

「サイトタイトル」と「ディスクリプション」の設定方法｜JIN MANUAL

ここではWordPressテーマ「JIN」によるサイトタイトルの設定方法・ディスクリプションの設定方法について説明をして

続きを読む

色を変えるかサイトロゴを設定するのがオススメ！

サイトタイトルの色は、

WordPressの編集画面から、「外観」→「カスタマイズ」→「カラー設定」→「タイトルの文字色」で変更でき、パソコンの画面上では特に問題はないのですが、

スマホの画面上では、

• サイトタイトル
• 検索バー
• ハンバーガーメニュー（上部の三本線）

上記の色がデフォルト（初期設定）では同じ色になります。

なので、サイトタイトルはCSSでカスタマイズして色を変えるか、サイトロゴを使うことをオススメします。

【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法：2種類【WordPress】【JIN】スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法について書きました。...

サイトタイトルの色をCSSでカスタマイズする方法

CSSにコードを追加して、サイトタイトルの色を変えてみましょう。

コードを追加する方法が分からない方は、下記の記事を参考にして下さい。

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加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;/*太字*/
}
/*サイトタイトル*/

#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カスタマイズができました‼

サイトロゴを設定する方法

サイトロゴを設定する方法は、下記の記事を参考にしてください。

JIN MANUAL

あわせて読みたい

サイトロゴ画像の設定方法｜JIN MANUAL

サイトロゴを設定する ここではJINにおける「サイトロゴ」の設定方法についてご紹介しましょう。 「カスタマイズ」>「ヘッ

続きを読む

JIN MANUAL

あわせて読みたい

「サイトタイトル」と「ロゴ画像」の大きさを調整する方法｜JIN MANUAL

「サイトタイトル」と「ロゴ画像」の文字サイズを調整する サイズを調整する（PC） タイトル（ロゴ画像）のサイズ調整を行な

続きを読む

編集後記

当ブログはサイトロゴを使っていますが、サイトを重くしたくない場合は、CSSでのカスタマイズが良いかもしれません。

【WordPress】【JIN】「Warning」エラーが表示されてしまった時の対処法【WordPress】有料テーマ【JIN】を使っている方向けに、「Warning」というエラーが表示されてしまった時の対処法について書きました。...

【WordPress】【JIN】Twitterカードのサイズを設定する方法【便利】大きく設定しよう！【WordPress】有料テーマ【JIN】を使っている方向けに、Twitterカードのサイズを設定する方法について書きました。【便利】summary_large_imageに設定するのがオススメです。...

【WordPress】【JIN】シンタックスハイライターって何？説明＆設定方法＆使い方【WordPress】有料テーマ【JIN】シンタックスハイライターの説明、設定方法、使い方について書きました。...