特に読んでほしい記事をアピールしたい
ブログの見栄えを綺麗にしたい
そんな方向けのcocoonカスタマイズ記事になります。
今回はcocoon初心者による、cocoonの機能紹介をします。
※現在当サイトはaffingerを使用しております。
紹介する機能は以下の２パターンです。
- ヘッダー下に画像付き記事を固定で表示する方法
- ヘッダー下に画像付き記事を横並びにスクロールしながら表示させる方法
おそらく初歩的な機能かもしれないので、知ってる方が多いかもしれないです…
（恥ずかしながら自分はブログ開始2か月目にして知りました(笑)）
見栄えと回遊率・滞在率を少しでも上げたい方はぜひ試してみてください！
※自身のブログをサイト型にする方法も以前に紹介していますので、よろしければご覧ください。（サイト型にしたことで滞在率が約2.4倍に上がりました）
-
-
【cocoon】初心者向けサイト型トップページのカスタマイズ方法
続きを見る
目次
cocoonでヘッダー下に画像付き記事を表示した例
まず最初にヘッダー下に画像付き記事を固定表示した例とスクロール表示した例の２パターンお見せします。
どちらがいいかは好みで選んで頂いて良いかと思います。
２パターン表示した後、ヘッダー下に画像付き記事を表示するメリットを解説してから作成方法に進みます。
ヘッダー下に記事を固定表示した例
まず一つ目、ヘッダー下に画像付き記事を固定で表示する方法の例です。
パソコンでみるとこんな感じです☟
スマホで見るとこんな感じです☟
ヘッダー下に記事をスクロール表示した例
二つ目、ヘッダー下に画像付き記事を横並びにスクロールできる表示方法の例です。
パソコンでみるとこんな感じです。
スマホでみるとこんな感じです☟
cocoonでヘッダー下に画像付き記事を表示するメリット
ヘッダー下に画像付き記事を表示するメリットとして以下のことがあげられます。
- サイトの見栄えが良くなる
- 回遊率・滞在率が上がる？
- 読んでほしい記事をアピールできる
サイトの見栄えが良くなる
初心者でテーマをcocoonにしてブログ始めたばかりという方は、記事が一覧で並んでいる状態だと思います。
記事一覧が並んでいるだけの状態にしておくと、せっかく良い記事を以前に書いていたとしても見てもらえない可能性があります。
そこで記事一覧から、カテゴリごとに分けたりするサイト型や、今回紹介するヘッダー下に画像付き記事を表示させることで、自分の読んでほしい記事をアピールすることができます。
サイト型にする方法は以前の記事をご参照ください。
関連記事【cocoon】初心者向けサイト型トップページのカスタマイズ方法
冒頭でも言いましたが、サイト型にして前後10日間を比べたところ滞在率が約2.4倍に上がりました。
回遊率・滞在率が上がる？
若干話が飛びますがヘッダー下に画像付き記事を入れた翌日に、影響力のあるブロガーにこのいちるいブログを紹介して頂く機会があり、バズることができました。
この影響で普段とは劇的に違う流入数によるバイアスがかかり、変更前後の回遊率・滞在率の正確な数値を出せていません。申し訳ございません。
ブログ運営する側としては、紹介された日はPVが普段の約9倍ほど上がったので嬉しい限りでした(笑)
そんな影響力が凄まじいブロガー、ガオさんのブログはこちらです。
https://gaosnote.com/
SEO対策やアフィリエイト等ブログ運営にかかせない有益な情報が多くあるので、参考にするに越したことはありません。
Twitterフォロワー約4700人（1月15日現在）という数値も、ガオさんの情報の有益さを表してるといえるかと思います。
今回のいちるいブログがバズるきっかけになったブログ紹介等の企画もやっているので、ガオさんのTwitterの方もフォロー必須です。
https://twitter.com/gaolifehack?s=20
読んでほしい記事をアピールできる
読んでほしい記事をヘッダー下に画像付きで固定表示させた日（1月12日）とその前日（1月11日）を比べました。
結果、固定表示させた日は表示した記事すべて読んで頂くことができました。（※固定表示できる記事数は自分で選ぶことができ、今回は4つに設定してました。）
この変わりようからも、デフォルトの状態から改造させる価値は大いにありです。
cocoonでヘッダー下に画像付き記事を表示する方法
ヘッダー下に画像付き記事を固定表示する方法とスクロール表示する方法を紹介していきます。
ヘッダー下に記事を固定表示する方法
ダッシュボードを開き、「外観」➡「メニュー」➡「新しいメニューを作成しましょう」の順でクリック。
「メニュー名」に『おすすめカード』と入力し、「メニューを作成」をクリック。
「投稿」をクリックし、選びたい記事を選び「✔」します。（何個でも選べますが、たくさん選んだら結局一覧と変わらないので少な目をおすすめします。）
「✔」したら「メニューに追加」をクリック。
「✔」したのが抜粋されているのを確認し、「メニューを保存」をクリック。
「Cocoon設定」➡「おすすめカード」の順でクリック。
「おすすめカードの表示」で表示させたいページを選択➡「メニューを選択」で『おすすめカード』を選択➡「表示スタイル」「カード余白」「カードエリア左右余白」を自分好みに選択します。
最後に「変更をまとめて保存」をクリックして、完成です！
ヘッダー下に画像付き記事が表示されていると思うので、プレビューで確認してみてください。
ヘッダー下に記事をスクロール表示する方法
ダッシュボードを開き、「Cocoon設定」➡「カルーセル」の順でクリック。
「カルーセルの表示」で表示させたいページを選択➡「表示内容」で表示させたいカテゴリー等を選択します。
下にスクロールしていき、各項目を自分好みに設定して、「変更をまとめて保存」をクリックして完成です！
オートプレイという項目は、自動的にスクロールされて欲しいor欲しくないかということです。
勝手に動くのが鬱陶しいと思うのであれば✔はいれないでもいいかと思います。
ヘッダー下に画像付き記事が表示されていると思うので、プレビューで確認してみてください。
以上がcocoonの設定についての記事でした。
最後まで読んでいただきありがとうございました。
他になにか気になることがありましたらお気軽にお問い合わせください。