【簡単】THE THOR(ザ・トール)でカルーセルスライダーの設定方法

【簡単】THE THOR(ザ・トール)でカルーセルスライダーの設定方法
悩んでいる人
THE THORでカルーセルスライダーを設定したい
THE THORでカルーセルスライダーを設定したけど表示されない

 

こんな悩みを解決します。

 

けいみー
こんにちは!けいみーです。この記事は5分で読めます!
✔ 記事の内容
  • THE THORのカルーセルスライダーとは
  • THE THORのカルーセルスライダーの設定方法
  • THE THORのカルーセルスライダーが表示されない対処法
  • THE THORでカルーセルスライダーを設定する時の注意点

 

✔ 記事の信頼性

Keimii Blog

 けいみー(@keimii41

僕は2020年2月から副業でブログを始めて、5ヶ月目に月間17,000PV、収益は月2.5万円ほど。

今回は、THE THOR(ザ・トール)でカルーセルスライダーを設定する方法と、うまく表示されない時の対処法についてご紹介します。

 

本記事を読むことで、THE THOR(ザ・トール)でカルーセルスライダーを設定することができ、おしゃれなブログのトップページを作ることができるので、ぜひ最後までご覧ください。

 

\  僕が最短で収益化できたテーマ /
当サイトで愛用中

 

 

THE THORのカルーセルスライダーとは?

THE THORのカルーセルスライダーとは?

 

THE THOR(ザ・トール)のカルーセルスライダーとは、TOPページのこの部分です。

 

カルーセルスライダーは記事が自動で横にスライドするため、動くおしゃれなサイトにできます。

 

THE THORのカルーセルスライダーとは?

 

メインビジュアルの下に設定できるので、読んでほしい記事だけをピックアップして設定することも可能です。

 

他のテーマで設定すると少し面倒ですが、THE THOR(ザ・トール)であれば簡単なボタンだけでカルーセルスライダーを設定できちゃいます。

 

THE THOR(ザ・トール)でカルーセルスライダーを設置するだけで、プロ感が一気に高まりますよ。

 

✔ カルーセルスライダーの設定手順

  1. 外観→カスタマイズ
  2. TOPページ設定
  3. カルーセルスライダー
  4. 非表示→表示するに切り替え

これでOKです。

 

それでは、個別に設定していきましょう。

 

THE THORのカルーセルスライダーの設定方法

THE THORのカルーセルスライダーの設定方法

 

THE THOR(ザ・トール)のカルーセルスライダーの設定方法をご紹介します。

 

カルーセルスライダーの詳細設定は4つあります。

 

✔ 詳細設定

  1. 画像の比率を決める
  2. 記事を指定する
  3. 表示件数を指定する
  4. 表示条件を絞る

 

それでは、個別に設定していきましょう。

 

THE THORのカルーセルスライダー設定①:画像の比率を決める

 

THE THORのカルーセルスライダー設定①:画像の比率を決めましょう。

 

カルーセルスライダーの画像は全部で3種類あります。

  • 16:9
  • 4:3
  • 1:1

 

自分のブログのアイキャッチ画像のタテヨコ比率に合わせてカルーセルスライダーを設定しましょう。

 

✔ 16:9

THE THORのカルーセルスライダーの設定方法

 

✔ 4:3

THE THORのカルーセルスライダーの設定方法

 

✔ 1:1

THE THORのカルーセルスライダーの設定方法

けいみー
参考までに、当ブログは「16:9」で設定しています。

 

THE THORのカルーセルスライダーで画像比率を変える手順はこちら。

  1. 外観→カスタマイズ
  2. TOPページ設定
  3. カルーセルスライダー設定
  4. 画像アスペクト比を選択

 

THE THORのカルーセルスライダーの設定方法

 

デフォルトで「16:9」が設定されているので、もし変えたければ「画像アスペクト比」で選ぶことができますよ。

 

THE THORのカルーセルスライダー設定②:記事を指定する

 

THE THORのカルーセルスライダー設定②:記事を指定しましょう。

 

THE THORのカルーセルスライダーは、デフォルトだとランダムで記事が表示されます。

 

とはいえ、読んでほしい記事だけを指定することができるため、その手順を解説します。

 

✔ カルーセルスライダーで記事を指定する手順

  • 記事のIDを確認する
  • カルーセルスライダーを表示
  • IDを入力する

 

記事のIDは、サイドバーの「投稿一覧」から確認できます。

 

THE THORのカルーセルスライダー設定

 

「指定するIDを入力する」に、先程のIDを入力しましょう。

 

IDとIDの間に「カンマ( , )」を入れることで、複数の記事を指定することができます。

 

THE THORのカルーセルスライダーの設定方法

 

THE THORのカルーセルスライダーは、メインビジュアルのすぐ下に設置されるため、あなたが特に読んでほしい記事を指定するのがベストです。

 

THE THORのカルーセルスライダー設定③:表示件数を指定する

 

THE THORのカルーセルスライダー設定③:表示件数を指定しましょう。

 

カルーセルスライダーのスライドを、5~10記事(※)まで指定することができます。

 

けいみー
※ただし、1度に画面上に表示されるのは5記事のみなので注意。

 

✔ カルーセルスライダーで表示件数を指定する手順

  • カルーセルスライダーを表示
  • 表示件数を指定

 

THE THORのカルーセルスライダーの設定方法

 

こんな感じで簡単に設定できるので、表示させたい記事数を入力すればOKです。

 

とはいえ、カルーセルスライダーをじっくり見る人はあまりいないので、5記事くらいがちょうど良いかなと思います。

 

THE THORのカルーセルスライダー設定④:表示条件を絞る

 

THE THORのカルーセルスライダー設定④:表示条件を絞りましょう

 

表示条件とはこんな感じ。

  • 無し
  • 指定した投稿を表示
  • 指定した投稿以外を表示
  • 指定したカテゴリを表示
  • 指定したカテゴリ以外を表示

 

THE THORのカルーセルスライダー設定④:表示条件を絞る

 

デフォルトでは「無し」になっていて、ぶっちゃけそんなに使わないかなと思う機能です。

 

例えば、表示させたくない記事が少しあって、それ以外は全て表示させたいという場合には、「指定した記事以外を表示」が使えますね。

 

個人的には、そこまで必要ないかなと思う部分です。

 

THE THORのカルーセルスライダーが表示されないときの対処法

THE THORのカルーセルスライダーが表示されないときの対処法

 

THE THORのカルーセルスライダー表示されないときの対処法を解説します。

 

正しく設定をしたのにも関わらず、うまく表示されないといった現象が起こるようです。

 

けいみー
実は、僕も最初の設定をした時に表示されなかったんです。

 

THE THORのカルーセルスライダーが表示されないのは、相性の悪いプラグインが影響を与えるようです。

 

✔ THE THORと相性の悪いプラグイン

  • TinyMCE Advansed
  • JetPack
  • SiteGuard WP Plugin

 

これらはTHE THORには必要のないプラグインなので、もし入っている場合は使用を停止しましょう。

 

また、こちらのプラグインが悪さをする場合もあります。

syortcodes  ultimate

 

もしこのプラグインを入れていて、カルーセルスライダーが表示されない場合は1度停止してみてください。

 

とはいえ、先ほども言いましたが、カルーセルスライダーはサイトの表示速度を遅くしてしまう原因にもなるので、無理して設定する必要はないかなと思います。

 

THE THORのカルーセルスライダーを設定する時の注意点

THE THORのカルーセルスライダーを設定する時の注意点

 

THE THOR(ザ・トール)でカルーセルスライダーを設定する時に、注意点があります。

 

それは、「サイトスピードが遅くなる可能性がある」ことです。

 

けいみー
僕はこれが原因でカルーセルスライダーをやめました。

 

TOPページでスライドショーのような動きが出る分、表示速度はどうしても遅くなります。

 

サイトスピードはSEOに影響すると言われており、遅いと検索順位で上位に行けない可能性もあるんですよね。

 

とはいえ、カルーセルスライダーはカッコ良いサイトができるので、設定前と後でサイトスピートを比べてみて、影響がなければ設定してもOKです。

 

カルーセルスライダーに限らず、容量の大きい画像や動画もサイトスピードを遅らせる原因になるため、設定する際は注意しましょう。

THE THORのカルーセルスライダーの設定方法:まとめ

THE THORのカルーセルスライダーの設定方法:まとめ

 

THE THOR(ザ・トール)でカルーセルスライダーの設定方法について解説しました。

 

おさらいします。

 

✔ カルーセルスライダーの基本設定

  1. 外観→カスタマイズ
  2. TOPページ設定
  3. カルーセルスライダー
  4. 非表示→表示するに切り替え

 

✔ カルーセルスライダーの詳細設定

  1. 画像の比率を決める
  2. 記事を指定する
  3. 表示件数を指定する
  4. 表示条件を絞る

 

簡単ですよね。

 

カルーセルスライダーは、おしゃれでプロ感を演出できる設定です。

 

THE THOR(ザ・トール)であれば、簡単に設定できちゃうのでめちゃくちゃ便利なんですよね。

 

けいみー
もし、設定してサイトスピードが極端に遅くなる場合は、SEO評価が悪くなるのでやめましょう。

 

THE THOR(ザ・トール)で簡単にできるので、まずは試してみてくださいね。

 

\  僕が最短で収益化できたテーマ /
当サイトで愛用中

 

 

最後までご覧いただきありがとうございました。

 

【簡単】THE THOR(ザ・トール)でカルーセルスライダーの設定方法
最新情報をチェックしよう!