ブログ初心者に徹底的に寄り添うやさしいサイト

【ブックマーク必須】ブログで年間270万円収益化した方法総まとめ

Cocoonでスライドショーをヘッダー下に導入する方法【トップページ】

 
Cocoonでスライドショーをヘッダー下に導入する方法【トップページ】
この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

Cocoonでスライドショーを導入するにはどうしたらいいでしょうか?

ブログ初心者に戻ったタケ

こんな疑問を累計1000記事以上書いてきたタケが解決します。

Cocoonにスライドショーを導入する方法は簡単で、設定手順はこの記事に全てまとめました。

画像付きで詳しく解説してますので、スライドショーができなくて困ってるブロガーさん必見の1記事です。

本気で収益化を目指す方は有料テーマがおすすめです。

デザインを簡単に設定でき、より細かくデザインを決めることができます。

当ブログのおすすめテーマを紹介した記事もありますので、一度ご覧ください

Cocoonの「スライドショー」は複数種類ある

Cocoonの「スライドショー」は複数種類ある

Cocoonでスライドショーと言うと、以下の2種類が挙げられます。

  1. カルーセルでスライドショー形式にする
  2. ヘッダーをスライドショー形式にする

これらの見本がありますので、どちらかお好みの方に設定してみてください。

カルーセルでスライドショーにした見本

カルーセルは上記画像のように、記事一覧がスライドショー形式になっているデザインです。

トップページで記事を目立たせることができるので、クリック率アップが期待できます。

Cocoonの場合、カルーセルを使うとトップページの見栄えがかなりいいです。

ヘッダー画像をスライドショー形式にした見本

ヘッダー画像をスライドショーにしたのが上記の例です。

画面いっぱいにスライドショーを作ることができます。

上記画像ではカルーセルと同時に表示していますが、デザイン的には同時表示しない方が見栄えはいいです。

私がCocoonを使う時はカルーセルのみを表示しています。

Cocoonでヘッダー下にスライドショーを導入する方法〜カルーセル導入〜

Cocoonでヘッダー下にスライドショーを導入する方法〜カルーセル導入〜

カルーセルはWordPress管理画面から以下の手順で導入できます。

  1. Cocoon設定をクリック
  2. Cocoon設定をクリック
  3. カルーセルを選択

設定はお好みの設定でいいですが、以下の2点だけおすすめの設定があります(画像参照)

「フロントページのみで表示」「最大表示数10以下」がおすすめ。

カルーセルを記事ページでも表示してしまうと読者さんが記事に集中してくれないという欠点があります。

また、最大表示数が多すぎると誘導したいページに読者誘導することができません。

なので、上記画像の設定にしておくのがおすすめです。

Cocoonのヘッダー画像をスライドショーを形式にする方法

Cocoonのヘッダー画像をスライドショーを形式にする方法

ヘッダー画像をスライドショー形式にするにはプラグインの導入が必要です。

  1. プラグイン
  2. 新規追加
  3. 検索窓に「Meta Slider」と入力
  4. 有効化する

この手順でプラグインを有効化した後に、スライドを設定していきます。

スライド画像を追加する

スライド画像を挿入する手順を画像にしました。

画像の作業を繰り返すだけで、スライド画像を追加することができます。

画像の赤枠を順番にクリックしていってください。

スライドの設定をする

スライド画像に表示させる画像や画像をクリックした時に誘導するページを設定します。

下記画像の赤枠にチェックを入れて、キャンプションとURLを入力。

入力後に保存をクリックして、完了です。

Cocoonスライドショー

プレビューする

追加した画像をプレビューすることもできます。

下記画像の赤ボタンを押すだけなので、プレビューを何回もして、好みのスライドに設定しましょう。

コードを貼り付ける

コードをコピーして、「外観」→「テーマエディター」から編集していきます。

画像の通り順番に進んでいってください。

テーマエディターの編集は間違いが許されないので、丁寧に作業していくことが大切です。

コードをコピーして貼り付けるだけの画像ですが、間違えないようにしましょう。

【スライド設定画面からコピー】

【外観→テーマエディターへ移動】

【コードを貼り付ける】

まとめ:Cocoonでスライドショーはカルーセルがおすすめ。本気のデザインは有料テーマで

まとめ:Cocoonでスライドショーはカルーセルがおすすめ。本気のデザインは有料テーマで

Cocoonでスライドショーは「カルーセル」と「ヘッダー画像をスライドショー形式」の2種類があります。

その2つの中ではカルーセルの方が見やすく、おすすめです。

また、デザインをさらに細かく設定したい場合は有料のWordPressテーマを使いたいところ。

収益化している人の多くが有料テーマを使っていますし、私も2万円以上の有料テーマを使っています。

本気で収益化したい方はぜひ検討してみてください。

この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

★オープンチャット開始★

初心者ブロガーさんと楽しく成長するLINEオープンチャットです!

質問、記事添削、ZOOM勉強会などでブログを向上できます。

★少人数制の初心者ブログサポート★

4時間超えの限定動画コンテンツ、ZOOMによる個別相談可能。

有料コンテンツの無料閲覧も可能です。

Twitterでブログ情報を発信中

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA