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

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

キャプチャ画像

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

SIRIUSの人気記事の表示方法 - 副業サイトならSIRIUSでホームページ作成

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

 

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

 

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

 

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

 

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

 

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

 

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

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


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

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

 

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

 

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

当サイトのトップページでも以下の①と③の位置で実際に使ってます。

 

エントリーページ(このページ)では、人気記事1~4番目がスライド機能なし(静止状態)で自動表記されるようになってます。(※理由は後述)

 

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

【Volar】の人気記事スライダーは原則としてトップページでの表示を想定してます。

(トップページ以外でも表示可能ですが、おススメはしてません)

 

以下の4ヵ所に表示可能です。

 

キャプチャ画像

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

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

キャプチャ画像

 

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

 

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

 

キャプチャ画像

 

②は1枚ずつの表示で、記事エリア内の幅で表示されます。

(画像切り替わりはフェードとスライドの2種類ご用意してます)

キャプチャ画像

 

③はサイドメニュー上でのスライダー表示になります。

(画像切り替わりはフェードとスライドの2種類ご用意してます)

キャプチャ画像

 

④はフッター前でのスライダー表示になります。

(設定やカスタマイズは①と同じになります)

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

 

上記4ヵ所に表示可能ではあるんですが、基本的にはどこか1ヵ所だけの表示が好ましいです。

 

あちこちに同じ表示があるのはサイト訪問者にウザがられますし、なによりそれぞれ独立したスクリプトが設定されてるため、表示箇所が多いとその分動作が重くなりがちになるからです。

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

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

 

設定が簡単

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

 

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

 

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

 

トップページのみの表示

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

 

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

 

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

 

なおエントリーページでも設定をコピー&ペーストすれば作動させることはできますが上記の理由でおススメはしません。

 

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

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

 

キャプチャ画像

 

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

 

キャプチャ画像

 

基本的には4枚表示ですが、3枚表示にも5枚表示にもできます。

 

ただしiPhone(スマホ)では5枚以上になると3段表示になってしまうため、多少見づらい印象が出てくるかもしれません。

 

また3枚表示の場合は2段表示ですが、2段目が1枚になるので見た目のバランスは悪くなります。

この機能はトップページでも使えるようになってます。

 

これは(スクリプトで動かす)スライダー機能はいらないが、スライダーっぽい表示だけは使いたいという方のための代替策です。

 

標準の人気記事と同居可

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

(異なるIDを【Volar】人気記事スライダー側に付与してあるためHTML上の文法違反にはなりません)

 

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

 

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

 

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

キャプチャ画像

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

 

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

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

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

 

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

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

 

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

 

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

(無視されます)

 

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

 

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

キャプチャ画像

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

 

キャプチャ画像

 

あまりに長いとサイドメニュー上やiPhone(スマホ)上では2行に分断されます。

 

この場合レイアウト上の問題は特にありません。

 

ただサイト訪問者というのは基本的にテキストは読まないものです。

 

それゆえタイトルはひと目でわかるような短いテキストにしておくことをおススメします。

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

 

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

 

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

 

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

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

 

キャプチャ画像

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

 

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

 

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

 

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

 

本来ならサイズの異なる画像をうまい具合に伸ばしたり縮めたりして表示させるのがベストなのですが、【Volar】の人気記事スライダーはそこまでの機能は持ち合わせていません。

 

となると方法としては個々のスライダー表示幅を統一するか、スライダーの高さを統一するかして合わせるしかありません。

 

いろいろ考えた末、今回の人気記事スライダーは、画像が小さくなってわかりにくくなるのを避ける意味で『表示幅を統一する』方式を採用することにしました。

 

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

 

こう言われてもイマイチ想像しにくいでしょうからいくつかDEMOをご用意しました。

 

どんな感じで表示されるかご確認ください。

 

異なるサイズの画像が集まってしまった場合

DEMOテンプレート【Volar】ビジネスタイプ

 

画像サイズはどれも同じ場合

画像サイズ600×350

DEMOテンプレート【Volar】角丸タイプ

 

画像サイズ500×350

DEMOテンプレート【Volar】デフォルトタイプ

 

画像サイズ600×300

【Volar】デザインテンプレート・クール

 

画像サイズ500×300

【Volar】デザインテンプレート・アートレス

 

画像サイズ300×250

【Volar】デザインテンプレート・プレーン

 

結論としては幅500px以上で5:3前後の比率で画像を作成するといい具合に表示されるかと思います。

 

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

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

(記事数が少ない場合を除いて)

 

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

 

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

 

実はあまりに登録記事数が多いとレイアウト上で問題が生じる場合があります。

 

たとえばiPad(タブレット)上のSIRIUSサイトは、PCと同じレイアウトにもかかわらずサイドメニューの幅が若干狭くなっています。

 

その結果、テンプレートによっては表示記事が多すぎるとドット部分が2行に分かれてしまってレイアウトが崩れてしまうことがあります。

 

キャプチャ画像

 

解決策としては登録記事数を4~6に収めておくか…サイドメニューには表示させないことですね。

 

それかiPad(タブレット)上だけ非表示という設定をスタイルに加筆するかです。

 

iPhone(スマホ)上はタブレットよりも横幅が広くなるので影響は受けにくいです。

 

登録画像の注意点

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

 

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

 

たとえば画像付きアフィリエイトリンクでよくある300×250の画像をスライダー用画像として指定したものの、実際に表示させたら無駄に高さが広がってしまって見にくくなってしまったというケースもあります。

(先ほどの最後のDEMOサイトで確認できます)

 

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

 

キャプチャ画像

 

あるいは大外のスライダー全体枠の幅そのものを狭める設定をスタイルに加筆することでも解決はします。

 

テキスト非表示設定

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

 

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

 

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

 

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

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

 

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

SIRIUSでホームページ作成

 

以上です。

SIRIUSテンプレート【Volar】

キャプチャ画像

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

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