【cocoon】ヘッダー下にアイキャッチ画像付き記事を表示する方法

ブログ運営

 

いちるい
いちるい

こんにちは、薬剤師のいちるいです。

 

今回はcocoon初心者による、cocoonの機能紹介をします。

紹介する機能は以下の2パターンです。

 

1.ヘッダー下に画像付き記事を固定で表示する方法
2.ヘッダー下に画像付き記事を横並びにスクロールしながら表示させる方法

 

おそらく初歩的な機能かもしれないので、知ってる方が多いかもしれないです…

(恥ずかしながら自分は2か月目にして知りました(笑))

 

見栄えと回遊率・滞在率を少しでも上げたい方はぜひ試してみてください!

 

 

自身のブログをサイト型にする方法も以前に紹介していますので、よろしければご覧ください。サイト型にしたことで滞在率が約2.4倍に上がりました

 

こんな方にオススメの記事です☟
・ヘッダー下に記事を表示させる方法を知りたい
・特に読んでほしい記事をアピールしたい
・ブログの見栄えを綺麗にしたい
スポンサーリンク

cocoonでヘッダー下に画像付き記事を表示した例

まず最初にヘッダー下に画像付き記事を固定表示した例スクロール表示した例の2パターンお見せします。

 

どちらがいいかは好みで選んで頂いて良いかと思います。

 

2パターン表示した後、ヘッダー下に画像付き記事を表示するメリットを解説してから作成方法に進みます。

 

ヘッダー下に記事を固定表示した例

まず一つ目、ヘッダー下に画像付き記事を固定で表示する方法の例です。

 

パソコンでみるとこんな感じです☟

 

スマホで見るとこんな感じです☟

 

ヘッダー下に記事をスクロール表示した例

二つ目、ヘッダー下に画像付き記事を横並びにスクロールできる表示方法の例です。

 

パソコンでみるとこんな感じです。

 

スマホでみるとこんな感じです☟

 

 

cocoonでヘッダー下に画像付き記事を表示するメリット

ヘッダー下に画像付き記事を表示するメリットとして以下のことがあげられます。

・サイトの見栄えが良くなる
・回遊率・滞在率が上がる?
・読んでほしい記事をアピールできる

 

サイトの見栄えが良くなる

初心者でテーマをcocoonにしてブログ始めたばかりという方は、記事が一覧で並んでいる状態だと思います。

 

記事一覧が並んでいるだけの状態にしておくと、せっかく良い記事を以前に書いていたとしても見てもらえない可能性があります。

 

そこで記事一覧から、カテゴリごとに分けたりするサイト型や、今回紹介するヘッダー下に画像付き記事を表示させることで、自分の読んでほしい記事をアピールすることができます。

 

サイト型にする方法は以前の記事をご参照ください。

 

冒頭でも言いましたが、サイト型にして前後10日間を比べたところ滞在率が約2.4倍に上がりました。

 

回遊率・滞在率が上がる?

若干話が飛びますがヘッダー下に画像付き記事を入れた翌日に、影響力のあるブロガーにこのいちるいブログを紹介して頂く機会があり、バズることができました。

 

この影響で普段とは劇的に違う流入数によるバイアスがかかり、変更前後の回遊率・滞在率の正確な数値を出せません。申し訳ございません。

 

ブログ運営する側としては、紹介された日はPVが普段の約9倍ほど上がったので嬉しい限りでした(笑)

 

そんな影響力が凄まじいブロガー、ガオさんのブログはこちらです。

ガオのノート
タイトルテキスト

 

SEO対策アフィリエイト等ブログ運営にかかせない有益な情報が多くあるので、参考にするに越したことはありません。

 

Twitterフォロワー約4700人(1月15日現在)という数値も、ガオさんの情報の有益さを表してるといえるかと思います。

 

今回のいちるいブログがバズるきっかけになったブログ紹介等の企画もやっているので、ガオさんのTwitterの方もフォロー必須です。

ガオ@ブロガー毎日更新(@gaolifehack)さんはTwitterを利用しています

 

読んでほしい記事をアピールできる

読んでほしい記事をヘッダー下に画像付きで固定表示させた日(1月12日)その前日(1月11日)を比べました。

 

結果、固定表示させた日は表示した記事すべて読んで頂くことができました。(※固定表示できる記事数は自分で選ぶことができ、今回は4つに設定してました。)

 

 

この変わりようからも、デフォルトの状態から改造させる価値は大いにありです。

 

 

cocoonでヘッダー下に画像付き記事を表示する方法

ヘッダー下に画像付き記事を固定表示する方法スクロール表示する方法を紹介していきます。

 

ヘッダー下に記事を固定表示する方法

ダッシュボードを開き、「外観」➡「メニュー」➡「新しいメニューを作成しましょう」の順でクリック。

 

メニュー名」に『おすすめカード』と入力し、「メニューを作成」をクリック。

 

投稿」をクリックし、選びたい記事を選び「」します。(何個でも選べますが、たくさん選んだら結局一覧と変わらないので少な目をおすすめします。)

」したら「メニューに追加」をクリック。

 

」したのが抜粋されているのを確認し、「メニューを保存」をクリック。

 

Cocoon設定」➡「おすすめカード」の順でクリック。

 

おすすめカードの表示」で表示させたいページを選択➡「メニューを選択」で『おすすめカード』を選択➡「表示スタイル」「カード余白」「カードエリア左右余白」を自分好みに選択します。

最後に「変更をまとめて保存」をクリックして、完成です!

 

ヘッダー下に画像付き記事が表示されていると思うので、プレビューで確認してみてください。

 

ヘッダー下に記事をスクロール表示する方法

ダッシュボードを開き、「Cocoon設定」➡「カルーセル」の順でクリック。

 

カルーセルの表示」で表示させたいページを選択➡「表示内容」で表示させたいカテゴリー等を選択します。

 

下にスクロールしていき、各項目を自分好みに設定して、「変更をまとめて保存」をクリックして完成です!

オートプレイという項目は、自動的にスクロールされて欲しいor欲しくないかということです。

勝手に動くのが鬱陶しいと思うのであれば✔はいれないでもいいかと思います。

 

ヘッダー下に画像付き記事が表示されていると思うので、プレビューで確認してみてください。

 

 

 

 

以上がcocoonの設定についての記事でした。

最後まで読んでいただきありがとうございました。

他になにか気になることがありましたらお気軽にお問い合わせください。

 

 

 

このブログでよく見られている記事はこちら↓

クレベリンは風邪・インフルエンザの予防に効果はある?
本記事ではクレベリンが予防に効果があるのかということを、様々な報告を基に解説しております。結論として、クレベリン(二酸化塩素製剤)は使う環境によって効果が期待できる可能性があります。ブランドの信用性で安易に判断するのではなく、適切な情報収集をすることが大切です。

 

よろしければTwitterのフォローよろしくお願いします!

 

コメント

タイトルとURLをコピーしました