ストーク（STORK）のテキストカラーを変更しても変わらない部分をCSSでカスタマイズ

私がメインで運営している「急がば回れ！」ブログはWordPressテーマ「ストーク」を使っています。

急がば回れ！ブログ

たまにカスタマイズしたくなる欲が出てきて、ちょこちょこCSSをいじったりしているのですが、今回は気分転換に文字色（テキストカラー）を変えてみました。

ストークでは外観>カスタマイズで簡単にテキストカラーの変更ができますが、テキストカラーを変えただけでは変わってくれない文字や箇所があります。

全体的に統一感を出したいと思ったので、外観>カスタマイズで変えられなかった部分（文字色やボタンカラーなど）はCSSでカスタマイズしました。

自分の備忘録のためにも記しておこうと思いますが、どなたかの参考になれば幸いです。

なお、こちらのブログはWordPressテーマ 「WING（AFFINGER5）」を使っています。

記事タイトルのカラー変更

まずは記事タイトル系のカラーで、テキストカラーを変更しても変わらなかった部分をCSSでカスタマイズします。

トップページの記事カードタイトル

トップページの記事カードのタイトルカラーをCSSでカスタマイズします。

デフォルトは黒

この項目のみスマホのCSSを別で記述しないと反映されなかったので、スマホ版のCSSコードも書いています。

前後の記事・RECOMMEND POST・NEW POST

デフォルトは黒

• 該当記事の前後の記事のリンク
• RECOMMEND（こちらの記事も人気です。）
• NEW POST（このライターの最新記事）

についてもテキストカラーを変更しました。

関連記事のリンクカード

関連記事としてブログカード（リンクカード）を挿入した際に、タイトルやラベル、ホバーカラー（マウスオンした時の色）がデフォルトの黒ではなくテキストカラーに統一されるようにしました。

デフォルトでは文字が黒、ホバーがクリーム色

プロフィールネームのカラー変更

テキストカラーを変更すると、プロフィールの文章色は変更となるのですが、なぜかプロフィールネームに関しては変更が適用されません。

デフォルトは黒

ので、プロフィールネームのカラーはCSSでカスタマイズします。

この記事を書いた人のリンクカラーも変えました。

文章カラーは変更になるがネームカラーはデフォルトのまま

ボタン系のカラー変更

テキストカラーと合わせて変更しておきたいボタンや、ページャーのカラー変更です。

登録・コメント送信のボタンカラー

ブログ購読の登録ボタンや、コメント送信のボタンはグレーで味気ないので、変更したい人はこちらをCSSに書いてみてください。

Jetpackのプラグインを使ったブログ購読ボタン

コメント送信のカラーは、リンクカラーとリンクしているようです。個別で変更するにはCSSにカスタマイズを入れましょう。

リンクカラーを青にしていたらデフォルトは青

ページャー

ブログ記事が複数ある時に下の方に表示されるページャー（ページネーション）のカラーは、ブログカラーに統一させました。

デフォルトはリンクカラー

wordpressブログのCSSをカスタマイズする鍵

私はwordpressのことやCSS、HTMLなどを勉強しているわけではないド素人です。

そんな私でも上記のCSSカスタマイズくらいはできるのだ。その方法をご説明します。

画面のここの部分のカラーを変えたいなと思った時は、その部分を選択して右クリック>検証を行うとCSSコードを紐解く鍵がわかります。

右クリックすると「検証」の項目がある

検証を選択すると、右側にずらっとCSSのコードが表示されます。

該当のコードを見つければコードが紐解ける

右側に現れたCSSコードの中から、カスタマイズすれば良い部分を見つけ出し、その内容に手を加えればOK。

CSSコードの書き方の初歩は理解する必要がありますが、例えばプロフィールネーム「.profile-name」などと覚える必要がないので便利です。

wordpressのテーマやストークで変更を加えたい点があるけど、CSSコードの書き方がわからないという人は、参考にしてみてね。

現在メインの「急がば回れ！」ブログはWordPressテーマ「ストーク」、「急がば回れの裏側」ブログはWordPressテーマ 「WING（AFFINGER5）」を使っています。