THETHOR(ザ・トール)のカルーセルスライダー設定について詳しく解説!!

 
マーシー
この記事ではTHETHORの「カルーセルスライダー設定」について紹介しているよ!

PC・スマホ画面にどんな風に表示されるの?

 
マーシー
まずは、カルーセルスライダーを設置した時のイメージを見てみよう!
※PC・スマホの参考イメージは「hamablog」内にカルーセルスライダーを設置した時の画像です。

カルーセルスライダーの設定だけを知りたい方は下記のスキップをクリックしてね。カスタマイズ内容を詳しく解説する項目までスキップするよ!

PC画面上の表示はこんな感じ!

PC画面上でのカルーセルスライダーは上部画像のように表示されます!PC画面は大きいので、1画面に5記事ほど見えている状態になります。

操作方法
・ドラッグで左・右に動かす。
・画面上の「<」「>」をクリックして動かす。

スマホ画面上の表示はこんな感じ!

スマホ画面上でのカルーセルスライダーは上部画像のように表示されます!PC画面と比べて画面が小さくなるので、1画面に約3記事が見えている状態になります。

操作方法
・指で左・右に動かす。
 
マーシー
カルーセルスライダーのように初期搭載されている機能はレスポンシブ対応なので安心して使えるよね!

設定画面までの手順を覚えよう!

【ダッシュボード】

【外観】

【カスタマイズ】

【TOPページ設定[THE]】

【カルーセルスライダー設定】

カスタマイズ内容の項目一覧
カルーセルスライダーを表示するか選択
表示条件を選択
指定するIDを入力
表示件数を指定
画像アスペクト比を選択
アイキャッチ上のカテゴリを非表示にする

カルーセルスライダーを表示するか選択

カルーセルスライダーの設定は初期設定では「非表示」になっていますので、使用する場合は、こちらの項目で「表示」に設定しましょう!

選択内容
・非表示 (default)
・表示

表示条件を選択

表示条件を設定することで、自分が表示させたい記事や表示させたいカテゴリなどを細かく指定して表示させることができます!

 
マーシー
記事が少ないうちは「指定した投稿を表示」を選択して、表示させたい記事を選ぶ方法がオススメだよ!

選択内容
・無し (default)
・指定した投稿を表示
・指定した投稿以外を表示
・指定したカテゴリの投稿を表示
・指定したカテゴリ以外の投稿を表示

指定するIDを入力

上記の画面は記事のIDが記載されている場所です。「表示条件」を選択したら条件に沿った記事のIDを入力してみよう!

 
マーシー
記事のIDは4桁の数字で構成されていて、複数入力する場合は覚えれないからメモを取るようにしよう!

ID入力の参考

上記の画像は実際にIDを入力した時の画面になります。この時は、表示条件として「指定した投稿を表示」を選択していて、表示させたい記事のIDだけを入力しました!

 
マーシー
ID入力の注意点は「IDとIDはカンマで区切る」ということです。忘れないように「 , 」で区切るようにしようね!

表示件数を指定

表示件数を指定の項目では「表示させる記事の本数」を指定することができます。指定するIDを入力している場合は、表示件数は「空白」でOKです。

 
マーシー
IDで管理するか、件数で管理するか、用途に合わせて使い分けできるように頑張って覚えよう!

画像アスペクト比を選択

上記の画像はアスペクト比の比較をした参考画像です。3種類の比率から選択できますが、基本的には初期設定の「16:9」でいいと思います!

※上記のアスペクト比「1:1」はアイキャッチ画像を「16:9」で作成していた為、両サイドが自動的にカットされて見切れています。
 
マーシー
それぞれのアスペクト比に対応するには、アイキャッチ画像作成時に対策をしておく必要があるよ!

選択内容
・16:9 (default)
・4:3
・1:1

アイキャッチ上のカテゴリを非表示にする

上記の画像はアイキャッチ画像上の「カテゴリ表示あり・なし」の比較です!思っているよりカテゴリ表示が大きいので、文字が入っている場合などは隠れてしまう可能性があります。

カテゴリ表示を非表示にしたい場合は「アイキャッチ上のカテゴリを非表示にする」にチェックを入れるだけでOKです!

合わせて読みたいアレやコレ!

 
マーシー
THETHORのカルーセルスライダーについて紹介している別の記事も貼っておくので合わせて読んでみてね!
\ 合わせて読みたい!!  /
近日公開予定!!
近日公開予定!!