【THE THOR】ウィジェットのランキングバッジをおしゃれにカスタマイズ

みなさんこんにちは。

旅ブロガーのJonyとAi(@10to1_travel)です。

本日は THE THORのウィジェットのランキングに使用されてるバッジを CSSでカスタマイズします。

Jony

かなりマイナーなカスタマイズやな。笑

まあカスタマイズなんて突き詰めれば自己満だよね。笑

完成図は以下の通り。

今回のカスタマイズをした理由は THE THORっぽさを変えて、有料テーマの DIVERの様な雰囲気を出したかったのです。

今回のカスタマイズ内容

カラーを変更 & 統一
バッジに枠線を付ける
サイズ調整

それでは行ってみましょう。

THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊｜ブログをもっとカスタマイズ！をご覧ください。

ブログデザインが楽しくなる！HTML・CSSの勉強にオススメの本8冊

Ai 私たちが読んでる、オススメのプログラミング書籍を紹介するよー！みなさんこんにちは。今回は、HTMLと CSSの独学にオススメの書籍を 8つ紹介します。こんな人向けオリジナ[…]

この記事の目次

1 THE THORのウィジェットにランキングを設定する方法
2 THE THORのランキングバッジをおしゃれにカスタマイズ
3 THE THOR(ザ・トール)カスタマイズ一覧
4 THE THOR ウィジェットのランキングバッジをカスタマイズまとめ

THE THORのウィジェットにランキングを設定する方法

まず初めに、THE THORのウィジェットにランキングを設定する方法です。

外観 → ウィジェット

と進みます。

表示させたいウィジェット(大体はサイドかトップ上部)に[THE]おすすめ記事か[THE]カテゴリ人気記事を入れてください。

・[THE]おすすめ記事はサイト内の総 PV数で人気記事を表示します。

・[THE]カテゴリ人気記事は希望のカテゴリ内で人気記事を表示します。

それではランキングバッジをカスタマイズします。

THE THORのランキングバッジをおしゃれにカスタマイズ

THE THORのランキングバッジを CSSでカスタマイズします。

外観 → カスタマイズ → 追加CSS

と進み、CSSを追加してください。

追加CSSについて詳しく知りたい人は、簡単！THE THOR「追加CSS」でカスタマイズする方法をご覧ください。

以下の CSSをコピペしてください。

/*ウェジェット ランキング バッジ*/
.widgetArchive__item.widgetArchive__item-rank:before {
background-color: #fffff9 !important;/*バッジのカラー*/
color:#505050;/バッジの文字カラー*/
border: 3px solid #e8e2cc;/*バッジ周りの枠線*/
margin: -3px;
}

各コードの #のカラー番号を変更して好みの色にしてください。

バッジ周りの枠線が不要の場合はborder: 3px solid #e8e2cc;のコードごと消去してください。

ちなみにバッジを丸くしたい場合は、border-radius:50%;を追記してください。

以上でウィジェットのランキングバッジのカスタマイズは完了です。
お疲れ様でした。

※カスタマイズは自己責任でお願いします。