※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

人気記事のスライダー表示機能

キャプチャ画像

SIRIUS本家の追加テンプレート第5弾には独自のスライダー機能が搭載されています。

 

ウェブの世界でスライダーと言えば、限りあるスペース内で主に複数の画像を横や縦方向にスライドさせることで効率よく情報を提供する手法を指します。

 

画像は情報内容を簡単に連想させやすいデザインのものが多く、画像が動くのでサイト訪問者の目に留まりやすいというメリットがあります。

 

一般的には最優先で見てほしい記事へのリンクを画像に貼ることが多いです。

 

スライダーはページのヘッダー近辺やフッター近辺に表示させておくことで、効率的なアクセスアップが見込まれます。

 

管理人もこの機能、いいなあとは思っていたんですよね。

 

ただしこの機能、当たり前ですが追加テンプレートを購入しないと使えません。

 

もちろんスキルのある方は独自でスライダー機能を付けることはそう難しくはないでしょう。

 

手前味噌ながら管理人もやろうと思えばできないことはないんです。

 

ただこの機能を【Volar】に搭載できないかと考えた時、一番のネックは”必要最小限の入力だけでスライダー表示ができる”ってことでした。

 

しかしながらさすがにそこまでのプログラム能力はないため、しばらくは忘れておったんです。

 

ところがある日、ふと思いましてね。

 

”人気記事”をスライダー表示化できれば、だれもが簡単に設定できるんじゃね?”

 

ご存知かと思いますが、人気記事というのはSIRIUSの追加設定で実装された機能です。

 

人気記事の詳細はコチラ↓をご覧ください。

SIRIUSの人気記事の表示方法

SIRIUSのサイドメニュー上に重要なページをサムネイル画像付きでランキング表示させることができます。

 

ところがこの人気記事機能、サムネイル画像付きではあるものの、基本的にはサイドメニュー上での一覧表示しかありません。

 

それに”デフォルトの表示”だとサムネイル画像は小さすぎるし、”画像の下にタイトルを表示”設定だと記事数によってはサイドメニューの一角がめっちゃ占領されちゃうしでイマイチ使いにくいなあと感じてはいたんです。

 

そうではなく、トップページ or エントリーページのアタマ(ヘッダー)やお尻(フッター)部分に大き目の画像付きでしかもスライダー形式で表示できればそれはかなり使える機能になるんじゃないかなぁと最近思い始めましてね。

 

そんなわけでいろいろごにょごにょテストしまくってたら、あらまあそこそこいい具合にできちゃったじゃないですか。

 

なお管理人は追加テンプレート第5弾を購入してないため、本家がどんな形で実装しているのかはいっさい知りません。

 

表示方法ぐらいは参考にはしましたが、あくまで管理人オリジナルの人気記事スライダーとなります。

【Volar】の人気記事スライダー機能はデフォルトではOFFになってます。

初期バージョンではフッターやサイドメニュー内での表示も可能でしたが、諸事情によりヘッダー下での表示のみとなってます。


人気記事スライダーの基本機能

いまさっき管理人オリジナルの人気記事スライダーとは書きましたが、実際にはslickというjQueryプラグインを利用しての実装となってます。

 

【Volar】の人気記事スライダー表示機能はSIRIUS追加設定の「人気記事」に設定した内容がそのまま表示されるようになってます。

 

つまりサイドメニューにサムネイル画像付きで記事タイトルが表示されるSIRIUS標準の人気記事表示が、大き目の画像付きでスライダー機能を伴って(目立ちながら)表示されるという感じですね。

(※トップページのみ)

 

エントリーページ(このページ)では、(スクリプトの多用を避けるため)人気記事1~4番目がスライド機能なし(静止状態)で自動表記される仕様です。

 

なお上記機能はトップページでも実装可能です。

 

人気記事スライダーの表示位置

【Volar】の人気記事スライダーはトップページの以下のエリアに表示されます。

 

キャプチャ画像

 

デフォルトでは4枚の画像を幅いっぱいに広げて2枚ずつ移動するスライダー表示になります。

(※画像切り替わりは右から左へのスライドのみ)

 

キャプチャ画像

 

タブレット表示時は3枚表示の1枚ずつ移動になります。

 

スマホ表示時は2枚表示の2枚ずつ移動になります。

 

キャプチャ画像

 

スライドの表示枚数や表示スピード・移動枚数の変更・ループのありなしなどのカスタマイズも可能です。

人気記事スライダーの特長と注意点

【Volar】の人気記事スライダーの特長といくつか注意点をご紹介します。

 

設定が簡単

SIRIUSの人気記事の設定上で普通に入力するだけで設定は完了です。

 

ただし【Volar】の人気記事スライダー表示機能はデフォルトではOFFになっているため、HTMLテンプレート上で必要な箇所を有効化する必要はあります。

 

といっても他のオリジナル機能同様、”コメントアウトを解除する”だけなので特別な知識等はいっさいいりません。

 

トップページのみの表示

【Volar】の人気記事スライダー表示はslideというスクリプトを拝借しております。

 

スクリプトは多用するとページが重くなりがちです。

そのため【Volar】の人気記事スライダーはトップページのみの機能として設定しております。

 

その代わり、エントリーページカテゴリーページには、ヘッダー下位置に人気記事に追加した1~4番目までの記事が自動で表示される機能を搭載してます。

(こちらもデフォルトでは表示OFFになってます)

 

キャプチャ画像

 

上記機能はスマホでは2枚ずつの2段表示になります。

(デフォルトでは4枚表示ですが、3枚表示にも5枚表示にもできます)

 

キャプチャ画像

 

標準の人気記事と同居可

サイドメニュー上のSIRIUS標準の人気記事とヘッダー下に表示される【Volar】の人気記事スライダーは同時表示することができます。

 

ただし中身は当然のことながらどちらも同じものなので、同時表示するならお互い離れた位置に表示させるといいでしょう。

 

なおSIRIUS人気記事側を非表示にして【Volar】人気記事スライダーだけを表示することもできます。

 

人気記事入力時の注意点(表示設定)

キャプチャ画像

 

①の見出しは、たとえ記入されてたとしても【Volar】の人気記事スライダー上では非表示設定にしてあります。

 

これは単なるデザイン上の見栄えの問題です。

スライダー表示部にあえてテキストのタイトルはいらないだろうとの判断からです。

(SIRIUS標準の人気記事上ではちゃんと表示されます)

 

②は必ず「デフォルトの表示」にしておく必要があります。

(スライダー設計上の仕様です)

 

もちろん【Volar】の人気記事スライダーを使わないのであれば”画像の下に表示”も使用できます。

 

③ランキングの設定は【Volar】の人気記事スライダーには一切影響が及びません。(無視されます)

完全にSIRIUS標準の人気記事専用の設定となります。

 

人気記事入力時の注意点(人気記事の追加)

キャプチャ画像

 

表示させたい記事を指定する人気記事の追加画面では、①に入力されたタイトルはスライダー画像の下に表示されます。

(あまりに長いとスマホ上では2行に改行されます)

(テキストを非表示にもできます)

 

キャプチャ画像

 

②ここでスライダー用に表示させたい画像を指定します。

 

③画像を用意するのが面倒だという方はここにチェックを入れれば記事内で最初に出てくる画像がスライダー表示用画像として設定されます。(※非推奨)

 

画像がない場合はSIRIUSに付属の『NO IMAGE』という画像が表示されます。

(この画像を表示させるくらいならスライダー機能は使わない方がよろしいかと)

 

キャプチャ画像

 

③のサムネイル画像自動選択機能はとても便利なんですがデメリットもあります。

 

一つ目はそのページの内容がすぐにでわかる画像であるとは限らないこと。

 

多少面倒でも、スライダー表示用の画像はできるだけそのページの内容が一目でわかるようなモノを用意してあげるのがアクセス数アップへの近道と言えます。

 

二つ目はサムネイル画像を自動選択にするとそれぞれサイズの違う画像が集まりがちになります。

 

【Volar】のスライダー表示用サムネイル画像は画像が小さくなってわかりにくくなるのを避けるために『表示幅を統一する』方式を採用してます。

 

その結果、用意された画像のうち一番大きく表示される画像に合わせてスライダーの高さが決まる仕様になっているため高さがバラバラで表示される場合も出てきます。

 

それゆえ②の”大きさを統一したアイキャッチ画像を指定する”方が見栄えもわかりやすさもアップします。

 

人気記事入力時の注意点(登録記事の数)

人気記事自体はいくつでも登録可能(?)ですが、サイドメニューにすべての記事がいっぺんに表示されるSIRIUS標準の人気記事と違って、スライダー方式の場合は一度に全部の画像が表示されるわけではありません。

 

かといって画像が切り替わるのを延々待ってもらえるかというとそんな悠長な方はあまりいないものです。

 

よって厳選した記事を最大でも6個ぐらいまでにとどめておくと、すべての記事に目を留めてもらえる確率が高くなるというものです。

 

登録画像の注意点

人気記事に登録する画像は基本的にはどんなサイズの画像でもいいんですが、あまりに大きいサイズの画像だと、縮小された時に見にくくなる恐れがあります。

 

反対にサイズの小さい画像は既定の幅まで拡大されてしまい、こちらもレイアウト的に見にくくなる可能性が出てきます。

 

たとえばアイキャッチ画像としてはサイズが小さめの300×250の画像をスライダー用画像として指定した場合、実際に表示させたら無駄に高さが広がってしまって若干バランスが悪いという印象もあります。

 

そんなときは表示枚数を4枚→5枚に変更すると1枚当たりの幅が狭まり、結果的に高さも縮小されてちょうどいい具合の表示になったりします。

 

キャプチャ画像

実際に5枚に設定してみたデモがコチラでご覧になれます。

 

結論としては幅500px以上で5:3前後の比率で作成した画像がいい具合で表示されるようです。

コチラで600×300サイズのアイキャッチ画像を4枚表示したデモがご覧になれます。

 

テキスト非表示設定

人気記事の追加画面ではタイトルを入力しないとエラーが出て先に進めないようになってます。

 

しかしながらスライダー表示の場合は、(タイトル)テキストよりはどちらかというと画像の方が重要になってきます。

 

むしろテキストは邪魔だという考えもあります。

 

そのテキストを非表示にする設定も搭載してあるので、画像だけの表示も可能です。

(設定を有効化してもSIRIUS標準の人気記事のタイトルはちゃんと表示されます)

 

コチラでテキストなしのDEMOがご覧になれます。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像