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

みなさんこんにちは。

JonyとAi(@10to1_travel)です。

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

 
Jony
かなりマイナーなカスタマイズやな。笑
 
Ai
まあカスタマイズなんて突き詰めれば自己満だよね。笑

完成図は以下の通り。

THE THOR(ザ・トール)のランキング バッジのカスタマイズ

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

今回のカスタマイズ内容

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

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

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

関連記事

みなさんこんにちは。 HTML・CSSを使って、周りのブログと差を付けたオリジナルデザインのサイトを作りたいあなたへ。 ユーザーの滞在時間の増減や、リピート率の向上には「ブログデザイン」が大きく関わっていま[…]

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%;を追記してください。

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

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

THE THOR(ザ・トール)カスタマイズ一覧

当ブログでは色んなカスタマイズを提案してます。

この他にもマイナーな細かいカスタマイズ案を紹介してるので、ご覧ください。

みなさんこんにちは。 THE THORユーザーの JonyとAi(@1 […]

みなさんこんにちは。 私たちのブログがある時を境いに更新されなくなって […]

みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマ […]

みなさんこんにちは。 THE THOR(ザ・トール)のカスタマイズにハ […]

みなさんこんにちは。 WordPress(ワードプレス)には 2種類の […]

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

THE THOR ウィジェットのランキング バッジをカスタマイズ まとめ

今回は THE THORのウィジェットのランキング バッジをカスタマイズしました。

確かにマイナーなカスタマイズかもしれませんが、細かい気遣いこそユーザービリティの向上に繋がると信じています。

これからも THE THORのカスタマイズをどんどん提案していくのでよろしくお願いします。

最後まで読んでいただきありがとうございます。

おわり