STORK

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

私がメインで運営している「急がば回れ!」ブログは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を使ったブログ購読ボタン

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コードを紐解く鍵がわかります。

wordpressのCSSコードを書く鍵

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

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

wordpressのCSSコードを書くコツ

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

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

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

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

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

moni

メインの「急がば回れ!moniとスペイン」にスペインのこと綴り中。こちらのサブページでは、急がば回れブログ運営に関する内容(テーマやCSSなど)を記録しています。

-STORK

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