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

モバイルIT
スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

修正方法

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

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

Cocoon関連記事をスクロールスライダー 修正する手順
  1. style.cssにCSSを追加する
  2. ウィジェットに[C] 関連記事ウィジェットを追加する

以上です。

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

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

style.cssにCSSを追加する

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

CSSを修正したいんですが、やり方は2つあります。自分で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; /*15秒間でアニメーションを無限に繰り返す*/
}
@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; /*15秒間でアニメーションを無限に繰り返す*/
}
@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% = 右に3コンテンツ分移動)をするように設定しています。

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

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

@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){ }”のなかに記載してください。スマホでもフリックで直感的に操作できるようになっているので、思わずスクロールしてしまいそうですね。

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

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

モバイルITブログ運営
スポンサーリンク
スポンサーリンク
当サイトの運用レンタルサーバ
1.超高速Webサーバー「LiteSpeed」と「HTTP/2」「QUIC」の高速化技術にも対応。
2.全プラン最新のCPU・大容量メモリ・ピュアSSDを採用。
3.最新のスペックと技術でWordPressをより高速・安全に表示!
4.東日本・西日本のリージョン選択が可能な “地域別”の自動バックアップを無料で搭載。
5.次世代セキュリティ「Imunify360」でマルウェア、改ざんを防止。
6.「かんたん操作のコンパネ/cPanel」を採用!
7.無料SSL(COMODO)に標準対応。
8.マルチドメイン・データベース・メールアドレス、すべて無制限。
9.ライブチャット・電話・メールに対応した安心のサポート体制。
10.ドメイン取得が可能!業界トップクラスの「バリュードメイン」を採用。

プロモーションコード(クーポンコード)
2021年5月31日まで

初年度50%OFFクーポンプレゼント!
SV50U13AT4H5KY
【当サイト運用】コスパ最強のColorfulBox(カラフルボックス)のオススメポイント
スポンサーリンク
スポンサーリンク
\この記事が役に立ったらシェアしよう/
デジライン

Comments

スポンサーリンク
こちらの記事も読まれています
スポンサーリンク

この記事を書いた人

Taka

モバイルシステムエキスパート。某大手IT企業でエンジニアをやりながら、モバイルIT系ブロガーをやっております。独学でプログラミング勉強してWEBアプリ作ったりしながら、日々の生活の中で面白そうな情報を記事にしています。レビュー依頼などはお問合せからお願いします。

\フォローする/
タイトルとURLをコピーしました