JINカスタマイズ

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

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

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

WordPress有料テーマ【JIN】を使っている方向けの記事です。

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

表示される場所

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

サイトタイトルの詳しい設定方法はコチラ↓

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

サイトタイトルの色は、

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

スマホの画面上では、

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

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

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

【オススメの設定】

  • カスタマイズ画面で「タイトルの文字色」を設定
  • サイトタイトルの色をCSSでカスタマイズする or サイトロゴを設定する
スマホの画面上の色に関する詳しい説明はコチラ↓
【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法:2種類【WordPress】【JIN】スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法について書きました。...

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

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;/*太字*/
}
/*サイトタイトル*/

/* */ で囲ってある部分はメモ書きなので、削除しても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でのカスタマイズが良いかもしれません。

【WordPress】【JIN】「Warning」エラーが表示されてしまった時の対処法【WordPress】有料テーマ【JIN】を使っている方向けに、「Warning」というエラーが表示されてしまった時の対処法について書きました。...
【WordPress】【JIN】Twitterカードのサイズを設定する方法【便利】大きく設定しよう!【WordPress】有料テーマ【JIN】を使っている方向けに、Twitterカードのサイズを設定する方法について書きました。【便利】summary_large_imageに設定するのがオススメです。...
【WordPress】【JIN】シンタックスハイライターって何?説明&設定方法&使い方【WordPress】有料テーマ【JIN】シンタックスハイライターの説明、設定方法、使い方について書きました。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ