タケが提供する収入アップサポートとコンテンツ
Cocoonでスライドショーをヘッダー下に導入する方法【トップページ】
Cocoonでスライドショーを導入するにはどうしたらいいでしょうか？
ブログ初心者に戻ったタケ
こんな疑問を累計1000記事以上書いてきたタケが解決します。
Cocoonにスライドショーを導入する方法は簡単で、設定手順はこの記事に全てまとめました。
画像付きで詳しく解説してますので、スライドショーができなくて困ってるブロガーさん必見の1記事です。
より簡単に操作できる人気テーマSWELLとの比較記事
目次
Cocoonの「スライドショー」は複数種類ある
Cocoonでスライドショーと言うと、以下の2種類が挙げられます。
- カルーセルでスライドショー形式にする
- ヘッダーをスライドショー形式にする
これらの見本がありますので、どちらかお好みの方に設定してみてください。
カルーセルでスライドショーにした見本
カルーセルは上記画像のように、記事一覧がスライドショー形式になっているデザインです。
トップページで記事を目立たせることができるので、クリック率アップが期待できます。
Cocoonの場合、カルーセルを使うとトップページの見栄えがかなりいいです。
ヘッダー画像をスライドショー形式にした見本
ヘッダー画像をスライドショーにしたのが上記の例です。
画面いっぱいにスライドショーを作ることができます。
上記画像ではカルーセルと同時に表示していますが、デザイン的には同時表示しない方が見栄えはいいです。
私がCocoonを使う時はカルーセルのみを表示しています。
Cocoonでヘッダー下にスライドショーを導入する方法〜カルーセルスライダー〜
カルーセルはWordPress管理画面から以下の手順で導入できます。
- Cocoon設定をクリック
- Cocoon設定をクリック
- カルーセルを選択
設定はお好みの設定でいいですが、以下の2点だけおすすめの設定があります（画像参照）
「フロントページのみで表示」「最大表示数10以下」がおすすめ。
カルーセルを記事ページでも表示してしまうと読者さんが記事に集中してくれないという欠点があります。
また、最大表示数が多すぎると誘導したいページに読者誘導することができません。
なので、上記画像の設定にしておくのがおすすめです。
Cocoonのヘッダー画像をスライドショーを形式にする方法
ヘッダー画像をスライドショー形式にするにはプラグインの導入が必要です。
- プラグイン
- 新規追加
- 検索窓に「Meta Slider」と入力
- 有効化する
この手順でプラグインを有効化した後に、スライドを設定していきます。
スライド画像を追加する
スライド画像を挿入する手順を画像にしました。
画像の作業を繰り返すだけで、スライド画像を追加することができます。
画像の赤枠を順番にクリックしていってください。
スライドの設定をする
スライド画像に表示させる画像や画像をクリックした時に誘導するページを設定します。
下記画像の赤枠にチェックを入れて、キャンプションとURLを入力。
入力後に保存をクリックして、完了です。
プレビューする
追加した画像をプレビューすることもできます。
下記画像の赤ボタンを押すだけなので、プレビューを何回もして、好みのスライドに設定しましょう。
コードを貼り付ける
コードをコピーして、「外観」→「テーマエディター」から編集していきます。
画像の通り順番に進んでいってください。
テーマエディターの編集は間違いが許されないので、丁寧に作業していくことが大切です。
コードをコピーして貼り付けるだけの画像ですが、間違えないようにしましょう。
【スライド設定画面からコピー】
【外観→テーマエディターへ移動】
【コードを貼り付ける】
まとめ：Cocoonでスライドショーはカルーセルがおすすめ。本気のデザインは有料テーマで
Cocoonでスライドショーは「カルーセル」と「ヘッダー画像をスライドショー形式」の2種類があります。
その2つの中ではカルーセルの方が見やすく、おすすめです。
また、デザインをさらに細かく設定したい場合は有料のWordPressテーマを使いたいところ。
収益化している人の多くが有料テーマを使っていますし、私も2万円以上の有料テーマを使っています。
本気で収益化したい方はぜひ検討してみてください。
一度はチェック！3つの収益化加速コンテンツ
① あなただけの戦略を提案！個別ブログサポート
ネット上のノウハウを見ても、ブログが進まない原因は
「あなたに合ったやり方じゃないから」
今のあなたに必要なことを2017年からのブログ経験からご提案します。
無料おためしあり！ブログのオンラインサポート「WEBインカム構築ゼミ」
② 3ヶ月で在宅初報酬！超速ライターラボ
3ヶ月間毎週ZOOMでサポートして、稼ぐライターを目指します。
1万円稼げなかった場合は全額返金保証！
【返金保証あり】3ヶ月でガッツリ稼ぐWebライター講座「超速ライター養成ラボ」
③ 稼ぐブロガーはやっている！記事を書かない作業工程大全
稼げる記事かどうかは記事を書く前に決まっています。
稼げないブロガーはとりあえず記事を書く、稼ぐブロガーはそうじゃない。
その違いをこのコンテンツから掴みませんか？
【即実行可能】稼ぐブロガーが最初の1ヶ月でやる「記事を書かない」作業工程大全
