こんにちは😀広瀬ユキです。
今回は、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】シンタックスハイライターの説明、設定方法、使い方について書きました。...
☆クリックで応援お願いします☆