【Cocoonカスタマイズ】関連記事ウィジェットをスクロール化する

プロモーションを含みます

今回はCocoonの関連記事をカスタマイズしていきます。

Cocoonの関連記事って、デフォルトでもいくつか準備されているんですが、それって全て投稿記事の直下に置くことを前提としていて、かつ表示形式も通常の縦に並べていくか、グリッド形式かで、今回のようなスクロールで記事をめくっていくような形式がありませんでした。

因みにCocoonデフォルトだと、関連記事をウィジェットで置いてあげるとどうなるかというと、こんなシンプルな感じですね。

今回はこのシンプルな関連記事リストを以下のような感じにカスタマイズしていくやり方を紹介してみたいと思います。

では、早速レッツカスタム！

人は動くものについ目が行ってしまう

ブログの内部SEO的に重要なのはサイト内回遊率をあげることです。

Cocoonはそれ自体でSEOに優れたウィジェットが多いんですが、やはりデフォルトのままだと、Cocoonということがわかってしまい、他のサイトとの差別化が図れません。

今回のようなアニメーションは、いわゆるカルーセル（回転木馬）と呼ばれるものなんですが、一度に多くのサムネイルを表示できるので、少ないスペースで多くのコンテンツをユーザーに表示することが可能です。

ただデメリットもあって、動くものに目を向けるが、コンテンツが流れてしまい、ユーザーの注意が分散されてしまい、結果的にエンゲージメントが下がる可能性があるということです。

一般的にパソコンでは例え視認率が高いコンテンツ上部であっても、クリック率は１％程度と言われているので、コンテンツ下部ともなると、そもそもそこまで読まれる可能性も低いのに、クリック率も低いんじゃ意味ないんじゃないかとも思ってしまいます。

ただし、今回の目的は動くものを下部に置いておくことで、コンテンツ下部にきてから、ユーザーの目に止まらせるというのが主目的です。

そしてあわよくばデザイン性でオッ？と思ってくれればとりあえず十分かなと思っています。

修正方法

早速リストを修正していくんですが、実はあんまり難しくありません。

大まかな手順はこんな感じです。

Cocoon関連記事をスクロールスライダー修正する手順

style.cssにCSSを追加する
ウィジェットに[C] 関連記事ウィジェットを追加する

以上です。

とても簡単ですね。Cocoonはデザインを自分でカスタマイズしやすいようにしてくれているのかはよくわかりませんが、デフォルトがとてもシンプルなので、少しでもWordpressをかじっている人だとサイトを見ただけで、「Cocoonだな」ってわかってしまうんですよね。

元々Cocoonは自分でCSSをいじれる人向けとも言えるので、しっかりやり方を学んで自分好みにカスタマイズしちゃってください。

style.cssにCSSを追加する

では、早速カスタマイズを始めていきます。

CSSを修正したいんですが、やり方は２つあります。自分でFTPを使って直接ファイル修正するか、もしくは今回のようにテーマエディタを使うかです。

どちらでも自分が使いやすい方で大丈夫です。

エディタが開けたら、以下をそのままコピーして貼ってください。自分でカスタマイズしそうなところにはコメントを入れていますので、自分のサイトデザインに併せて適宜修正してください。

/***********Cocoon投稿記事下の関連記事のスクロールバーカスタマイズ****************/
.under-entry-content .widget-related-entry-cards{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
}

.under-entry-content .widget-related-entry-cards::-webkit-scrollbar{
    width: 8px !important; /*スクロールバーのサイズ*/
    height: 8px !important;/*スクロールバーのサイズ*/
}
.under-entry-content .widget-related-entry-cards::-webkit-scrollbar-thumb{
    background-color: rgba(170,170,170,0.62); /*スクロールバーの色*/
}
.under-entry-content .widget-related-entry-cards::-webkit-scrollbar-track{
    background-color: rgba(170,170,170,0.38); /*スクロールバーの背景色*/
}

.under-entry-content .widget-related-entry-cards .a-wrap{
    display: initial; /*元々のデザインのクリア*/
}

.under-entry-content .widget-related-entry-card-link{
  min-width: 200px !important; /*ナビカードの横幅*/
  height: 250px; /*ナビカードの高さ*/
  display: inline-block !important;
  margin: 0 0.3em;
  animation: sliderAnime 15s ease-in-out infinite; /*１５秒間でアニメーションを無限に繰り返す*/
}
@keyframes sliderAnime{ /*アニメーションの動作*/
    0%{
 
    }
    12.5%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-300%);
    }
    37.5%{
        transform: translateX(-300%);
    }
    50%{
        transform: translateX(-600%);
    }
    62.5%{
        transform: translateX(-600%);
    }
    75%{
        transform: translateX(-870%);
    }
    87.5%{
        transform: translateX(-870%);
    }
    100%{
        transform: translateX(0);
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
	.under-entry-content .widget-related-entry-card-link{
	  height: 220px;  /*モバイル時のナビカードの高さ*/
	  vertical-align: top;  /*モバイル時のナビカードの位置*/
	}

    @keyframes sliderAnime{
        0%{

        }
        7%{
            transform: translateX(0);
        }
        14%{
            transform: translateX(-200%);
        }
        21%{
            transform: translateX(-200%);
        }
        28%{
            transform: translateX(-400%);
        }
        35%{
            transform: translateX(-400%);
        }
        42%{
            transform: translateX(-600%);
        }
        49%{
            transform: translateX(-600%);
        }
        56%{
            transform: translateX(-800%);
        }
        61%{
            transform: translateX(-800%);
        }
        70%{
            transform: translateX(-1000%);
        }
        77%{
            transform: translateX(-1000%);
        }
        84%{
            transform: translateX(-1100%);
        }
        91%{
            transform: translateX(-1100%);
        }
        100%{
            transform: translateX(0);
        }
    }

}

.under-entry-content .widget-related-entry-card-link .widget-related-entry-card-thumb{
  float: initial; /*元々のデザインのクリア*/
}

.under-entry-content .widget-related-entry-card-link .widget-related-entry-card-content{
  margin: 0.5em 0;
  white-space: normal;
  font-size: 0.8em !important;  /*記事タイトルの文字サイズ*/
  text-align: center;
}

.under-entry-content .widget-related-entry-card-link img{
  width: 200px !important; /*サムネイルの横サイズ*/
  height: 140px !important; /*サムネイルの縦サイズ*/
  max-width: initial;/*元々のデザインのクリア*/
  max-height: initial;/*元々のデザインのクリア*/
}

因みに今回は敢えて、投稿記事下に関連記事を入れる場合のみに、このCSSを適用させているので、敢えて“.under-entry-content”をつけています。記事全体で適用させたい場合は、“.main”に差し替えても良いです。

但しサイドバーなどに置いた場合に影響が出てしまうので、”.widget-related-entry-card-link”単体で使用するのはやめましょう。

CSSのポイントだけ解説しておくと、このCSSはスクロール化と同時にアニメーションを組み込んでいます。

アニメーションの部分は以下の部分になります。

.under-entry-content .widget-related-entry-card-link{
  animation: sliderAnime 15s ease-in-out infinite; /*１５秒間でアニメーションを無限に繰り返す*/
}
@keyframes sliderAnime{ /*アニメーションの動作*/
    0%{
 
    }
    12.5%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-300%);
    }
    37.5%{
        transform: translateX(-300%);
    }
    50%{
        transform: translateX(-600%);
    }
    62.5%{
        transform: translateX(-600%);
    }
    75%{
        transform: translateX(-870%);
    }
    87.5%{
        transform: translateX(-870%);
    }
    100%{
        transform: translateX(0);
    }
}

ここの部分は、15秒間の12.5%ずつ(1.875秒)に、transformの動作（X軸に-300% = 右に３コンテンツ分移動）をするように設定しています。

時間を長くすればそれだけ止まる時間も長くなりますし、コンテンツが少ないようであれば、-300%ずつではなく、-200%でも良いと思います。今回は関連コンテンツが12個で設定しているので、３回３つコンテンツが移動するので、初期表示と併せて12個全て表示されるというわけです。

一方でモバイルのような小さな端末では200pxの画像は一度に2個弱しか表示できないので、PCと同様に３コンテンツ分移動すると、とても見づらくなってしまいます。そのためモバイル表示の場合だけは、もっと細かくスライドさせるように修正しています。

@media screen and (max-width: 480px){
    @keyframes sliderAnime{
        0%{
        }
        7%{
            transform: translateX(0);
        }
        14%{
            transform: translateX(-200%);
        }
        21%{
            transform: translateX(-200%);
        }
        28%{
            transform: translateX(-400%);
        }
        35%{
            transform: translateX(-400%);
        }
        42%{
            transform: translateX(-600%);
        }
        49%{
            transform: translateX(-600%);
        }
        56%{
            transform: translateX(-800%);
        }
        61%{
            transform: translateX(-800%);
        }
        70%{
            transform: translateX(-1000%);
        }
        77%{
            transform: translateX(-1000%);
        }
        84%{
            transform: translateX(-1100%);
        }
        91%{
            transform: translateX(-1100%);
        }
        100%{
            transform: translateX(0);
        }
    }

}

ウィジェットに[C] 関連記事ウィジェットを追加する

では、最後になります。

最後はいつも通りに外観＞ウィジェットで追加するだけですね。

ポイントは、スクロールができるようになっているので、記事の表示数を大きいものにすることが可能になっています。なのでデフォルトでは”5″になっていますが、少なくとも10〜16記事程度にするのが、見やすく良いんじゃないかと思います。

アニメーションは12で最適化していますので、16などもっと多い数字にしたい場合はアニメーション部分のCSSを修正する必要があります。

また表示タイプは大きなサムネイルにするようにしてください。デフォルトのままにしてしまうと、小さいサムネイルを引き延ばしたような写真になってしまうので、サムネイルは大きいものにしておくのがオススメです。

これで以上になります。簡単でしたね。

最後に

皆さん、うまく修正できましたか？

因みにスマホだとどんな感じになるかというと、こんな感じです。

モバイル用に少しサイズを小さくしたりすることもできますが、その場合は、”@media screen and (max-width: 480px){ }”のなかに記載してください。スマホでもフリックで直感的に操作できるようになっているので、思わずスクロールしてしまいそうですね。

人間は動くもの、ギミックがあるようなものについつい見てしまう、触ってしまうということがあるので、こういったカスタマイズによってサイト回遊率も上がるかもしれませんね。

うまくいかない、こういうカスタマイズもしてみたいという方がいれば、是非コメント欄にてお待ちしております。

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @digiline_ Follow Me

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

Taka

AI業務自動化エンジニア / IoTコンサルタント / ガジェットブロガー

AIとIoTの技術を組み合わせ、スマートホーム構築・業務自動化・ガジェット活用を中心に情報発信と技術支援を行っています。
最新デバイスの検証やレビューだけでなく、実際に生活に組み込み、効率的でストレスのない暮らしを実現するための具体的なノウハウを提供しています。

自宅を“テックハブ”として運用しながら、AIエージェント、IoTデバイス、クラウドサービスを連携させた実験的な取り組みも継続中。
技術の進化を生活に落とし込み、「明日から使えるスマートな暮らし」を読者のみなさんと一緒に作っていくことを目指しています。