THE THOR ザ・トール ランキング順位の背景色 を変更するカスタマイズ

THE THOR では ランキング形式で記事を表示する機能がいくつかあります。

今回、ランキング順位の背景色を変更するのは3ヶ所。

• トップページ用 記事ランキング
• ウィジェット[THE]人気記事
• ショートコード カテゴリー記事一覧(ランク順)

THE THOR ランキング順位の背景色 を変更するカスタマイズ

カスタマイズはCSSをコピペして完成。

3ヶ所あるのでひとつずつ記載していきます。最後に「3ヶ所まとめたCSS」と「全部同じ色にするCSS」を載せるので好みのパターンをコピペしてください。コピペする場所は追加CSSです。

カラーは「原色大辞典」などのサイトを参考にするとわかりやすいかと思います。

順位を非表示にする

THE THOR ザ・トール 記事ランキング の順位を非表示にする

THE THOR の 記事ランキング の左上に表示される順位を非表示にするカスタマイズを行いました。 テーマについてTHE THOR   なぜ？って・・・ そりゃもう感性ですよ！ 強いて理由をつけるの[…]

「トップページ用 記事ランキング」ランキング順位の背景色と文字色を変更するCSS

.rankingBox__item:nth-child(1):before {
	background: #ffffff;
	color:#000000;
}

上記CSSでランキング1位の変更ができます。2位を変更する場合は(1)の部分を(2)にしてください。3位も同様に(3)でOK

#ffffffの部分が背景色、#000000の部分が文字色なので好きなカラーに変更してください。

1位から3位までを変更した例

.rankingBox__item:nth-child(1):before {
	background: #ffffff;
	color:#000000;
.rankingBox__item:nth-child(2):before {
	background: #888888;
	color:#000000;
.rankingBox__item:nth-child(3):before {
	background: #000000;
	color:#ffffff;
}

※4位以下は同じように追加してください。

「ウィジェット[THE]人気記事」ランキング順位の背景色と文字色を変更するCSS

.widgetArchive__item.widgetArchive__item-rank:nth-child(1):before {
	background: #ffffff;
	color:#000000;
}

上記CSSでランキング1位の変更ができます。2位を変更する場合は(1)の部分を(2)にしてください。3位も同様に(3)でOK

#ffffffの部分が背景色、#000000の部分が文字色なので好きなカラーに変更してください。

1位から3位までを変更した例

.widgetArchive__item.widgetArchive__item-rank:nth-child(1):before {
	background: #ffffff;
	color:#000000;
.widgetArchive__item.widgetArchive__item-rank:nth-child(2):before {
	background: #888888;
	color:#000000;
.widgetArchive__item.widgetArchive__item-rank:nth-child(3):before {
	background: #000000;
	color:#ffffff;
}

※4位以下は同じように追加してください。

「ショートコード カテゴリー記事一覧(ランク順)」ランキング順位の背景色と文字色を変更するCSS

.content .archiveScode-rank .archiveScode__item:nth-child(1):before {
	background: #ffffff;
	color:#000000;
}

上記CSSでランキング1位の変更ができます。2位を変更する場合は(1)の部分を(2)にしてください。3位も同様に(3)でOK

#ffffffの部分が背景色、#000000の部分が文字色なので好きなカラーに変更してください。

1位から3位までを変更した例

.content .archiveScode-rank .archiveScode__item:nth-child(1):before {
	background: #ffffff;
	color:#000000;
.content .archiveScode-rank .archiveScode__item:nth-child(2):before {
	background: #888888;
	color:#000000;
.content .archiveScode-rank .archiveScode__item:nth-child(3):before {
	background: #000000;
	color:#ffffff;
}

※4位以下は同じように追加してください。

上記3ヶ所の背景色と文字色を共通で変更するCSS

ランキング順位のカラーは統一して使用するのが一般的だと思います。上記のコードをそれぞれコピペしてもOKですが、3つまとめて記載すると後々の変更などが楽になるのでオススメです。

.rankingBox__item:nth-child(1):before,.widgetArchive__item.widgetArchive__item-rank:nth-child(1):before,.content .archiveScode-rank .archiveScode__item:nth-child(1):before {
	background: #ffffff;
	color:#000000;
}

上記CSSで3ヶ所の1位が変更できます。2位を変更する場合は(1)の部分を(2)にしてください。3位も同様に(3)でOK

#ffffffの部分が背景色、#000000の部分が文字色なので好きなカラーに変更してください。

1位から3位までを変更した例

.rankingBox__item:nth-child(1):before,.widgetArchive__item.widgetArchive__item-rank:nth-child(1):before,.content .archiveScode-rank .archiveScode__item:nth-child(1):before {
	background: #ffffff;
	color:#000000;
.rankingBox__item:nth-child(2):before,.widgetArchive__item.widgetArchive__item-rank:nth-child(2):before,.content .archiveScode-rank .archiveScode__item:nth-child(2):before {
	background: #888888;
	color:#000000;
.rankingBox__item:nth-child(3):before,.widgetArchive__item.widgetArchive__item-rank:nth-child(3):before,.content .archiveScode-rank .archiveScode__item:nth-child(3):before {
	background: #000000;
	color:#ffffff;
}

※4位以下は同じように追加してください。

ランキング順位の背景色を全て同じにするCSS

順位に関係なく全て同じ背景色、文字色にします。コードは3ヶ所をまとめたコードです。

.rankingBox__item:before,.widgetArchive__item.widgetArchive__item-rank:before,.content .archiveScode-rank .archiveScode__item:before {
	background: #ffffff;
	color:#000000;
}

上記CSSで3ヶ所の全ての順位が変更されます。

#ffffffの部分が背景色、#000000の部分が文字色なので好きなカラーに変更してください。

以上で今回のカスタマイズは終了です。

文字ばかりでわかりづらいですが、必要な部分だけコピペして活用してみてください。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana

2,202円(11/21 17:46時点)

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

「THE THOR ランキング順位の背景色 を変更するカスタマイズ 」のあとがき

個人的には背景色は統一が好きですが、1位だけを目立つカラーにするのも良いですね。

掲載したCSSで不具合等があればコメントからお知らせください。ではまたのカスタマイズでお会いしましょう。お疲れさまでした！