STORK

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

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

急がば回れ!ブログ

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

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

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

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

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

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

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

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

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

ストークのトップページの記事タイトルカラー変更

デフォルトは黒

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

前後の記事・RECOMMEND POST・NEW POST

ストークの関連記事・前後の記事・最新記事のタイトルカラー変更

デフォルトは黒

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

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

関連記事のリンクカード

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

ストークの関連記事カラー変更

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

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

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

ストークのトップページのプロフィールネームカラー

デフォルトは黒

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

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

ストークのこの記事を書いた人のネームカラー変更

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

ボタン系のカラー変更

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

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

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

ストークのJetpackを使ったブログ購読ボタン

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

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

ストークのコメント送信カラー変更

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

ページャー

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

ストークのページャーのカラー変更

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

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

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

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

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

wordpressのCSSコードを書く鍵

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

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

wordpressのCSSコードを書くコツ

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

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

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

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

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

-STORK

Copyright© 急がば回れの裏側 , 2020 All Rights Reserved Powered by AFFINGER5.