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

THE THOR の 記事ランキング の左上に表示される順位を非表示にするカスタマイズを行いました。

テーマについてTHE THOR

 

なぜ？って・・・

そりゃもう感性ですよ！

強いて理由をつけるのならば、イメージの固着を回避。順位を見て、このサイトはこれ系のサイトと思い込まれるのを防ぐためです。しかし人気記事は、例え自分の思惑と違っていても閲覧者を惹きつける可能性が高いわけなので無視もできません。

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

 

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

 

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

 

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

出来上がりはこんな感じ↓（PC表示）

 

カスタマイズ方法

カスタマイズはCSSで行います。コードを追加CSSにコピペするだけ。

 

追加するコードは以下の通り。

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

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

 

アイキャッチ画像を角丸にしている場合は、ランキングカードの枠も角丸にしましょう。

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

関連記事THE THOR アイキャッチ画像の角を丸くする

 

おまけ

 

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

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

 

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

[ranklist cat=358 num=3]

 

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

.widgetArchive__item.widgetArchive__item-rank:before

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

 

あとがき

 

ランキング表示なのにランキングを消す意味がわからない、という人が大半だと思います。このカスタムは自己満足なので参考にするときも自己責任でお願いします。