サイト全体に「モダンブラック 」スキン適用中。

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

テーマ設定

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

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

カルーセルの表示方法

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

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

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

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

カルーセルの設定方法

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

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

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

自動回転させる場合

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

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

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

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

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

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

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

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

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

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

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

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

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

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

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

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

Cocoon

コメント

  1. HukuharaY より:

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

  2. HukuharaY より:

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

  3. HukuharaY より:

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

  4. ゆん より:

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

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

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

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

  5. ゆん より:

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

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

      はじめまして。

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

  6. ゆん より:

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

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

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

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