複数の画像をダイナミックに見せる！ カルーセル機能の活用方法

dinoエディターでは、カルーセルも簡単に設置可能

前回のニュースレターコラムにてご紹介したアルバム機能は、ご活用いただけているでしょうか。dinoで複数画像を表示する方法は、まだまだあります。自動スクロールでダイナミックな見せ方をしたいときにおすすめなのが、カルーセル機能。1枚ずつ横スクロールで見せられるため、省スペースに表示したい場合にも便利です。

今回のニュースレターコラムでは、dinoエディター上でカルーセルを設定する方法と、画像のスクロール速度の変更方法をご紹介します。

カルーセルの設定方法

1.記事制作画面上にある鉛筆アイコンをクリック

2.表示された一覧から「カルーセルアイコン」をクリック

3.「ここをクリックしてカルーセルの内容を編集」をクリックし、編集画面に入る

4.画像やテキストを入力

これでカルーセルが設定できます。カルーセルで表示できる画像やテキストは、最大12件となっています。画像にはキャプションも入力できるので、こちらも活用してみてくださいね。

ちなみに、画像をアップロードする際は、画像アイコンをクリックして選択するだけでなく、段落ブロックに直接ドラッグ＆ドロップすることでも設定可能です。特にカルーセルで複数の画像を表示させるときは、ドラッグ＆ドロップでの設定がおすすめです。

なお、カルーセルの高さは、最も高いブロックに合わせて固定されます。各ブロックが同じ高さになるよう注意が必要です。そんなときに便利なのが、画像の表示領域の比率を指定できる「Cut」と「Contain」。どちらも画像自体の加工ではなく、表示のみを調整する機能となっています。

「Cut」は、縦または横のはみ出し部分をカットし、「Contain」は、縦または横がぴったりになるように縮小・拡大します。それぞれ同じアスペクト比で表示領域を調節できるので、お好みの仕上がりを選んで設定できますよ。

カルーセルの設定方法は「メディアマネージャー」内にある「オンラインヘルプ」にも記載されていますので、そちらも併せてご参照ください。

ワンポイント：カルーセル機能とアルバム機能の違い

アルバム機能の場合

カルーセル機能の場合

アルバム機能で「コンテンツを埋め込む」にチェックを入れた場合、カルーセル機能とレイアウトが似ていますよね。何が違うのかというと、カルーセル機能では、自動スクロールを設定できる点が大きく異なります。スクロール速度の調整もできるので、画像に合わせた見せ方が可能となっています。

また、横スクロールするので、複数の画像も省スペースで見せることができます。どのような見せ方をしたいかによって、使い分けてみてくださいね。

カルーセルのスクロール速度を変更して、内容に合わせた見せ方へ

デフォルト（7sec, 3sec - General）の場合

画像のみの場合は、デフォルトのままでも問題ありません。画像にキャプションが入っていたり、テキストが入っていたりする場合は、デフォルトでは少し速く感じたりすることがあります。

遅め（10sec, 10sec - Slow）の場合

「Auto Play」のプルダウンから「10sec, 10sec - Slow」を設定すると、スクロール速度が遅くなります。さらに遅い「15sec, 10sec - Very Slow」もあります。画像をじっくりと見てもらいたい場合や、テキストが入っている場合におすすめです。ただ、ユーザーが長時間とどまるとは限りません。画像やテキストを見逃される可能性もあるため、注意が必要です。

速め（2sec, 2sec - Frequently）の場合

「Auto Play」のプルダウンから「2sec, 2sec - Frequently」を設定すると、スクロール速度が速くなります。さらに速い「1s, 250ms - Animate」もあります。コマ送りのアニメーションのようにサクサク見せたい場合におすすめです。文字を読むことは難しくなりますので、画像のみのときに活用したい速度です。

ちなみに、スクロールのエフェクトを変更することも可能です。回転させたり、フリップをめくるようなエフェクトにすることもできるので、ぜひいろいろ試してみてください。

カルーセルは、アルバムとはまた違った見せ方ができる機能です。用途に応じて、使い分けてみてくださいね。

画像に関する機能のまとめ

アルバム

アルバム機能は、大量の画像を表示したいときに便利です。最大72枚までアップロード可能です。詳しくはニュースレターコラム第4回をご覧ください。

カルーセル

カルーセル機能は、複数の画像やテキストを、自動スクロールでダイナミックに見せることができます。最大12件まで表示可能です。この記事で紹介しています。

装飾ボックス

装飾ボックス機能は、背景色や枠線をつけることでより強調させた見せ方ができます。1〜2枚の画像を使用する際におすすめです。詳しくはニュースレターコラム第6回をご覧ください。

ニュースレターコラム・おすすめ記事

アルバム機能で簡単！ 大量の画像を効果的に見せる方法 - 株式会社リボルバー（Revolver,Inc.）

大量の画像を表示したいときに便利なアルバム機能。dinoエディターでは、アルバムのレイアウトも簡単に調整できます。また、アルバムを記事ページの上部や下部にロック（固定）することも可能です。ニュースレターコラム第4回では、dinoエディター上で「アルバム」を設定する方法と、レイアウトの調整方法をご紹介します。

revolver.co.jp

画像をさらに目立たせる！ 装飾ボックス機能の豊富なカスタマイズ例をご紹介 - 株式会社リボルバー（Revolver,Inc.）

背景色や枠線をつけることで、画像や文章をより強調することができる「装飾ボックス」。用途に応じてさまざまなカスタマイズが可能です。 ニュースレターコラム第6回では、dinoエディター上で装飾ボックスを設定する方法と、装飾のカスタマイズ方法をご紹介します。

revolver.co.jp