私がメインで運営している「急がば回れ！」ブログはWordPressテーマ「ストーク」
を使っていました。
たまにカスタマイズしたくなる欲が出てきて、ちょこちょこCSSをいじったりしているのですが、今回は気分転換に文字色（テキストカラー）を変えてみました。
ストークでは外観>カスタマイズで簡単にテキストカラーの変更ができますが、テキストカラーを変えただけでは変わってくれない文字や箇所があります。
全体的に統一感を出したいと思ったので、外観>カスタマイズで変えられなかった部分（文字色やボタンカラーなど）はCSSでカスタマイズしました。
自分の備忘録のためにも記しておこうと思いますが、どなたかの参考になれば幸いです。
なお、こちらのブログはWordPressテーマ 「WING（AFFINGER5）」を使っています。
記事タイトルのカラー変更
まずは記事タイトル系のカラーで、テキストカラーを変更しても変わらなかった部分をCSSでカスタマイズします。
トップページの記事カードタイトル
トップページの記事カードのタイトルカラーをCSSでカスタマイズします。
デフォルトは黒
この項目のみスマホのCSSを別で記述しないと反映されなかったので、スマホ版のCSSコードも書いています。
/* トップページ記事カードのタイトルカラー */
.post-list-card .post-list a {
color: #5e272c !important;
}
/* トップページ記事カードのタイトルカラー スマホ */
@media screen and (max-width: 480px) {.single-title, .page-title, .entry-title, .date {
color: #5e272c !important;
}
}
前後の記事・RECOMMEND POST・NEW POST
デフォルトは黒
- 該当記事の前後の記事のリンク
- RECOMMEND（こちらの記事も人気です。）
- NEW POST（このライターの最新記事）
についてもテキストカラーを変更しました。
/* 前後の記事・関連POST・NEW POSTのタイトルカラー */
.single .np-post a, .single .authorbox a, .single .related-box a{
color: #5e272c;
}
関連記事のリンクカード
関連記事としてブログカード（リンクカード）を挿入した際に、タイトルやラベル、ホバーカラー（マウスオンした時の色）がデフォルトの黒ではなくテキストカラーに統一されるようにしました。
デフォルトでは文字が黒、ホバーがクリーム色
/* 関連記事カード タイトルの色を変える */
.related_article p.ttl{
color: #5e272c !important;
}
.related_article .date {
color: #6b474a !important;
}
/* 関連記事カード ラベル色を変える */
.related_article .ttl:before{
background: #ffb2bc !important;
}
/* 関連記事カード ホバー時の色を変える */
.related_article a:hover{
background: #fff2f2 !important;
}
プロフィールネームのカラー変更
テキストカラーを変更すると、プロフィールの文章色は変更となるのですが、なぜかプロフィールネームに関しては変更が適用されません。
デフォルトは黒
ので、プロフィールネームのカラーはCSSでカスタマイズします。
/* トップページのプロフィールネームのカラー */
.profile-name {
color: #5e272c;
}
この記事を書いた人のリンクカラーも変えました。
文章カラーは変更になるがネームカラーはデフォルトのまま
/* この記事を書いた人のリンク色 */
.single .authorbox .profile a {
color: #5e272c;
}
ボタン系のカラー変更
テキストカラーと合わせて変更しておきたいボタンや、ページャーのカラー変更です。
登録・コメント送信のボタンカラー
ブログ購読の登録ボタンや、コメント送信のボタンはグレーで味気ないので、変更したい人はこちらをCSSに書いてみてください。
Jetpackのプラグインを使ったブログ購読ボタン
/* 登録ボタンのカラー */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
background: #6b474a;
}
コメント送信のカラーは、リンクカラーとリンクしているようです。個別で変更するにはCSSにカスタマイズを入れましょう。
リンクカラーを青にしていたらデフォルトは青
/* コメント送信のカラー */
.blue-btn, .comment-reply-link, #submit {
background-color: #6b474a;
}
ページャー
ブログ記事が複数ある時に下の方に表示されるページャー（ページネーション）のカラーは、ブログカラーに統一させました。
デフォルトはリンクカラー
/* ページャーのカラー */
/* 現在選択しているページャー */
.pagination .current, .pagination .current:hover, .page-links ul > li > span {
background-color:#ff667c;
border-color: #ff667c;
}
/* 選択されていないページャー */
.pagination a, .pagination span, .page-links a{
border-color: #ff667c;
color: #ff667c;
}
/* ページャーのホバー色 */
.pagination a:hover{
background-color: #ffb2bc;
}
wordpressブログのCSSをカスタマイズする鍵
私はwordpressのことやCSS、HTMLなどを勉強しているわけではないド素人です。
そんな私でも上記のCSSカスタマイズくらいはできるのだ。その方法をご説明します。
画面のここの部分のカラーを変えたいなと思った時は、その部分を選択して右クリック>検証を行うとCSSコードを紐解く鍵がわかります。
右クリックすると「検証」の項目がある
検証を選択すると、右側にずらっとCSSのコードが表示されます。
該当のコードを見つければコードが紐解ける
右側に現れたCSSコードの中から、カスタマイズすれば良い部分を見つけ出し、その内容に手を加えればOK。
CSSコードの書き方の初歩は理解する必要がありますが、例えばプロフィールネーム「.profile-name」などと覚える必要がないので便利です。
wordpressのテーマやストークで変更を加えたい点があるけど、CSSコードの書き方がわからないという人は、参考にしてみてね。
