Cocoonの関連記事をスクロール化するカスタマイズ

Cocoon

今回は、WordPressテーマのCocoonで投稿記事のすぐ下に表示される関連記事をスクロール表示にする方法を紹介したい。

デフォルトで用意されている表示タイプとはまた違った外観になり、与える印象も変わるはずだ。

スポンサーリンク

関連記事をスクロール表示にしたい理由

私はネットサーフィンが好きな方であるのだが、ここ最近、関連記事や新着記事、またオススメ記事などをスクロールで表示しているブログサービスやイラスト投稿系のWebサイトが増えてきたように感じている。

そして、それをCocoonでやれるかというと、残念ながらデフォルトの選択肢には含まれていない。

このように、複数の関連要素を一度に並べて表示する方法のみだ。

だが、スタイルシート(style.css)をちょこっと弄るだけで実現することが可能なはずだと考え、カスタマイズを行うことにしてみた。

メリット

さまざまなWebサービスで選択肢の一つに含まれているということは、確実なメリットがある。

場所を取らずきれいにたくさん表示できる

まずは、いくつ表示しても場所を取らずきれいに並べられるところだろう。

Cocoonでは、最大30記事の関連記事を投稿記事に表示することができる。だが、よく考えてほしい。デフォルトでは、いかなる表示タイプでも結局は縦にズラリと関連記事が並んでしまい、投稿した記事の本文と関連記事群のどちらが主なのかわからなくなってしまう。このため、せいぜい多くても8記事前後が表示数の限界だ。

また、表示タイプによってバランスが崩れてしまう問題もある。横に何列表示するかによって、表示数にも見栄え的な制限がある。横に4列表示なのに10記事だと最後の行に余りが出来てしまう。

上記の問題は、スクロール表示化することできれいに解決することができる。

表示数をいくつ増やしてもスクロール要素内に並べて表示されていくだけなので場所を取らないし、横方向に1行で表示されるため表示数を考える必要もない。7記事や11記事のような素数の数で表示してもきれいに並べることが可能だ。

閲覧者に行動を促す

人間は、動かせるものを動かしてみたくなってしまう

イラストや写真・動画の投稿サイトで、スクロールバーをつい最後まで動かしきってしまう人は多いはずだ。

隠されているものや非表示にされているものを自分の操作ですべて確認できるなら、たとえ少し手間がかかってもやってみたくなる。

これによって、より関連記事が閲覧されることに期待できる。

スマホ画面でも見やすい大きさ

スマートフォンのような小さい画面でも、場所を取らずにたくさんの関連記事を表示できる

現状ミニカードや縦型カードは、幅が480px以下の画面サイズでは関連記事が横2列に並ぶように設定されている(356px以下では1列)。

つまり、関連記事を8記事表示しているとしよう。PC画面では横4列・縦2行で余裕をもって表示される。しかし、それをスマホから見ると横2列・縦4行で表示され、関連記事だけでだいぶ縦に場所を取ってしまう。

このような現象も、スクロール表示では起きえない。なぜなら、縦に1行だけの表示だからだ。

これにより、スマートフォンでもスマートに表示することができる。

デメリット

いいことばかり書いたが、気になる点もあるにはある。

一気に全部表示できない

当たり前ではあるのだが、たくさんの関連記事を一度にすべて表示することはできない。

スクロールから見える部分に表示されるのはせいぜい多くて4記事が限度だろう(それ以上表示すると関連記事が縦に細長くなってしまう)。

なので、とにかく一度に全部見てもらいたいような作りであったり内容のサイトには向かないかもしれない。

関連記事をスクロール化するカスタマイズ

それではカスタマイズをやっていこう。

最初にCocoon側で設定を行い、それから「スタイルシート (style.css)」にスクロール化するコードを入力して完成という手順になる

今回のカスタマイズはPHPファイルには手を付けないのでバックアップの必要はないが、念のため行っておくことを推奨する。

最初に設定しておく項目

CSSでカスタマイズを行う前に、Cocoon側で表示タイプを決めておく必要がある。また、せっかくなので表示数も変えておこう。

Cocoonの関連記事を設定する場所の説明はこちらになる。

まず、管理者画面に入り、左のメニューバーから「Cocoon 設定」をクリックしてCocoonの設定を操作する画面に入る。

そして、上のタブから「投稿」を選び、下に少しスクロールして「関連記事設定」を見つけよう。

関連記事の設定項目が画面に表示されているだろうか?

それでは、やっていこう。

表示タイプの変更

まずは表示タイプを変更しよう。

縦型カード3列(推奨表示数:6, 12, 18…)」にチェックを入れる。

上の画像のようになっていたらOK。

なぜ縦型カード3列を選ぶのだろうか?と疑問に思った人もいるかもしれない。

この理由は、表示タイプが縦型カードの場合だと最小限のCSSコードでスクロール化のカスタマイズが出来るからである。

もちろん、縦型カード4列を選んでもよい。HTMLのクラス名の違いは「rect-vertical-card-3」と「rect-vertical-card-4」の最後の数字の違いでしかないからだ。

ただ、この記事では縦型カード3列を基準にして説明を続ける

表示数の変更

次に、投稿記事中に表示される関連記事の表示数も変えてみよう。

デフォルトでは6記事だが、せっかくスクロールで表示するので11記事表示することにしてみよう。

上の画像のように枠内の数字を「11」にしていたらOKだ。

表示数を11記事にした理由は、素数だからである

割り切れず、きれいに並べることが難しいので、スクロールのメリットがなんとなくわかるはずだ。

もっとも、多すぎると感じたら7記事でも構わない。


以上のふたつの項目がちゃんと変更されていることを確認したら「変更をまとめて保存」を押そう

上の画像のボタンを押して、変更が保存されたことを確認できただろうか?

そして、念のため「Cocoon 設定」ページをリロードして変更が適用されているか確認しよう

これで、最初に設定しておくことの説明を終える。

CSSでカスタマイズ

それでは、CSSを使ってカスタマイズを行おう。

子テーマの「スタイルシート (style.css)」の場所はこちらになる。

まずは、管理者画面の左側のサイドバーにある「外観」の中の「テーマエディター」をクリックしよう。そうすると、「テーマの編集」というページを開くことができる。

そして、画面に「Cocoon Child: スタイルシート (style.css)」が表示されていたらOK。もし違うファイルが表示されている場合は、テーマファイルバー内から「スタイルシート (style.css)」をクリックしよう。

この画像のように、子テーマのstyle.cssが画面に表示されているだろうか?

また、テーマファイルバーの最上部に「この子テーマは親テーマ Cocoon のテンプレートを引き継ぎます。」というダイアログが表示されていることも確認しよう。

この記事で紹介するカスタマイズ手順は、Cocoonにあらかじめ用意されているスキンを使用していない

デザインの崩れがあった場合は、そのスキンに対応するように個人個人でCSSコードをすり合わせてほしい

上記のことに注意してやっていこう。

CSSコード

まずは、下記のCSSコードを子テーマのstyle.cssにコピペしよう

CSSコード
/*関連記事をスクロール表示にするカスタマイズ(縦型カード3列)*/
/*ここから*/
/*関連記事リストの要素*/
.main .rect-vartical-card-3 .related-list {
	flex-wrap: nowrap;
	justify-content: unset;
	overflow-x: auto;
	overflow-y: hidden;
}

/*関連記事カードの要素*/
.main .rect-vartical-card-3 .related-entry-card-wrap { 
	position: relative;
	margin: 6px 4px;
	min-width: 28.57%;
	min-width: calc((100% / 3.5) - 8px);
	overflow: visible;
}

.main .rect-vartical-card-3 .related-entry-card-wrap:last-child::after {
	content: '';
	position: absolute;
	display: block;
	top: 1px;
	left: 100%;
	height: 1px;
	width: 4px;
	background-color: transparent;
}

/*アンダースクロールバーと関連記事カードの間の調整(モバイル時)*/
@media screen and (max-width: 1023px) {
	.main .rect-vartical-card-3 .related-entry-card-wrap {
		margin-bottom: 12px;
	}
}

/*画面サイズがスマートフォンの場合の関連記事カードの幅の再調整*/
@media screen and (max-width: 834px) {
	.main .rect-vartical-card-3 .related-entry-card-wrap {
		min-width: 40%;
		min-width: calc((100% / 2.5) - 8px);
	}
}
/*ここまで*/



/*スクロール表示向きのデザインにする関連記事カードのカスタマイズ(縦型カード3列)*/
/*ここから*/
.main .rect-vartical-card-3 .related-entry-card-wrap {
	border-radius: 2px;
	box-shadow: 0px 0px 2px 0.3px rgba(0, 0, 0, 0.3);
}

.main .rect-vartical-card-3 .related-entry-card-wrap:hover {
	background-color: #fff;
	box-shadow: 0px 0px 4px 0.5px rgba(0, 0, 0, 0.5);
}
/*ここまで*/

コピペしたら「ファイルを更新」ボタンを押して、style.cssの編集を保存しよう。

外観

先ほどのCSSコードを使うと、関連記事要素の外観はこのようになる。

まず、PC画面(画面幅1024px以上)ではこのように表示される。

最後までスクロールバーを右に動かしきったときはこうだ。

また、スマートフォンを想定した画面サイズ(画面幅834px以下)ではこのように表示される。

関連記事カードの横幅を調整して一度に表示される数をひとつ減らしたことで、見やすい大きさにした。

なお、モバイル時のスクロールバーはスワイプしている時しか表示されないので注意してほしい。

こちらも最後までスクロールしてみる。

もちろん、投稿している関連記事の数が少ない場合にも対応している。

このように、関連しているカテゴリやタグの投稿数が少ない場合はスクロールバーを表示しないので違和感がない。

このように、多数の関連記事カードを横にスッキリと並べることができた。

なおかつ、関連記事の投稿数にも適切に対応することができる。

そして、関連記事カード自体のデザインもスクロール表示に適した見やすい形になったと思う。

解説

なぜスクロールで表示することができるのかも併せて解説したい。

スクロール表示にするCSSコードの解説
  • まずCSSコードの子孫結合の強さを高め、かつstyle.cssを圧迫しないよう簡潔に入力する必要がある。
    このため、「.main .rect-vartical-card-3」で統一した。
  • Cocoonの親テーマ側の設定により、縦型カードタイプはあらかじめ「display: flex;」が設定されてフレックスボックスになっている。
    このため、「flex-wrap: nowrap;」で折り返しを無効化し、「justify-content: unset;」で要素内のコンテンツの並び方を初期化するだけでよい。
  • そして、関連記事の数に応じてスクロール表示か否かを分けるために、「overflow-x: auto;」を設定する。
    この際、縦方向のスクロールバーは以下なる場合でも非表示にしておきたいので、「overflow-y: hidden;」も併せて入力しておこう。
  • ここからは、関連記事カードの説明に入る。
    まず関連記事カードには「position: relative;」を指定しておこう。これはのちに疑似要素を使って右端の間隔を作る必要があるため、とても重要だ。
    そして、「margin: 6px 4px;」とすることで上下に6px、左右に8pxの間隔が生まれ、窮屈感が緩和される。
  • 次に、関連記事カードを強制的に関連記事要素からはみ出させる必要があるので、「min-width」で横幅を設定する
    「まだ要素が隠れていますよ。スクロールしてみてね」という意味で両端のどちらかは半分だけ表示したいので、CSS関数の「calc()」を使って関連記事カードの大きさを関連記事要素全体から3.5分の1の幅になるようにし、さらに左右のmarginを合わせた8pxを引いてちょうど半分隠れているように表示する。
    これで、関連記事要素には関連記事カードが3記事半表示されるようになる。
  • また、最後の関連記事カードの右側の間隔を空ける際に不具合が起きることを防ぐため、「overflow: visible;」を設定することを忘れないようにしよう。
  • CSSの性質上、このままでは最後の関連記事カードの右側にはmarginが効いていない。
    これを防ぐため疑似要素を使ってスクロール要素を余分に押し広げることで、右側の間隔を作る必要がある。
    最後のコンテンツを指定する「:last-child」と要素の後ろの疑似要素を表す「::after」を繋げて「:last-child::after」とし、最後の関連記事の疑似要素afterを指定する。
  • そして、疑似要素afterに「content: ”;」で空の文字を入れ、「position: absolute;」で関連記事カードの絶対位置となるように指定する。
    また、「display: block;」も忘れないようにしよう。
  • 次は、疑似要素の位置を決める。
    top: 1px;」で関連記事カードの上辺から1pxだけ下に、「left: 100%;」で疑似要素を関連記事カードの右辺から外側に完全にはみ出させてしまおう。
  • それから、疑似要素の高さと幅を決める。
    高さの面積がないと疑似要素が存在できないので「height: 1px;」としよう。
    そして、関連記事カードの左右にかかっているmarginと同じ長さにするために「width: 4px;」にする。
  • 最後に、念のため疑似要素を透明化しておきたいので「background-color: transparent;」で背景を透明に設定しておこう。
  • ここからはレスポンシブに対応したデザインの解説になる。
    画面サイズが小さくなると少々問題が発生するので、それに対応したCSSコードを入力する必要がある。
  • まずはWebブラウザの特徴として、モバイル表示の場合はスクロールバーのデザインが変わってしまう
    このとき、関連記事カードにスクロールバーが被さって表示されてしまうため「margin-bottom: 12px;」に変更して間隔を再調整する。
  • そして、画面のサイズがミニタブレットやスマホのときは関連記事カードが小さくなってしまうのでその幅を再調整する。
    100%から割る数字を3.5から2.5に変え、2記事半表示されるように変更する。

「スクロール表示にするCSSコードの解説」で説明している複数の現象は、それぞれ個別の記事でも解説しているのでそちらも読んでみてほしい。

少々駆け足で解説したが、関連記事要素をスクロールで表示する原理はこのようになる。

フレックスボックス内のコンテンツの折り返しと配列を無効化し横に並べ、内部のコンテンツの最小幅を決めることで強制的に要素の外まではみ出させる
それをスクロール要素で表示し、最後のコンテンツの右側のmarginは疑似要素で代用する

これをCocoonの関連記事要素と関連記事カードに当てはめただけだ。


ついでに、関連記事カードのデザインのカスタマイズに使用したCSSコードの内容も解説しておく。

関連記事カードのデザインのカスタマイズ(スクロール表示向き)
  • 関連記事がスクロールで表示していることが目立つデザインのカードにしたい。
    そのままの状態では、カードとカードの間の境界などがハッキリしておらずわかりにくいからだ。
  • まずは「border-radius」でカードの角を丸くして、柔らかい印象をもたせる。
    そして「box-shadow」でカードに影を付け、記事から浮き上がっているかのように表そう。
  • そして、デフォルトの状態ではカードにカーソルを合わせた時に背景の色が灰掛かった白に変色するようになっているので、これを「background-color: #fff;」で打ち消しておく。
    それから、影を少しだけ強調させつつ広げることで、選択したカードを浮かべているように表現した。

だいたいこのような説明になる。

スクロール表示にするCSSコードをコピペした際に、パッと見て反映されているかどうかわかるようなデザインにしておいた。そのため、最低限のコードに留めている。

以降は各自のWebサイトに合うデザインにアレンジしてみてほしい。

関連記事カードをカスタマイズする際は、絶対に「.related-entry-card-wrap」に「overflow: hidden;」を設定してはならない

なぜなら、スクロール要素の内部の右側のmarginを「.related-entry-card-wrap」からはみ出した疑似要素で表現しているからだ。

このため、疑似要素が表示されなくなってしまうので右側の間隔が存在しなくなる

このような現象が起きてしまうので、関連記事カードのデザインをどこかでコピペして使用するときは注意しておこう。

以上のことにも注意しながらデザインをカスタマイズしてほしい。

併せて読みたい

横並びにしてスクロール化した要素を動かすとき、少々手間に感じたりしないだろうか?スクロールバーはちょっと細いし左右にマウスをドラッグするのも面倒だ。

そんな悩みを解決する、マウスのホイールでスクロール要素を左右に動かせるJavaScriptコードを紹介しているのでこちらもぜひ読んでみてほしい。

最後に

今回のカスタマイズはこのようにCSSコードを弄るだけになる。

そのため、Cocoon側のアップデートの影響を受ける可能性はまず無い。

しかし、関連記事カードのクラス名が変わってしまう場合もあるので、その際は各自で対応してほしい。


今回は、少し前に思い付きでやってみた関連記事のスクロール化を紹介してみることにした。最近ではいろいろなサイトで見かけることが多くなり、Cocoonでもやれないことはないんじゃないかな?と思ったからだ。

そして、このカスタマイズをやるにあたって、CSSの様々な規則性や特徴に気が付くこともできた。また、最終的な仕上がりも満足がいくものになったと思う。

このカスタマイズが役に立てば嬉しい。