こんにちは、わぁちゃんです。
有料テーマでよく目にする「スライド記事」。
こんな感じにトップページにあると、どんな記事があるのかパッと見てわかるので便利ですよね。
有料テーマだからできるんだろうな…とあきらめていませんか？
気になってやってみたら、cocoonでも簡単に設定ができました。
今回はcocoonでトップページにスライド記事を表示する方法について紹介していきます。
初めてでもcocoon設定から簡単に設定できたよ！
スライド記事を設定する方法
このようなスライド記事は「カルーセル」と呼ばれています。
このカルーセルは、cocoon設定から簡単に設定することができます。
では、早速お伝えしますね。
cocoon設定→カルーセル
まずcocoon設定を開きます。
たくさんのタブの中から「カルーセル」を開いてください。
カルーセルを開くとこのようなページになります。
カルーセルの表示
まず、スライドをどのページで出すかを設定します。
このサイトでは、全ページで表示していますが、トップページだけで良い場合は「フロントページのみで表示」を選んでください。
また、スマートフォンで見た際も表示された方がいい場合は、「スマートフォンで表示」にチェックを入れましょう。
PCでの表示の際は1回で6記事表示されるのでアイキャッチになったけど、スマートフォンでは2記事しか表示されず、新着記事と混ざって見にくくなってしまったので、PCのみ表示させるのがおすすめ！
表示内容
次に、表示内容を選びます。
人気記事を表示させる際は、人気記事の対象期間を設定することができます。
ブログ始めたてで記事数がない場合は全期間、投稿数が多くなってきたら30日間や7日間など、ブログの状況によって変えられるので、ブログ歴に関係なく設定できるね！
また、決まったカテゴリーを載せたい場合は、カテゴリーにチェックを入れるとチェックされたカテゴリーの記事が表示されます。
カルーセルの並び替え・表示数
「新着記事を優先して載せたい」などこだわりがあれば、載せる順番を設定しましょう。
記事ずつは設定できませんが、更新順なのか、新着順なのかを設定できます。
こだわりがなければランダムで！
次にカルーセルに表示する数を設定します。
12～120記事を表示できるので、好きな数を設定しましょう。
スマートフォンメインなら、12記事でも6回回転させる必要があるので十分だと思いますが、PCメインなら18記事～30記事ほどあってもいいと思います。
当ブログは18記事で設定しているよ！
3回転で見れるので、時間がなくてもささっと見やすい量。
また、記事と記事のカードを枠線で囲みたい場合は「カードの枠線を表示する」にチェックを入れてください。
枠線で囲むと、このような表示になります。
自動でカルーセルを回す方法
そのままの設定だと、他の記事を見たい場合は左右の矢印ボタンでカルーセルを回す必要があります。
「オートプレイを実行」にチェックを入れることで、自分でボタンを押さなくても自動的にカルーセルが回る設定をすることができます。
回転の間隔も設定できるので、ゆっくり見てほしい時は長めに、短時間で多く見てほしいときは短めになど、3秒～30秒の間で設定してみてください。
全て設定したら、「変更をまとめて保存」。
「設定は保存されました」と表示がでれば成功！
403エラーが発生してしまったら
当ブログで設定した際、保存のタイミングで403エラーが発生してスムーズにいきませんでした。
403エラーはレンタルサーバーのWAF設定が原因で発生していたので、レンタルサーバーのWAF設定を一旦無効にし、cocoon設定が終わった後に再度有効にすることで解決することができました。
403エラーが出て保存ができなかったら、この記事にまとめているので参考にしてみてください。
まとめ《cocoon設定から簡単にできる》
記事をスライドで表示させるカルーセルは、cocoon設定からすぐできるので簡単です。
- cocoon設定→カルーセル
- 表示する場所を設定
- 表示する内容を設定
- 表示する順番を設定
- 表示する数を設定
- 自動で回すかを設定
この６つを設定し、保存するだけ。
保存するときに403エラーが出てしまったら、レンタルサーバーのWAF設定を一旦解除して試してみてください。
