私がメインで運営している「急がば回れ!」ブログはWordPressテーマ「ストーク」を使っています。
たまにカスタマイズしたくなる欲が出てきて、ちょこちょこCSSをいじったりしているのですが、今回は気分転換に文字色(テキストカラー)を変えてみました。
ストークでは外観>カスタマイズで簡単にテキストカラーの変更ができますが、テキストカラーを変えただけでは変わってくれない文字や箇所があります。
全体的に統一感を出したいと思ったので、外観>カスタマイズで変えられなかった部分(文字色やボタンカラーなど)はCSSでカスタマイズしました。
自分の備忘録のためにも記しておこうと思いますが、どなたかの参考になれば幸いです。
なお、こちらのブログはWordPressテーマ 「WING(AFFINGER5)」を使っています。
記事タイトルのカラー変更
まずは記事タイトル系のカラーで、テキストカラーを変更しても変わらなかった部分をCSSでカスタマイズします。
トップページの記事カードタイトル
トップページの記事カードのタイトルカラーをCSSでカスタマイズします。

デフォルトは黒
この項目のみスマホのCSSを別で記述しないと反映されなかったので、スマホ版のCSSコードも書いています。
1 2 3 4 5 6 7 8 9 10 |
/* トップページ記事カードのタイトルカラー */ .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(このライターの最新記事)
についてもテキストカラーを変更しました。
1 2 3 4 |
/* 前後の記事・関連POST・NEW POSTのタイトルカラー */ .single .np-post a, .single .authorbox a, .single .related-box a{ color: #5e272c; } |
関連記事のリンクカード
関連記事としてブログカード(リンクカード)を挿入した際に、タイトルやラベル、ホバーカラー(マウスオンした時の色)がデフォルトの黒ではなくテキストカラーに統一されるようにしました。

デフォルトでは文字が黒、ホバーがクリーム色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 関連記事カード タイトルの色を変える */ .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でカスタマイズします。
1 2 3 4 |
/* トップページのプロフィールネームのカラー */ .profile-name { color: #5e272c; } |
この記事を書いた人のリンクカラーも変えました。

文章カラーは変更になるがネームカラーはデフォルトのまま
1 2 3 4 |
/* この記事を書いた人のリンク色 */ .single .authorbox .profile a { color: #5e272c; } |
ボタン系のカラー変更
テキストカラーと合わせて変更しておきたいボタンや、ページャーのカラー変更です。
登録・コメント送信のボタンカラー
ブログ購読の登録ボタンや、コメント送信のボタンはグレーで味気ないので、変更したい人はこちらをCSSに書いてみてください。

Jetpackのプラグインを使ったブログ購読ボタン
1 2 3 4 |
/* 登録ボタンのカラー */ button, html input[type="button"], input[type="reset"], input[type="submit"] { background: #6b474a; } |
コメント送信のカラーは、リンクカラーとリンクしているようです。個別で変更するにはCSSにカスタマイズを入れましょう。

リンクカラーを青にしていたらデフォルトは青
1 2 3 4 |
/* コメント送信のカラー */ .blue-btn, .comment-reply-link, #submit { background-color: #6b474a; } |
ページャー
ブログ記事が複数ある時に下の方に表示されるページャー(ページネーション)のカラーは、ブログカラーに統一させました。

デフォルトはリンクカラー
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* ページャーのカラー */ /* 現在選択しているページャー */ .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コードの書き方がわからないという人は、参考にしてみてね。