【Cocoon】カルーセルが表示されない時に今すぐ確認すべき箇所

カルーセル見直し
こよカツ(哀)
こよカツ(哀)

カルーセルが表示されない?!

ブログのトップページにあるとグっとオシャレ感が際立つカルーセル。

自分も表示させたい!と思い設定したところ何をやっても見えてこない・・・
Cocoonでの設定はめちゃくちゃ簡単なのになぜ・・・?

設定自体はボタン一つだぜ

こよカツ裏の顔
こよカツ裏の顔

Cocoonでカルーセルの表示設定を行っても見えない!という方のために、私が解決出来た方法をご紹介させて頂きます!

※現在はSWELL導入済み。

ブログ関連では、googleアドセンスに合格した際に見直した箇所をまとめているものがあるので合わせてどうぞ!

あわせて読みたい
【ご利用要件対策】Googleアドセンス合格へ!落ちた時に見直した箇所 先日Googleアドセンスに合格しました! 1度申請した際は残念ながら落ちてしまったのですが、色々調べて修正した後に再申請。2回目で合格出来ました。 今回は私がGoogle...
この記事を読んで分かる事
  • カルーセルが表示されない時に見直すべき箇所
  • カル―セルの設定方法
もくじ

Cocoonでカルーセルの画像が表示されない原因はプラグインだった?

解決
こよカツ(哀)
こよカツ(哀)

調べても答えにたどり着けない・・・

結論から言うとカルーセルが表示されない原因は「Autoptimize」というプラグインの設定でした。

AutoptimizeはWordPressのソースコードを圧縮してサイトを高速化するプラグインです。
カルーセルが表示された際に見直した箇所は Autoptimize内にあるJavaScriptの設定です。

実際に再設定した箇所を確認していくぜ

こよカツ
こよカツ

Autoptimizeの設定を見直す

こよカツ(哀)
こよカツ(哀)

直したのはココ!

①まずはAutoptimizeの設定画面へ遷移しましょう。
WordPress管理画面にある左側メニューの「設定」→「Autoptimize」で表示可能です。

カルーセル1

②「JS、CSS & HTML」タブから「JavaScriptオプション」の「JS ファイルを連結」のチェックを外します

カルーセル2

③設定を保存しましょう。
設定画面最下部にある「変更の保存とキャッシュの削除」を押します。

カルーセル3

私の場合はこの変更でカルーセルが表示されるようになりました。
どうやらJavaScriptを連結していたのが原因だった模様・・・

こんなん気付けるか!!

叩きつけ

めでたくカルーセルが表示され、ブログのトップページがオシャレになりました!

こよカツ(哀)
こよカツ(哀)

満足!

それでもカルーセルが表示されない場合の対処法は?

カルーセルが表示されない原因の多くは、プラグインを導入している事による処理の競合です。

かなり手間ではありますが、導入しているプラグインを1つずつ無効化して確かめてみて下さい。
どのプラグインを無効化したらカルーセルが表示されるかを見つけましょう。

何かのプラグインを無効化した際にカルーセルが表示されたらそのプラグインが犯人です。

かなり手間だがこればっかりは仕方ないぜ

こよカツ
こよカツ

Cocoonで使えるカルーセルの機能と設定方法

スライド
こよカツ(哀)
こよカツ(哀)

そもそもカルーセルって?

カルーセルとは何ぞや?という方のために機能や見た目、設定方法をご紹介します。

設定する事でブログが「それっぽい」見た目になります!
ブログ初心者の私からするとかなりテンションが上がる機能でした!

簡単におしゃれなトップページが作れるぜ

こよカツ
こよカツ

そもそもカルーセルってどんな機能?

私のブログで設定した際の見た目はこんな感じです。

ブログカルーセル1

赤枠で囲われた部分がカルーセル。
どこかで見た事ありますよね?

一定時間が経過するとシュンッ!と横にスライドして記事が次々と入れ替わっていくあの場所です。
ビジュアル的にもインパクトがあるのでめっちゃかっこいい!と感動して設定しました。

こよカツ(哀)
こよカツ(哀)

動くブログって素敵

Cocoonでのカルーセル設定方法

私が利用しているブログテーマ「Cocoon」でのカルーセル設定方法についてご説明します。

設定自体はめちゃくちゃ簡単だ

こよカツ
こよカツ

①Cocoonの設定画面から「カルーセル」タブを選択しましょう。

ブログカルーセル2

②表示されている項目から設定内容を入力・選択します。
こちらが設定画面。

ブログカルーセル3

個々に設定内容を見ていきましょう。

カルーセルの表示

ブログカルーセル4

カルーセルを表示する・しない、どこに表示するかを選択する項目です。
おすすめは投稿・固定ページ以外で表示。(私もこの設定にしています)
お好みでどうぞ!

表示内容

ブログカルーセル5

表示する内容を選びます。

※選択しなかった場合は表示設定をしていてもカルーセルには何も出てきません。

人気記事にはチェックを入れておいた方が個人的には良いかと。
カテゴリーやタグ単位で表示する・しないを選択可能です。

カルーセルの並び替え

ブログカルーセル6

表示するカルーセルの順序をある程度決める事が出来ます。
私は適度にバラけて欲しいと思ったのでランダムに設定しました。

最大表示数

ブログカルーセル7

ここはそのまんまですね。
カルーセルに表示させる記事の最大数を決めます。
最小・最大値が決まっているのでその範囲内で設定しましょう。

私はとりあえず真ん中ぐらいの50に設定しました。

枠線の表示

ブログカルーセル8

表示させたカルーセルの中にあるそれぞれの記事に罫線を表示するかの設定。
これはあった方が見やすくなるのでチェックしておいた方が良いです。

オートプレイ / オートインターバル

ブログカルーセル9

オートプレイを有効にすると表示されているカルーセルが自動的にページ送りされます。
要するにオシャレなシュンッ!が出来るという訳ですね。

こよカツ(哀)
こよカツ(哀)

これは有効化一択!

オートプレイインターバルはオートプレイを有効化している場合に適用されます。
オシャレなシュンッ!が発動する間隔を秒単位で設定可能。

あまり早すぎても良くないので私は5秒を指定しました。

設定内容はこれで全てです。
完了したら保存しましょう!

Cocoonでカルーセルが表示されない時に確認すべき箇所まとめ

OK
こよカツ(哀)
こよカツ(哀)

動きがあるトップページを簡単に!

カルーセルが表示されない時に見直す箇所まとめ
  • プラグイン「Autoptimize」の設定を見直す
  • それでも表示されない場合はプラグインを1つずつ無効化して確認する

今回はCocoonでカル―セルがうまく表示されない際の解決方法の1つをご紹介させて頂きました。

カルーセルの設定をすると動きがあるトップページになります!
皆さんも設定してオシャレなシュンッ!を体験してみるのはいかがでしょう。

ビジュアルを意識するのも大事だぜ

こよカツ裏の顔
こよカツ裏の顔

以下の記事ではよく使う・すぐに使える便利なショートカットキーをご紹介しています。
爆速フォルダ作成方法も覚える事が出来るのでパソコンでの作業を効率化したい方は是非チェックしてみて下さい!

あわせて読みたい
【画像で確認】Windowsで使える便利なショートカットキー一覧 パソコンが必須となった世の中。便利なショートカットキーを覚えておけばより効率的な作業が可能ですよね! 今すぐ使える・良く使う便利なショートカットキー(Windows)...

ブログ関連ではアドセンス合格までにやった事を以下の記事から確認出来ます!

あわせて読みたい
【ご利用要件対策】Googleアドセンス合格へ!落ちた時に見直した箇所 先日Googleアドセンスに合格しました! 1度申請した際は残念ながら落ちてしまったのですが、色々調べて修正した後に再申請。2回目で合格出来ました。 今回は私がGoogle...

以上、カルーセルが表示されない時に今すぐ確認すべき箇所でした!

こよカツ(哀)
こよカツ(哀)

それでは~

カルーセル見直し

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

もくじ
閉じる