Cocoonで各記事のスライドショー(カルーセル)を簡単配置する方法を解説

Cocoon

前回の記事でスキンを適用したら質素なシンプルなブログが一気におしゃれになりましたね。今度は更にスタイリッシュにする方法を解説します。カルーセルもCocoonならプラグインを使わず簡単な方法なので是非ともこの記事を参考に設定していただきたいです。

 

使う機能は「カルーセル」と言う機能です。当ブログの上部に表示されている↓下記赤枠↓の部分のことです。記事の一覧が横にスライドショーでぐるぐると入れ替わっていきます。もちろんリンクで記事に飛ぶことができます。動きもあってアピール度も高くなります。

Cocoonで各記事のスライドショー(カルーセル)を簡単配置する方法を解説

カルーセルを文字で説明すると回転台などの意味があるようです。

カルーセルとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語。 コンピュータの操作画面を構成する要素の一つで、写真など複数の項目が横に並んでおり、これをマウスやタッチ操作で左右にスライドして項目を入れ替えることができる表示領域をカルーセルという。

IT用語辞典 e-Words より引用

Cocoonテーマのブログにカルーセルを導入するにはCocoon設定から!

設定はWordPressのダッシュボードから①「Cocoon設定」を開きます。

Cocoonで各記事のスライドショー(カルーセル)を簡単配置する方法を解説

Cocoon設定ページ内の②「カルーセル」タブを選択します。

Cocoonで各記事のスライドショー(カルーセル)を簡単配置する方法を解説

カルーセル設定内容その①:どのページで何を表示させるかを設定

カルーセル設定ページの設定項目を解説していきます。

③カルーセルの表示:カルーセルを表示させたいページを次から選択できます。

・表示しない
・全ページで表示
・フロントページのみで表示 (≒トップページのみで表示)
・投稿・固定ページ以外で表示 (トップページ、アーカイブページ、カテゴリ別記事一覧でも表示されます)

④表示カテゴリー:でカルーセル内に表示される記事のカテゴリを選択します。

設定内容は下に続きます。

Cocoonで各記事のスライドショー(カルーセル)を簡単配置する方法を解説

カルーセル設定内容その②:カルーセルの見た目に関する設定

後半部分は見た目に関する設定ですので好みに応じて、見せたい記事が多いか少ないかで調整していきます。

⑤最大表示数:カルーセル内に表示する記事数を設定します。少ない数で特定のページをアピールするか、様々なページを表示させるかによって数を変えます。

⑥枠線の表示:カルーセル内の記事を枠線で囲むかどうかを設定します。

⑦オートプレイを実行:カルーセル内の記事を一定間隔で次のページを表示するかどうかを選択します。

⑧オートプレイインターバル:オートプレイ実行時に次のページに切り替えるまでの時間を指定します。

設定が全て完了したら最後に⑨「変更をまとめて保存」を選択します。

Cocoonで各記事のスライドショー(カルーセル)を簡単配置する方法を解説

これでカルーセルの設定は完了です。スマホ、PCからトップページやカテゴリ別記事一覧、投稿記事ページなど、意図したページで表示されていることを確認しましょう。

コメント