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

IT・通信
スポンサーリンク

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

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

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

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

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

修正方法

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

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

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{
  white-space: nowrap;
  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{
  width: 200px !important; /*ナビカードの横幅*/
  height: 250px; /*ナビカードの高さ*/
  display: inline-block !important;
  margin: 0 0.3em;
  overflow-y: hidden;
  overflow-x: hidden;
}

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

.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”単体で使用するのはやめましょう。

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

では、最後になります。

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

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

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

最後に

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

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

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

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

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

スポンサーリンク
当サイトの運用レンタルサーバ
【当サイト運用】コスパ最強のColorfulBox(カラフルボックス)のオススメポイント
1.超高速Webサーバー「LiteSpeed」と「HTTP/2」「QUIC」の高速化技術にも対応。
2.全プラン最新のCPU・大容量メモリ・ピュアSSDを採用。
3.最新のスペックと技術でWordPressをより高速・安全に表示!
4.東日本・西日本のリージョン選択が可能な “地域別”の自動バックアップを無料で搭載。
5.次世代セキュリティ「Imunify360」でマルウェア、改ざんを防止。
6.「かんたん操作のコンパネ/cPanel」を採用!
7.無料SSL(COMODO)に標準対応。
8.マルチドメイン・データベース・メールアドレス、すべて無制限。
9.ライブチャット・電話・メールに対応した安心のサポート体制。
10.ドメイン取得が可能!業界トップクラスの「バリュードメイン」を採用。
キャンペーン期間 2020年12月31日まで
「12ヶ月」「24ヶ月」「36ヶ月」の本契約をした場合は利用料が10%割引
プロモーションコード PK4JK4RJ
スポンサーリンク
スポンサーリンク
IT・通信 ブログ運営
こちらの記事も読まれています
スポンサーリンク
スポンサーリンク
\この記事が役に立ったらシェアしよう/
この記事を書いた人
Taka

スマートホーム x IT x 子育て。モバイルシステムエキスパート。独学でプログラミング勉強してWEBアプリ作ったりしながら、日々の生活の中で面白そうな情報を記事にしています。3万PV/月達成しました!お仕事の依頼はお問合せからお願いします。

\フォローする/
デジライン
Subscribe
更新通知を受け取る »
guest
0 Comments
Inline Feedbacks
View all comments

お得なプライム特典はこちら