【Cocoon】メニュー下のスライドショー表示方法【カルーセル設定】

Cocoonでスライドショーを表示したい人「他のサイトでトップページにスライドショーを載せているサイトを見つけた。自分のサイトにも設置したいな~。プラグインは必要なの?同じCocoonテーマなら、簡単に作れるのかな?」

この記事の内容

  • Cocoonで記事のスライドショー(カルーセル)を表示する手順
  • その他詳細設定

どうも!ましゅー(@mashuublog)です。

この記事は無料で利用できる、おすすめWordPressテーマの「Cocoon」のカスタマイズ方法についての記事となっています。プラグインも不要で設置できますので、ご安心下さい。

Cocoonテーマのダウンロードはこちらから

他のブログでも多く使われており、よく見かけると思います。実はこれ「カルーセル」って名前なのですが、皆さんはご存じでしたでしょうか。

ましゅー
ましゅー

私もブログを始めてから、カルーセルっていう単語を初めて知りました。。。

実はこれ、Cocoon設定を変えるだけで超簡単に設置できるのですが、私はこの答えに行き着くのに「3時間」もかかってしまいました(泣)

しかし、この記事を見つけたあなたはもう大丈夫ですよ。安心して下さい。

おめでとうございます!

なんとこの設定、数クリックするだけで簡単に設置できてしまいます。下記で説明していきますね。

手順1:Cocoon設定からカルーセルをクリック

ダッシュボードからCocoon設定を開きます。「カルーセル」タグをクリックして下さい。

タブを開くと以下のような画面になります。

手順2:カルーセルの設定を行い、変更を保存する

カルーセルの表示「フロントページのみで表示」に変更するとトップページのみに表示されます。(デフォルトは「表示しない」に設定されています。)

※他にも「全ページで表示」「投稿・固定ページ以外で表示」「投稿・固定ページのみで表示」「投稿ページのみで表示」「固定ページのみで表示」があります。

スマートフォンで表示チェックを入れておくと、スマホでも表示されます。

表示内容:人気記事の部分にチェックを入れます。

以上の3項目が設定できたら、「変更をまとめて保存」ボタンを押しましょう。

基本設定はこれだけです

トップページに表示されたことを確認してみて下さい。

ましゅー
ましゅー

まじか。こんなに簡単なんかい・・・(笑)

Cocoonの製作者わいひらさんはやっぱすげぇ。神や。感謝しよう。

以上がカルーセルの基本設定になります。

簡単に「記事の一覧のスライドショー」が設置できましたね。Cocoonはこのように簡単にカスタマイズすることができるので、おすすめの無料テーマとなっています。

Cocoonテーマのダウンロードはこちらから

カルーセルの詳細設定

余談かもしれませんがせっかくなので、残りの項目も説明しておきます。参考にしてみて下さい。

表示内容:カルーセル内の表示内容が変更できます。

人気記事の表示 or カテゴリ内の記事を全て表示or タグの記事を表示」から選べます。

当サイトではタグを使って表示しています。この設定に変えてタグを整理しました。
タグを一度整理しておけば、表示方法に幅が出せるのでおすすめですよ。

カルーセルの並び替え:カルーセルを表示する順番を変更できます。

ランダム or 投稿日(降順) or 更新日(降順)」から選択。お好みで。

最大表示数:カルーセルに表示する記事数の最大値を指定できます。

基本、デフォルトの18で問題ないです。

カードの枠線を表示する:カルーセルのカードの枠を表示するかの設定。

完全にこの辺は好みですね。

オートプレイを実行:カルーセルの自動送りをするかの設定。

ユーザーの視認性が上がるので基本ONにすべき。

オートプレイインターバル:自動送りの間隔の設定。

デフォルトの5秒くらいがちょうどいいでしょう。

終わりに:カルーセルって結局なんでしょうか?

カルーセルとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語。Webページなどに設けられる画像などの表示領域で、内容を左右に移動して切り替えられるものをこのように呼ぶ。

カルーセルとは – IT用語辞典 e-Words

IT用語だったのか知らなかった。詳しくは引用先をどうぞ。

以上です。おわり。

コメント