ランキング-SIRIUS2

ランキング-SIRIUS2

SIRIUS2の<ランキング>についての詳細ページ。
 

アイキャッチ画像

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。

そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。

また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。

 

ランキング>を使うと簡易的な「ランキング」風のタイトルを挿入することができます。(文字装飾系)

 

同じ名称のパーツ<ランキング>とは機能が全く異なります。

 

またランキングのデザインはテンプレートによって異なります。

ここでご紹介するのは「ベーステンプレート」のデザインとなります。


個別ランキング

ここでは1個ずつランキングタイトルを作成する手順をご紹介します。

 

ランキングを付けたいテキストを選択状態にし、記事装飾メニューの「ランキング」から好きなランキングを選択します。

 

キャプチャ画像

 

ランキング専用のタグが自動付与され、タイトルがランキングっぽく(?)表示されました。

 

キャプチャ画像

 

同じように2位,3位とやってみたのがこちら。

 

キャプチャ画像

 

10位まではメニューから選択するだけで完了しますが、実は11位以降のランキングも設定できます。

その場合はHTMLタグを直接変更します。

 

やり方はとりあえずこれまでと同じようにランキング1位で設定をかけます。

(2位でも3位でも問題ありません)

 

そしてたとえば11位だったら2箇所の数字をいずれも「11」に変更します。

これで11位の完成です。

 

キャプチャ画像

 

数字の色ですが、1位~3位は「金・銀・銅」の色が反映されてます。

そして4位以下の数字の色はというと…2位の銀色と似てますが若干異なります。

 

実際のカラーコードは2位が「#a5b2ba」で4位以下は「#d1d5dd」。

見た目がほぼ同じ色なのでちょっとややこしいです。

 

ということで色を変えてみたいという方は「ユーザー指定スタイル」に以下のコードを追記してみてください。

テキスト「code」画像

.rank[data-rank]::before { color: #0a8717; }

 

赤文字の部分が緑色を表すカラーコードで、ここを好きなカラーコードに変えれば4位以下の数字が指定した色で表示されます。

 

『カラーコード』とは?

カラーコードとはウェブ専用の色指定コードのことで、多いのは#から始まる3桁または6桁の英数字の組み合わせになります。

カラーコード一覧表といったようなページを参考に指定してみてください。

 

実際に色を変えてみた表示がこちら。

4位以下は全部緑になってます。

4位以下は緑色の数字
12位も緑色の数字

 

もう一つややこしくしてるのが「ランキングパーツの追加」及び「ランキングパーツの管理」というメニューで、これらはいずれもパーツ<ランキング>内のコマンドになります。

 

キャプチャ画像

 

よって上記2つについてはパーツ<ランキング>をご覧ください。

一括ランキング

<ランキング>メニュー最下段にある「ランキングタグの一括挿入」を使うとランキングタグを1個1個設定する手間が省けます

 

とりあえずランキングだけ設定しておいて後から必要部分だけ修正する”というやり方ならこちらの方が簡単です。

 

『ランキングタグの一括挿入』を選択すると下のような設定画面が表示されます。

ここに適当なテキストと順位(今回は1位~5位まで)を指定してみます。

 

キャプチャ画像

 

「OK」ボタンをクリックすると、1位~5位までのHTMLタグが一括で挿入されます。
あとはテキスト部分を適当に変更していけばランキングが完成します。

 

キャプチャ画像