icon-check icon-sns-facebook icon-sns-twitter icon-sns-instagram icon-sns-line icon-sns-pinterest arrow icon__mail

Clipkit® Support

Clipkitに関する情報・よくあるご質問は
こちらでご確認いただけます。

基本設定

2022.11.17公開
2024.02.22更新

スライダーはどうやって設定するの?【コレクション機能を使って設定する場合】

Clipkitではスライダー(カルーセル)を管理画面から簡単に設定することができます。この記事では、コレクション機能を使ってスライダーを設定する方法を紹介します。

スライダーとは?

TOPページに大きく表示されるスライドーショーのことを指します。
この記事ではスライダーと表記していますが、カルーセルとも呼ばれます。
スライダー(カルーセル)の動作イメージはサンプル動画を参照ください。

スライダーの表示デザインは、使用しているテーマによって異なります。
(サンプルの動画は、独自にカスタマイズしたデザインテンプレートです。)

また、スライダーの設定方法はいくつかありますが、今回紹介するコレクション機能を使ったスライダーの設定は、下記のテーマをご利用のお客様のみ適応されます。

・Middle
・Text
・Visual

ご利用中のテーマがコレクション機能を使ったスライダーの設定に対応しているか判断できない場合は、お問い合わせくださいませ。
■Clipkitサポートチーム
support-clipkit@vectorinc.co.jp

スライダーを設置するメリット

・ユーザーに必ず読んでほしい記事や、トレンドのトピックスを目立つように設置することができます。

スライダーの設定方法

それでは早速、コレクション機能を使ってスライダーを設定してみましょう。

コレクション画面の設定手順

Clipkitの管理画面から「サイト管理」→「コレクション」を選択します。

コレクションの操作画面が表示されたら、右上の追加を選択します。

例に習って値を入力してください。

名称:トップページ - スライド
Name(半角英数字):top-slide
テーマ:プルダウンから現在使用しているテーマを選択

上記値の入力が完了したら保存します。
コレクションの操作画面に先ほど設定したスライダーの項目が生成されました。
「トップページ - スライド」を選択し、設定に進みましょう。

項目の「+追加」を選択するとプルダウンが表示されるので「記事」を選択します。

「記事を選択」というボタンが表示されるので、選択します。

今までに作成した記事が出てくるので、スライダーに設定したい記事を選択します。

サムネイルとタイトルがプレビューされますので、問題なければ保存しましょう。

上記の手順で設定した記事がトップページ - スライドに設定されました。
作業はこれで完了です。

設定したスライダーをTOPページで確認しましょう。

設定がサイトに反映されていない場合は、キャッシュが関係しています。
下記の手順でキャッシュを削除した上で確認してください。

その他のスライダー実装例

この記事ではコレクション機能を使ったスライダーの設定方法をご紹介しましたが、
・テーマが対応していない
・スライダーの表示をカスタマイズしたい
このような場合は独自にClipkitを改修することで実装が可能です。

参考の実装例をご紹介しますので、ご希望のお客様はClipkitサポートチームへお問い合わせくださいませ。
■Clipkitサポートチーム
support-clipkit@vectorinc.co.jp

実装例①新着記事をスライダーに表示したい

新着記事を公開した際に、自動で最大5つまでスライダーに表示することが可能です。
カスタマイズが必要であれば、特定のカテゴリの新着記事のみに制限して自動表示する等、ご要望に沿って自由に調整も可能ですので、検討されている仕様をClipkitサポートチームにご相談ください。

実装例②画像や動画を表示したい

記事ではなく、HTML要素を使って画像や動画等を表示することも可能です。
特定の要素を設定可能ですので、検討されている仕様をClipkitサポートチームにご相談ください。