現在デフォルトスキンとして「Season(Summer)」適用中。

ヘッダー下にお勧め記事カルーセルを表示する方法

テーマ設定
この記事は約1分で読めます。

サイトのヘッダー下にお勧め記事などを表示するカルーセルの表示方法です。

カルーセルとは、メリーゴーランドや回転木馬という意味があります。コンテンツをクルクルと表示する様からそのように名付けられたのだと思います。
スポンサーリンク

カルーセルの表示方法

カルーセルを表示するには、まずテーマ設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「カルーセル」タブから「カレーセル表示」で表示ページを設定し、「表示カテゴリー」を選択します。

カルーセルの設定方法

すると、選択したカテゴリーの中からランダムでカルーセル表示します。

ヘッダー下に以下のように最大10個表示されます。

ヘッダー下のカルーセル表示例

自動回転させる場合

カルーセルを自動で回転させる場合は、設定画面の「オートプレイを実行」を有効にしてください。

オートプレイの実行設定項目

以下のように、表示が自動的に入れ替わります。

カルーセルの自動回転表示例

自動回転させることで「目を引く」という利点もありますが「うるさく感じる」という難点もあります。

テーマ設定
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年9ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:9ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:7ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント

  1. HukuharaY より:

    カルーセル表示は素晴らしいので使用したいのですが、アイキャッチ画像のサイズが縦長と横長で均一サイズではない場合に、縦長サイズに合わせて表示されるため余白が出来てしまいます。画像サイズを均一に制御できれば良いのですが、可能でしょうか?

  2. HukuharaY より:

    仕事がすごく早くて毎回驚いております。でも無理はなさらずに!ありがとうございます。

  3. HukuharaY より:

    書き忘れていました。修正Vr.試しましたがバッチリでした。完璧です。

  4. ゆん より:

    はじめまして。
    コクーンを使わせていただきありがとうございます。

    カルーセルの文字の大きさの変更は出来ないのでしょうか?
    他の文字に対し大き目ですので少し小さく出来たら見栄えが良いなと思いました。

    またスマホから見ますとカルーセルのページ送りのボタンが半分ほど消えています。
    これは仕方ないのでしょうか?
    (あらゆるスマホから見ても半分欠けているようです。)

    お時間がありましたらご回答いただけますと嬉しいです。
    よろしくお願いいたします。

  5. ゆん より:

    何度もすみません。
    たった今スキンを変更してみました。
    スマホのページ送りのボタンは全てうつっておりました。
    (モダンブラックからおでかけピンクに変更いたしました。)

    • わいひら わいひら より:

      はじめまして。

      申しわけないですが、コメント入力欄にも案内があるように、できればフォーラムに書き込んでいただけると助かります。
      というのも、コメントでは機能が貧弱で対応しづらいからです(画像アップロード機能がない等)。
      よろしければ、以下に上記コメントのコピペで良いので、該当部分のキャプチャとあわせて書き込んでいただけると助かります。
      https://wp-cocoon.com/community/cocoon-theme/

  6. ゆん より:

    大変失礼しました。
    今回はテーマを変更しましたらボタンも映りました。
    テーマを変えた事により文字の大きさもあまり気にならなくなりましたので
    今後追加の質問がありましたらフォーラムにさせていただきますね。
    すみませんでした、ありがとうございました。

    • わいひら わいひら より:

      いえいえ、フォーラムで書き込んでいただけた方が、画像で状態もわかりやすいですし、僕より詳しい方もおられたりします。
      もし次回何かありましたら、フォーラムの方にお気軽に書き込んでください。

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