✔︎カルーセルを実装できるプラグインを一部ご紹介
✔︎プラグインを使用せずにカルーセルの実装
今回は、投稿記事をスライドショーのように表示させる方法「カルーセル」についてです。
トップページや記事のヘッダー部分に表示させるだけで、オシャレなサイトに見えるのでおすすめです！
当ブログのカルーセルはプラグイン無しで実装していますが、
本記事では、プラグイン無しでの作成方法に加えてカルーセルを作成できるプラグインをご紹介します。
カルーセルとは？導入するメリットとデメリット
✔︎カルーセルのメリットは、限られたスペースに複数のコンテンツを表示させることができること
✔︎カルーセルのデメリットは、Webサイトの速度が重くなってしまう可能性がある
Webサイトを開くと最初に表示される、複数の写真や記事が横に並んでいて「マウス操作」や「タッチ操作」で左右にスライドしていくものをカルーセルと言います。
操作を行わなくても一定時間で自動に切り替わる設定をすることもでき、ほとんどのサイトがこの設定がされています。
カルーセルは「スライド」や「スライダー」と呼ばれることもあり、これらは同じ意味で使われます。
カルーセルを導入するメリット、デメリットを以下の表に纏めました。
| メリット | デメリット |
|---|---|
| ・情報が整理しやすい ・複数のコンテンツが表示できる ・スクロールの負荷を軽減できる | ・Webサイトの速度が重くなる可能性がある ・クリック率が低い ・全てのコンテンツは見られることはない |
サイト上部の狭いスペースに複数のコンテンツを表示できるという点が大きなメリットになります。
内容の濃いWebサイトや縦に長いページを閲覧をすることは、ユーザーにとって大きなストレスになります。
カルーセルを導入することによって縦のスクロールを軽減することができ、ユーザーの負荷を軽減することができる点も利点の一つですね。
カルーセルの導入はサイトが見やすくコンパクトにおしゃれにすることができますが、良い点だけではございません。
デメリットの一つに挙げられるのが、「Webサイトの速度が重たくなる」です。
カルーセルは、スライドのような形で多くの画像などのファイルを横並びに展開します。
そこに、画像などを自動で切り替える処理なども加わるので、Webサイトの速度が重たくなる可能性があります。
既に導入しているプラグインが多い場合、カルーセルをプラグインで作成するのは要検討です。WordPressでWebサイトを作成する場合、多くの方が様々のプラグインを導入すると思いますが、
導入しているプラグインが多くなるとWebサイトの速度が重たくなる可能性があります。
プラグインは簡単で便利ですが、導入し過ぎには注意しましょう！
プラグイン無しでカルーセルの導入を行う（Cocoon）
✔︎設定画面から簡単に設定することができる
プラグイン無しでカルーセルを導入する方法をご紹介します！
今回使用しているWordPressのテーマは「Cocoon」です。
他のテーマの場合、この設定方法では設定できない可能性があるのでご注意下さい。
Cocoonを利用している方は、以下の手順で簡単にカルーセルの設定を行うことが出来ます！
- 左のメニューの「Cocoon設定」を開く。
- Cocoon設定画面の「カルーセル」タブを押下。
- カルーセルの設定を行う。
カルーセルを表示させるページを指定することもできるので、不要なページは非表示にすることも出来ます。
オートプレイにチェックを入れておくと、指定した時間で自動的にスライドさせることも出来ます！
カルーセル作成ができるプラグインをご紹介！
✔︎操作がシンプルで分かりやすい「MetaSlider」
✔︎日本製のプラグイン「XO Slider」
Smart Slider 3
「Smart Slider 3」は、管理画面の機能が非常に高機能になっていることが特徴で、スライダーを柔軟にカスタマイズすることが出来ます。
スライダーの表示位置はショートコードやPHPコードを貼り付けるだけで指定することができ、スマートフォンやタブレットで表示した際に、自動で表示内容を最適化できるレスポンシブにも対応しています。
Smart Slider 3には無料版と有料版がありますが、無料版だけでも十分すぎる程の機能が揃っており、サムネイル付きスライダーも作成することが出来ます！
MetaSlider
「MetaSlider」の最大の特徴は、操作がシンプルで分かりやすいということです。
管理画面がシンプルで、スライダーの導入方法も記事内にショートコードを貼り付けるだけで実装ができます。
スライドの順番を変更するのも、視覚的にドラックするだけで変更できるので初心者の方でも使いやすくなっています！
このプラグイン1つで4種類のスライダー機能（Nivo Slider／Flex Slider／Coin Slider／Responsive Slides）が利用できます。
XO Slider
「XO Slider」はシンプルなスライダーを作成できる日本製のプラグインです。
管理画面も日本語表記になるので、日本語の環境で利用する場合相性がとても良いです。
日本語かつシンプルなので初心者の方におすすめのプラグインとなっています。
テンプレートの種類は6種類で、一般的に良く使われるテンプレートが用意されています。
YouTube動画の表示にも対応しています。
まとめ
【カルーセルのまとめ】
・カルーセルとは記事や画像をスライドのように左右にスライドするもの
・メリットは限られたスペースに複数のコンテンツを表示できること
・デメリットはサイトのパフォーマンスが落ちる可能性があること
・Cocoonを利用している方は簡単に実装できる
・プラグインの利用で簡単に作成することも可能
Cocoonを利用している方は、是非、Cocoonの設定を利用してみてください。
初心者の方はプラグインの利用でも簡単に実装できるので、自分のサイトに合ったプラグインや利用しやすいプラグインを見つけて、サイトをお洒落にカスタマイズしましょう！
コメント