WordPressのCocoonをカスタマイズ|新着記事に左矢印を表示させる方法

新着記事に左スライダーを追加した画面キャプチャ デジタルスキル・ツール活用

WordPressの人気テーマ「Cocoon」には、横並びの新着記事をスライドさせるスライダー機能(右矢印)があります。でも元の記事に戻るための左矢印はデフォルトでは表示されません。
今回は、その新着記事左スライダーの設定方法をわかりやすく解説します。
※この記事にはプロモーションが含まれます。

左矢印を表示したかったわけ

手動スワイプができるスマホまたはタブレットは、この矢印がなくても自由にスライド可能なのですが、PCの場合はいったん右側に移動すると先頭の記事に戻れないのがちょっと不便、と思っていました。

設定方法

1.前提として、新着記事のブロックで「横並び表示」をONにします。

2.カスタマイズの追加CSSで下記のコードを追加します。

/*左方向のスライダー*/
.is-list-horizontal .swiper-button-prev{
display: flex;
}

3.左方向の矢印が表示されました。

これで、両方向へスライドできるようになりました。

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