![Cocoonでカルーセルを設定する方法](https://panadablog.com/wp-content/uploads/2020/03/befd10ba110082717c291a24004c2ebe-1024x576.png)
サイトのヘッダー等でたまに見る「記事が横並びで表示されていて左右に送れるアレ」。
正式名称を「カルーセル」と言い記事をスライドショー表示できる機能です。
実はWordPressテーマ「Cocoon」ではプラグイン不要でカルーセルを実装できるのをご存じでしょうか?
当記事ではそんなカルーセルをWordPressテーマ「Cocoon」で設定する方法を解説致します。
Cocoonを使っている方ならどなたでも簡単に設定可能なので是非覚えていきましょう!
- カルーセルとは?
- カルーセルによる恩恵
- Cocoonでカルーセルを実装する手順
- カルーセルの注意点
カルーセルとは?
![スクロール](https://panadablog.com/wp-content/uploads/2020/03/4845fa7a820e6a3adea3c13b0b2584f6-1024x576.png)
カルーセルとは、主にサイトのヘッダー部分に用いられる記事のスライドショー(スクロール)表示を言います。
当サイトのトップページにも実装されています(画像だと赤枠部分)。
![カルーセル部分](https://panadablog.com/wp-content/uploads/2020/03/bb4ce98bb84ea2702c77cce1bbd3c1b9-1024x576.png)
カルーセルによる恩恵
![上昇志向](https://panadablog.com/wp-content/uploads/2020/03/61764ac880a7d3639aad99421c156994-1-1024x576.png)
カルーセル実装による恩恵は3点あります。
Cocoonの初期デザインから少しアレンジしたいなという方におすすめ。
カルーセルで飾ることで大手サイトのような少しオシャレなデザインに近づけることが可能です。
また過去の記事も自然な形で表示できるのも大きいです。
その結果、より多くの記事が読者の目に留まりやすくなりPV数増加やセッション数増加に繋げられます。
Cocoonでカルーセルを実装する手順
![説明書、手引き](https://panadablog.com/wp-content/uploads/2020/03/65a7751d527f5ef044d45aece5dd8555-3-1024x576.png)
ここからCocoonでカルーセルを実装する方法を解説していきます。
実装までの手順は以下の4ステップです。
- WordPress管理画面→「Cocoon設定」へ
- 「カルーセル」を選択
- カルーセル表示設定を行う
- 変更をまとめて保存
順番に説明していきます。
WordPress管理画面→「Cocoon設定」へ
WordPress管理画面左にある各メニューから「Cocoon設定」を選択します。
![Cocoon設定](https://panadablog.com/wp-content/uploads/2020/03/6bdc0c51b9087b49b54588a91b6d8426.png)
Cocoon設定内にある「カルーセル」を選択
Cocoon設定内の「カルーセル」を選択。
![Cocoonカルーセル設定](https://panadablog.com/wp-content/uploads/2020/03/505d1e78765944bb86920f8328176979-1024x151.png)
カルーセル表示設定を行う
カルーセル表示の詳細設定をしていきます。
以下がカルーセル設定画面です(画像は2枚に分かれてます)。
![カルーセル設定画面上](https://panadablog.com/wp-content/uploads/2020/03/5cf2cca87bb112d81766ad7389fdb97c-1024x691.png)
![カルーセル設定画面下](https://panadablog.com/wp-content/uploads/2020/03/038d6910d83a4f48fa62d0b921ae1fcb-1024x574.png)
続けて各設定項目を順に説明します。
カルーセルの表示
ここではカルーセルを表示するページを決めます。
![カルーセル表示](https://panadablog.com/wp-content/uploads/2020/03/ae7f65643d6a43bdc61d5d8f5fdb4806.png)
表示ページを選択後、変更をまとめて保存を押すとデフォルトの状態のカルーセルが表示されます。
なので表示するだけならここまでで完了です。
以降は詳細な設定の説明です。
表示内容
人気記事、カテゴリー、タグを設定します。
人気記事
カルーセルに人気記事を表示するかを選択できます。
![カルーセル人気記事](https://panadablog.com/wp-content/uploads/2020/03/19cc0127400759a25058d2bc891a5214.png)
チェック有り | 集計期間内の人気記事を表示 |
チェック無し | 全ての記事を表示 |
カテゴリー
カルーセルに表示する記事のカテゴリーを選べます。
![カルーセルカテゴリ](https://panadablog.com/wp-content/uploads/2020/03/e2d8e2235220754cd6e17601c3c2300a.png)
チェック有り | チェックを付けた該当カテゴリ記事のみ表示 |
チェック無し | 全てのカテゴリの記事を表示 |
カルーセルに表示する記事を一つのカテゴリに絞ることでサイトの方向性を読者に示す、といった使い方も可能。
タグ
特定のタグが付与されている記事のみ表示するかを設定します。
![カルーセルタグ](https://panadablog.com/wp-content/uploads/2020/03/c95c793157e8a9f9c15bf8a55a909026.png)
カルーセルの並び替え
カルーセルを表示する順番を決められます。
![カルーセル表示順](https://panadablog.com/wp-content/uploads/2020/03/497b7700b7a07e5d4c537b5d75c133bc.png)
投稿日、更新日に設定すると新着記事の表示欄として活用することもできます。
最大表示数
記事の最大表示数を設定します。
12~120記事の間で設定可能です。
![カルーセル最大表示件数](https://panadablog.com/wp-content/uploads/2020/03/a2085649f0ba388de02a59bb750024e7.png)
枠線の表示
記事毎に枠線を設けるかを設定します。
![カルーセル枠線設定](https://panadablog.com/wp-content/uploads/2020/03/13a51458bb7af22fe75ce8ae889331d5.png)
チェックを入れると下の画像のよう一つ一つ記事が区切られた状態になります。
![枠線有りカルーセルプレビュー](https://panadablog.com/wp-content/uploads/2020/03/929fd7137fcfa8de2a84e2cef7e4f761-1024x210.png)
オートプレイ
カルーセルを自動送りするか設定できます。
チェックを入れると後述するインターバル(記事を表示する時間)毎に記事が左方向にスクロールします。
![カルーセルオートプレイ設定](https://panadablog.com/wp-content/uploads/2020/03/972774c19d616e7e992521f2d3af7363.png)
オートプレイインターバル
オートプレイ時のインターバルを設定します。
3秒~30秒までの範囲で設定可能です。
![カルーセルオートプレイインターバル](https://panadablog.com/wp-content/uploads/2020/03/0451daa4039f88b77acc245e70e64654.png)
5秒~10秒の間で設定するのがおすすめです。インターバルが早すぎるとクリックミスを誘発する恐れがあるので注意しましょう。
変更をまとめて保存
全ての設定が終わったら「変更をまとめて保存」を押します。
設定反映は一番上のプレビューで確認できます。
![カルーセルプレビュー](https://panadablog.com/wp-content/uploads/2020/03/e4ec215773fc082ac520fe9f2d70cf97-1-1024x218.png)
これでカルーセル設定は完了です。
カルーセルの注意点
![注意](https://panadablog.com/wp-content/uploads/2020/03/83a7ee640eb61940e2e079f8e8a359df-3-1024x576.png)
カルーセル実装において注意すべきことが一つだけあります。
それはカルーセルの設置により画面内に表示する項目がひとつ増えてしまい、サイトの表示速度が若干落ちることです。
対策としてはフロントページなど一部のページのみカルーセルを設置して読み込みを最低限に抑える等があります(当サイトはフロントページのみ設置)。
もしあまりに読み込み速度が落ちるようでしたらカルーセルの設置は非推奨です。
Cocoonでカルーセルを実装する方法:まとめ
![名案](https://panadablog.com/wp-content/uploads/2020/03/0b175333bb1075f818c94d4feddb5638-3-1024x576.png)
以上のようにCocoonを使ってさえいればカルーセルの実装を簡単に行うことができます。
過去記事を埋もれさせず、かつ自然にユーザーにアピールできるという恩恵はサイトを成長させる上では重要です。
表示、非表示もすぐ切り替えられるので一度試してみてはいかがでしょうか?
コメント