dinoエディターでは、カルーセルも簡単に設置可能
前回のニュースレターコラムにてご紹介したアルバム機能は、ご活用いただけているでしょうか。dinoで複数画像を表示する方法は、まだまだあります。自動スクロールでダイナミックな見せ方をしたいときにおすすめなのが、カルーセル機能。1枚ずつ横スクロールで見せられるため、省スペースに表示したい場合にも便利です。
今回のニュースレターコラムでは、dinoエディター上でカルーセルを設定する方法と、画像のスクロール速度の変更方法をご紹介します。
カルーセルの設定方法
1.記事制作画面上にある鉛筆アイコンをクリック
![画像1: カルーセルの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/f0f2734e225a4ead69c04e5db8db50e00ed1b04c.jpg)
2.表示された一覧から「カルーセルアイコン」をクリック
![画像2: カルーセルの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/3d27aec0e8d037501646ee4e63285be4fd866633.jpg)
3.「ここをクリックしてカルーセルの内容を編集」をクリックし、編集画面に入る
![画像3: カルーセルの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/85792b7f992f848b5e64608bf3f804aa2be2f6ea.jpg)
4.画像やテキストを入力
![画像4: カルーセルの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/c2d81d4ede062001951a2571c0b57575d356875b.jpg)
カルーセル画像1:朝
カルーセル画像2:夕方
カルーセル画像3:夜
これでカルーセルが設定できます。カルーセルで表示できる画像やテキストは、最大12件となっています。画像にはキャプションも入力できるので、こちらも活用してみてくださいね。
ちなみに、画像をアップロードする際は、画像アイコンをクリックして選択するだけでなく、段落ブロックに直接ドラッグ&ドロップすることでも設定可能です。特にカルーセルで複数の画像を表示させるときは、ドラッグ&ドロップでの設定がおすすめです。
なお、カルーセルの高さは、最も高いブロックに合わせて固定されます。各ブロックが同じ高さになるよう注意が必要です。そんなときに便利なのが、画像の表示領域の比率を指定できる「Cut」と「Contain」。どちらも画像自体の加工ではなく、表示のみを調整する機能となっています。
![画像5: カルーセルの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/dfe4356a199b53fa15519897542f0bb5f3088462.jpg)
「Cut」は、縦または横のはみ出し部分をカットし、「Contain」は、縦または横がぴったりになるように縮小・拡大します。それぞれ同じアスペクト比で表示領域を調節できるので、お好みの仕上がりを選んで設定できますよ。
カルーセルの設定方法は「メディアマネージャー」内にある「オンラインヘルプ」にも記載されていますので、そちらも併せてご参照ください。
ワンポイント:カルーセル機能とアルバム機能の違い
アルバム機能の場合
![画像1: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/bd99b01b99b9db286d3fac321f764b56ba9b0ff8.jpg)
カルーセル機能の場合
![画像2: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/ec522f9929a572c9d1228788f81a57e47e974ca8.jpg)
アルバム機能で「コンテンツを埋め込む」にチェックを入れた場合、カルーセル機能とレイアウトが似ていますよね。何が違うのかというと、カルーセル機能では、自動スクロールを設定できる点が大きく異なります。スクロール速度の調整もできるので、画像に合わせた見せ方が可能となっています。
また、横スクロールするので、複数の画像も省スペースで見せることができます。どのような見せ方をしたいかによって、使い分けてみてくださいね。
カルーセルのスクロール速度を変更して、内容に合わせた見せ方へ
デフォルト(7sec, 3sec - General)の場合
![画像2: カルーセル画像1:朝](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/8ef38e0f16079e49b50fa5076b24e2a0d1bcc3cb.jpg)
カルーセル画像1:朝
![画像2: カルーセル画像2:夕方](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/02d992ff1e3b544550a64af3510229622dba8c8a.jpg)
カルーセル画像2:夕方
![画像2: カルーセル画像3:夜](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/939919a252146b422137ebbfc9496af900fb66a3.jpg)
カルーセル画像3:夜
画像のみの場合は、デフォルトのままでも問題ありません。画像にキャプションが入っていたり、テキストが入っていたりする場合は、デフォルトでは少し速く感じたりすることがあります。
遅め(10sec, 10sec - Slow)の場合
![画像3: カルーセル画像1:朝](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/61c6b0977fb9cb4cc6b71d9bc187724ec551ebab.jpg)
カルーセル画像1:朝
![画像3: カルーセル画像2:夕方](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/6b9728d368093e1358b98d017e83ee337abb829c.jpg)
カルーセル画像2:夕方
![画像3: カルーセル画像3:夜](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/c48fd9e09dafaf9e4cfada4282e8247531a99d7e.jpg)
カルーセル画像3:夜
「Auto Play」のプルダウンから「10sec, 10sec - Slow」を設定すると、スクロール速度が遅くなります。さらに遅い「15sec, 10sec - Very Slow」もあります。画像をじっくりと見てもらいたい場合や、テキストが入っている場合におすすめです。ただ、ユーザーが長時間とどまるとは限りません。画像やテキストを見逃される可能性もあるため、注意が必要です。
速め(2sec, 2sec - Frequently)の場合
![画像3: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/1c3fe1b6b393358a0f694e75e7476ceb67cbe682.jpg)
![画像4: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/c160a4abf07a5994865a036f13054744fcd363ee.jpg)
![画像5: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/08/29/19ca228efaaa8f2aa6b49ff318e2139d776b0676.jpg)
「Auto Play」のプルダウンから「2sec, 2sec - Frequently」を設定すると、スクロール速度が速くなります。さらに速い「1s, 250ms - Animate」もあります。コマ送りのアニメーションのようにサクサク見せたい場合におすすめです。文字を読むことは難しくなりますので、画像のみのときに活用したい速度です。
ちなみに、スクロールのエフェクトを変更することも可能です。回転させたり、フリップをめくるようなエフェクトにすることもできるので、ぜひいろいろ試してみてください。
カルーセルは、アルバムとはまた違った見せ方ができる機能です。用途に応じて、使い分けてみてくださいね。
画像に関する機能のまとめ
アルバム
![画像: ※実際のアルバムではなく、スクリーンショットです](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2024/02/15/1c1b2aa9f2334913ac03226eae966c7cd2afb02c.jpg)
※実際のアルバムではなく、スクリーンショットです
アルバム機能は、大量の画像を表示したいときに便利です。最大72枚までアップロード可能です。詳しくはニュースレターコラム第4回をご覧ください。
カルーセル
![画像6: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2024/02/15/36b9113fe138fa2fe6cba66e1559a2462dab9f50.jpg)
![画像7: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2024/02/15/b1b75ca823f74478e77329d514b64714e278024a.jpg)
![画像8: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2024/02/15/23b0a030f926a2b8e0ecdfa89555d88a3cac8047.jpg)
カルーセル機能は、複数の画像やテキストを、自動スクロールでダイナミックに見せることができます。最大12件まで表示可能です。この記事で紹介しています。
装飾ボックス
![画像9: 複数の画像をダイナミックに見せる! カルーセル機能の活用方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2024/02/15/4bc2ea445658f1c69f605baf8bec7a94ced41bb9.jpg)
装飾ボックス機能は、背景色や枠線をつけることでより強調させた見せ方ができます。1〜2枚の画像を使用する際におすすめです。詳しくはニュースレターコラム第6回をご覧ください。