人気記事4点固定表示-Volar2

人気記事4点固定表示-Volar2

SIRIUS2テンプレート【Volar2】では人気記事1位~4位までをコンテンツ上部に自動表示させることができます。
 

アイキャッチ画像

【Volar2】には人気記事の1番目から4番目までサムネイル画像付きで自動表記できる<人気記事4点固定表示>が搭載されてます。

 

<人気記事>についてはこちらの記事をご参照ください。


人気記事4点固定表示の概要

こちらが<人気記事4点固定表示>のサンプルです。(※以下「4点固定」と表記)

いわば<スライダー>機能のスライダー無し版ですね。

 

キャプチャ画像

 

SIRIUS2標準のスライダー機能と大きく違う点は以下の通り。

  • 標準スライダーはトップページのみ、【Volar2】の4点固定はエントリーページのみ
  • 標準スライダーを有効化すると専用のスクリプトも別途読み込む必要がある。
    4点固定はスクリプト無用なので軽量タイプ。
  • 標準スライダーは好きな数だけ指定できるが4点固定は最大で4つ

まあこんなところでしょうか。

人気記事の設定と反映箇所

<人気記事4点固定表示>はデフォルトでは無効化されてます。

 

有効化の方法は【テンプレート】→【HTMLテンプレート編集】→【エントリーページ】と進み、4点固定表示用のモジュールのコメントアウトを解除する(外す)だけです。

 

キャプチャ画像

 

は有効化必須のモジュール。

 

の2つのモジュールに関しては、ヘッダー画像のありなしや(グローバル)メニューの表示位置によって微妙にレイアウトが崩れるためいずれかを有効化します。

 

具体的にどちらのモジュールを使えばいいのかについてはマニュアルに載せてあります。

 

表示箇所はエントリーページの上部で位置変更はできません。

 

またスマホでは2枚ずつの2段表示になります。

当サイトのトップページで表示されてる場合は当サイトのみで利用可能専用のスタイルを別途あてがってます。

 

カラム数やヘッダー画像のタイプによって細かくスタイルを変える必要があるためトップページへの実装は見送りました。

 

人気記事の項目4点固定の表示上への反映箇所はこちらになります。

(PCはマウスオーバーでタイトル表示、モバイルは最初から画像下にタイトル表示)

 

キャプチャ画像

 

なお人気記事の『表示設定』は<人気記事4点固定表示>にはいっさい影響ありません

 

キャプチャ画像

 

【Volar2】の「人気記事4点固定表示」とサイドメニュー(SIRIUS2では”メインメニュー”)での「人気記事」の中身は全く一緒のものとなります。

 

もしもサイドメニュー上の人気記事の表示をSTOPしたい場合は、こちらで用意している非表示設定用のスタイルを有効化(コメントアウト解除)すれば非表示にできます。