横にスライドする記事一覧の作り方!

wordpress

はい、どうもこんにちは、二浪ニッコマンことナッキーです。
今回はワードプレスをやるときに
ネックになったことについて
解説記事を書いていこうと思います。

それはですね…よくブログを拝見してると

赤線で囲まれたところのような
横にスライドする記事一覧ありますよね。
これのやり方がわかんなくて
めっちゃ調べてた時期がありました笑

なので、今回は横にスライドする記事一覧の
作り方の解説記事を書こうと思います!

横スクロールできる記事一覧の作り方

まず、覚えて欲しいのは
こういう横スクロールする記事一覧を
カルーセル言います。

この用語がわかれば
『カルーセルの作り方』
で調べてもGoogleで
でるとは思うのですが
それがわからないと
『横にスライドする記事一覧の作り方』
で調べても求めていた記事には
ヒットしませんでした。

なので今回はそのカルーセルの作り方を
解説させてもらいます!
その前に、あくまで前提として
COCOONをダウンロードしてること
必要です!

もし、まだだよ!ってひとが
いましたら
すでにそのダウンロード方法
書いた記事があるので
参照していただけると幸いです↓

今回は難しいCSSの知識はなくても
できるので簡単だと思います!
CSSでもできないことはないのですが
いろいろと知識がいる上
サイズを合わせたりスクロール仕様にするのは
大変なのでこのやり方を教えます。

①まずワードプレスの管理画面から
COCOON設定を開く

②COCOON設定の項目から
カルーセルを選ぶ

③下にスクロールして各種設定をする

■各種設定の手順
1.カルーセルの表示投稿固定ページ以外

2.表示内容から表示したい記事のカテゴリを選ぶ
↑事前に記事をカテゴリ分けしておきましょう。

3.最大表示数を設定する

4.枠線を表示させる

5.オートプレイにチェックする
↑ここでいうオートプレイ
自動的に記事が
横に流れることを言います。

6.オートプレイインターバルを設定する
↑ここに関しては
自動で記事が横に流れるまでの時間
を設定することができます。
早すぎると読者は気が散るし
遅すぎても他の記事に目がいきません。
なのでおすすめは7秒〜9秒ぐらいです

ざっとこんな感じです。
いかがだったでしょうか。
COCOON設定でやれば
こんなにも簡単にスライド記事一覧を
作ることができます。
みなさんのお役に立てれば幸いです。

以上、ナッキーでした。

FOLLOW ME

コメント

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