WordPressテーマを「STINGER5」に変更したので、設定したメモです。
背景を暗い色にした場合、サイドバーの文字が見えなくなってしまうので文字色を変更してみました。
背景を黒にしてみた
ブログを始めた当初は黒ベースのテーマだったので、初心に戻って背景色を黒にしようと思いました。
STINGER5のサイドバーには標準で「NEW POST」というタイトルの最新の記事一覧が表示されているのですが、この記事タイトルの文字色が暗い色のため、非常に見づらくなってしまいました。
実はSTINGER3の時も背景を黒にしようと思ったものの、同じ現象が出たので明るめの色にしていました。
今回はテーマを入れ替えたついでにいじってみようと思います。
テーマのカスタマイズで色設定
「外観」→「カスタマイズ」を開いて、「基本色（キーカラー）」を開くと、
- ブログタイトル、サイドバーの見出しの色など
- 記事内のh2見出しの吹き出しの色など
- 記事内のh2見出しの吹き出し内の文字の色
- コメント欄の背景色など
- RSSボタンの色
- 検索バーの色
が設定できるようになっています。
グループ1の色を「#ffffff」（白）に変更することで、ブログタイトルとサイドバーの見出しはしっかり見えるようになりました。
ところが、サイドバーの文字の色を指定する項目はありません。
更には他のプラグインで表示した文字と、STINGER5が自前で表示している「NEW POST」の一覧の文字の色が違います。
どうやら、STINGER5の記事一覧の文字色は独自に文字色を設定しているらしいです。
スタイルシートでサイドバーの文字色を設定
「外観」→「テーマの編集」から、スタイルシート（style.css）を開いて、サイドバーの記事一覧の文字を指定しているっぽいところを削除してみました。
本当に消すと戻す時に面倒なので、「/*」～「*/」で囲ってコメントアウト（命令などをコメントにしてしまって、動かないようにすること）します。
/* 抜粋文字 */
#kanren .clearfix dd p {
font-size: 13px;
color: #666;
line-height: 18px;
}
#kanren .clearfix dd h5 a {
/* color: #333; */
text-decoration: none;
}
#kanren .clearfix dd h5 a:hover {
color: #b22222;
}
「関連記事（#kanren）」の「見出し（h5）」の「アンカー（a）」に設定されている「color: #333;（暗い灰色）」を、「/* color: #333; */」という感じにして、コメントアウトしてみました。
結果、他のプラグインで表示した文字と同じになりました。（色の指定が無くなったため、何も指定していないときの色になった。）
ただし、背景色を青系統にしようとすると、リンク文字が見えづらくなってしまうので、この辺を修正します。
/* リンクの色 */
a {
color: #4682b4;
}
/* リンクにマウスオーバーした時の色 */
a:hover {
color: #b22222;
}
「#4682b4」（steelblue）や、「#b22222」（firebrick）の部分を変更することで、リンクの色やリンクを押そうとしたときの色を変更できます。
ただし、上記の方法では記事中のリンクの色も変わってしまいます。
サイドバーの文字色だけ変更したい場合には、「a side a {…」と「a side a:hover {…」を追加してあげます。
/* リンクの色 */
a {
color: #4682b4;
}
/* リンクにマウスオーバーした時の色 */
a:hover {
color: #b22222;
}
/* リンクの色（サイドバー） */
aside a {
color: #00ff7f;
}
/* リンクにマウスオーバーした時の色（サイドバー） */
aside a:hover {
color: #ff69b4;
}
例ではリンクの色を「#00ff7f」（springgreen）、リンクを押そうとしたときの色を「#ff69b4」（hotpink）にしてみました。
まとめ
分かり易くするために、派手な色にしてみましたが、好みの色を指定します。
2桁ずつが三原色の色の強さで 0 ～ 255 の数字を「00」～「ff」で表します。
最初の2桁が赤なので「#ff0000」とすると赤、次の2桁が緑なので「#00ff00」が緑、最後の2桁が青なので「#0000ff」が青。
青＋赤で「#ff00ff」は紫となるのですが、赤＋緑＝「#ffff00」は黄色です。
光と絵具では混ぜ合わせた結果が違うので、ピンと来ない方も多いかも知れません。
「#ffffff」などのカラーコードでは分かりづらい場合には、下記リンクのようなカラーコード表があるサイトを参考にするとよいでしょう。
コメント