About this Blog & About me(はじめに)

【Cocoon】カルーセルを初心者でも簡単に設置するやり方【CSS不要】

ブログ運営

自動スクロールされるブログカードや画像のことを、「カルーセル」と呼びます。

WordPress・Cocoonなら、CSSのカスタマイズなしで、初心者でも簡単にカルーセルを設定できます。

\まだブログを開設していない方へ/
スポンサーリンク

カルーセルとは?

ブログやWebサイトで最近よく見かける、自動で横スクロールされるブログカード・アイキャッチ・画像等のことを、カルーセルと言います。

当サイトでカルーセルを載せると、以下の画像のようになります(モバイルから見た場合)。

カルーセル見本画像
モバイルから見たカルーセル部分

ちなみに、カルーセルの本来の意味は、メリーゴーランド、回転木馬、などです。

ソラ
ソラ

メリーゴーランドのように動く領域・画像のことだと考えると、なるほど、カルーセルという名前はぴったりだと思いました。

Cocoonでカルーセルを設定する方法

事前準備

Cocoonのカルーセルは、人気記事(自動集計)・カテゴリー・タグ、の三種類から表示内容を選択できます(※2020年7月現在)。
そこで、カルーセルを設定する前に、三つのうちのどれか一つでも設定・整理しておきましょう。

今回は、カルーセルに表示する内容を「カテゴリー」ごとに選ぶ方法で設定していきます。

ソラ
ソラ

カテゴリーは、ダッシュボードの「投稿」→「カテゴリー」から新規作成・編集できます。

カルーセルの設定

ダッシュボードから「Cocoon設定」→「カルーセル」 の順でクリックします。

設定画面の画像
設定画面

 ↓ ↓

「カルーセルの表示」と「表示内容」を選んで、「変更をまとめて保存」をクリックして保存します。

設定画面の画像2
設定画面

設定に必要な操作は、たったこれだけ!
初心者にも簡単に設定できます。

カルーセルを掲載したときの見え方

当サイトにカルーセルを掲載した時の、実際の画像は以下のとおりです。

パソコンから見た時のイメージ
イメージ画像1
PC画面

モバイルから見た時のイメージ
イメージ画像2
モバイル画面

カルーセルのメリット・デメリット

カルーセルのメリット

  • 見た目が華やか
  • ブログ初心者の作ったサイトには見えない
  • 目を引くので、おすすめ記事をアピールしやすい

カルーセルのデメリット

  • サイトが若干重くなる
  • 自動で動くので、良くも悪くも目に入り、うっとうしく感じる時もある

カルーセルの作り方・まとめ

初心者には、ブログ・Webサイト内の各領域や設定のことをなんと呼ぶのかすら分からず、やり方を検索しようにもどう検索して良いか分からないことが多くあります。

ソラ
ソラ

カルーセルも、知らない人から見たら名前すら分からない領域の一つだと思います。

一見難しそうなカルーセルの設定も、Cocoonでは、複雑なCSSのカスタマイズやプラグインは一切不要。
簡単な設定変更だけで設置可能です。

それを知っていれば、メリット・デメリットを理解したうえで、設置するかしないかの選択肢が増えます。

ぜひ皆さんのブログ作成にお役立てください(^^)/

ブログ運営
スポンサーリンク
\シェアしてもらえたら嬉しいです/
ソラのSNSはこちら↓Follow me(^^)/
ソラ

娘と夫と3人暮らし。30代主婦。1児の母。FP2級。古のおたく。呑み助ではないけれど、春夏秋冬ビールはおいしい。

このブログは、主婦の厳選グッズ×オタクの本気のおすすめ作品、その他、子育てのことなど多岐にわたって書く【雑記ブログ】です。

Twitter・note・楽天ROOMなどのフォローもお気軽にどうぞ~!

ソラのSNSはこちら↓Follow me(^^)/
ぐるりのそら

コメント

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