【WordPress】【JIN】プロフィールの文字色のCSSカスタマイズ

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

今回は、プロフィールの文字色のCSSカスタマイズをご紹介します。

プロフィールのウィジェット内の「プロフィール名」「肩書き」「説明」の文字色の色をそれぞれカスタマイズすることができます。

Before	After

プロフィールのウィジェットをサイドバーやフッターに設置する

まずは、プロフィールのウィジェットをサイドバーやフッターに設置しましょう。

1. WordPressの編集画面から、「外観」→「ウィジェット」を開きます
2. 利用できるウィジェットの中から、「プロフィール」を「サイドバー」や「フッター」に追加します
3. 「プロフィール名」「肩書き」「説明」に表示したい内容を入力します
4. 表示したい画像を選択し、「この画像で確定」にチェックを入れます
5. 「SNSボタン」を「表示」または「非表示」にチェックを入れます
6. 「完了」または「保存」を押します

プロフィールのウィジェットをサイドバーに設置することができました‼

プロフィールの文字色のCSSカスタマイズ

プロフィールのウィジェットをサイドバーやフッターに追加できたところで、CSSにコードを追加して、プロフィールの文字色をカスタマイズしてみましょう。

デフォルト（初期設定）では、サイト内の文字色と同じ色になっています。これを、「プロフィール名」「肩書き」「説明」それぞれ別の色でカスタマイズすることができます。

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

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

プロフィールのウィジェットを設置した場所によってコードが異なりますので、適宜使用して下さい。

[サイドバー]

/*---プロフィールの文字色---*/
.myname {
color: #aaa;/*プロフィール名の文字色*/
}
.myjob {
color: #aaa !important;/*肩書きの文字色*/
}
.myintro {
color: #aaa;/*説明の文字色*/
}
/*---プロフィールの文字色---*/

[フッター]

/*---プロフィールの文字色---*/
.myname {
color: #aaa;/*プロフィール名の文字色*/
}
#footer-widget-area .myjob {
color: #aaa !important;/*肩書きの文字色*/
}
.myintro {
color: #aaa;/*説明の文字色*/
}
/*---プロフィールの文字色---*/

.myname {
color: #aaa;
}
.myjob {
color: #aaa !important;
}
.myintro {
color: #aaa;
}

.myname {
color: #aaa;
}
#footer-widget-area .myjob {
color: #aaa !important;
}
.myintro {
color: #aaa;
}

説明

#aaaには、お好みのカラーコードを入れて下さい。

• .myname　→　プロフィール名
• .myjob　→　肩書き
• .myintro　→　説明

プロフィールの文字色をカスタマイズすることができました‼

編集後記

お好みでカスタマイズしてみて下さい。

【WordPress】【JIN】カテゴリーの色分けのCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、カテゴリーの色分けのCSSカスタマイズをご紹介します。文字色を変えるカスタマイズと枠線を付けるカスタマイズができます。...

【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...

【WordPress】【JIN】グローバルメニューの設定方法とプルダウンタブのCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、グローバルメニューの設定方法とプルダウンタブのCSSカスタマイズをご紹介します。...