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

記事ランキングの左上に表示される順位がどうにもこうにも気に入りません。

なぜ?って・・・

そりゃもう感性ですよ!

強いて理由をつけるのならば、イメージの固着を回避。

順位を見て、このサイトはこれ系のサイトと思い込まれるのを防ぐためです。

しかし人気記事は、例え自分の思惑と違っていても閲覧者を惹きつける可能性が高いわけなので無視もできません。

人気記事はある程度露出したいけど順位はみせたくない、というわがままを実現しました。

 

記事ランキングの順位を非表示にするカスタマイズ

 

ここで非表示にするのは以下の設定にあるランキングです。

外観 → カスタマイズ → TOPページ設定[THE] → 記事ランキング設定

 

このランキング設定はトップページ最新記事の下あたりに表示されます。

出来上がりはこんな感じ↓(PC表示)

THE THOR 記事ランキング

 

ランキング順位を非表示にする追加CSS

 

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

 

追加するCSSは以下の通り。

/* ランク消し */
.rankingBox__item:before {
    counter-increment: initial;
    content: initial;
}

これでバッチリ順位が消えます。

 

僕の場合はキャッチ画像を角丸にしているのでランキングカードの枠も角丸に変更しました。

/* ランキングカード角丸 */
    .rankingBox__item {
    border-radius: 8px;
}

 

THE THOR キャッチ画像の角を丸くする

関連記事

当サイトではワードプレスの有料テーマ THE THOR を利用しています。 THE THOR は優れたデザイン性が売りですが、細かい部分は自分の好みに合わせて変更していきたいと思います。   今回はアイキャッチ画[…]

 

おまけ

 

ショートコードによるカテゴリーランキングの順位も削除しました。(下の三行は共通)

.content .archiveScode-rank .archiveScode__item:before {
    counter-increment: initial;
    content: initial;
}

 

できあがりはこんな感じ。【THE THOR カテゴリ】

オフラインのためランキングが表示できません

 

参考までにウィジェット[THE]人気記事 と ウィジェット[THE]カテゴリ人気記事 のランキング順位を消すときのclass名は以下。

.widgetArchive__item.widgetArchive__item-rank:before

 

ほかにも、順位のカラーを統一、数字だけ表示、順位をキャッチ画像の上に移動させて一本の帯として表示などなど色々できました。

 

リクエストがあれば追記します。

 

あとがき

 

ランキング表示なのにランキングを消す意味がわからない、という人が大半だと思います。

このカスタムは自己満足なので参考にするときも自己責任でお願いします。

 

THE THOR 記事一覧

\当サイトのおすすめ/

>