dinoエディターでは、装飾ボックスも簡単に設定可能
dinoエディターで画像を表示する方法として、ニュースレターコラム第4回では「アルバム機能」を、ニュースレターコラム第5回では「カルーセル機能」をご紹介しました。最後にご紹介したいのが、背景色や枠線をつけられる「装飾ボックス機能」です。さまざまなカスタマイズができるので、一味違った見せ方ができますよ。
今回のニュースレターコラムでは、dinoエディター上で装飾ボックスを設定する方法と、装飾のカスタマイズ方法をご紹介します。
装飾ボックスの設定方法
1.記事制作画面上にある鉛筆アイコンをクリック
![画像1: 装飾ボックスの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/06/fb7ad232ac2642f901f3a1a47e1dd53b701f1615.jpg)
2.表示された一覧から「装飾ボックスアイコン」をクリック
![画像2: 装飾ボックスの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/06/69b4898b45ffb18bb56b11901b2e94d049a4f18a.jpg)
3.装飾ボックスのカスタマイズ内容を設定する
![画像3: 装飾ボックスの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/91e271f5075f8d2693585ae46b843b2e21634f21.jpg)
![画像: 今回は「背景色:グレー」のみ設定します](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/ed3d152a9f5f3a0ffc7de13823794bcfd7aa82b6.jpg)
今回は「背景色:グレー」のみ設定します
4.「クリックして内容を編集」をクリックし、編集画面に入る
![画像4: 装飾ボックスの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/4b6a010ed80cc39889452a44a139f4c7b236d027.jpg)
5.画像やテキストを入力
![画像5: 装飾ボックスの設定方法](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/06/7805737015e24770d75845def6ab0646739fba4f.jpg)
![画像: ※背景色をグレーに設定しています](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/06/22e480dd06fe9d01cd68d50192623e9d49b4f6f5.jpg)
※背景色をグレーに設定しています
これで装飾ボックスが設定できます。装飾ボックス内の画像にもキャプションを入力できるので、こちらも活用してみてくださいね。
なお、RSS連携によりSmartNewsなどの外部メディアへ配信すると、配信先では装飾・レイアウトは反映されません。「コンテンツ外部配信」をご契約いただいている場合は、ご注意ください。
※「コンテンツ外部配信」のご契約の有無にかかわらず、dinoのメディア上では反映されますのでご安心ください。
装飾ボックスの設定方法は「メディアマネージャー」内にある「オンラインヘルプ」にも記載されていますので、そちらも併せてご参照ください。
装飾ボックスでできる、さまざまなカスタマイズ
タイプ:2カラム
![画像1: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/78d9c8dfe024db3641e5e88b1d2e13450e2a100e.jpg)
![画像2: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/cdff40bd4020b09999a48c9bb1eca2959adc69b1.jpg)
「タイプ」のプルダウンから「2カラム」を設定すると、画像やテキストを左右均等に横並びで表示できます。画像を2枚並べられるため、見比べてもらいたいときにも便利です。
スマートフォンの画面でもPCと同様に横並びに表示されますが、画面が小さいため使用する画像のサイズによっては見えづらくなる場合もあります。2カラムを設定する際は、プレビューで見え方やバランスを確認してみてくださいね。
タイプ:吹き出し
![画像3: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/31f88a8e752b48e596271283f195fa769b91ed6e.jpg)
吹き出しでは、このようにコメントしているような見せ方ができます!
![画像4: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/08/089dee0d164e3d2d92faa2f94cca091b6b66fefc.jpg)
「左右入れ替え」にチェックを入れて、会話風に見せることもできますよ。
「タイプ」のプルダウンから「吹き出し」を設定すると、コメントのように見せることができます。左カラムにアバター画像、右カラムにテキストを入力することで、右に入力したテキストが吹き出しになる機能です。スマートフォンでは上下配置に変わります。
※RSS連携により外部メディアへ配信する場合、吹き出しの左カラムは省略されます。
背景色
![画像: 背景色:シアン](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/06/22e480dd06fe9d01cd68d50192623e9d49b4f6f5.jpg)
背景色:シアン
背景色は、全部で11色設定可能です。本記事では説明用にさまざまな色を使っていますが、実際に使用する際は色を統一するとシンプルにまとまりますよ。
枠線
![画像: 枠線:破線](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/03fca9e9346e0b5dd03b18bd4e0d9422bb5d7021.jpg)
枠線:破線
枠線は、実線と破線の2種類があります。プロフィールなどに使用するのもおすすめです。
応用編
カスタマイズ内容
- タイプ:2カラム
- 背景色:オレンジ
- 枠線:実線
- PCで幅を狭く(中央寄せ)
- 丸角
- 文字を小さく
![画像5: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/f6727eeeca76615ebce3245ebb560bddcc365d2a.jpg)
このように、チェックボックスやプルダウンリストから選択するだけで、簡単に装飾ボックスをアレンジできます。カスタマイズ設定によってイメージがガラッと変わるので、用途に応じて使い分けてみてください。
装飾ボックスは、アルバムやカルーセルとはまた違い、華やかな見せ方ができる機能です。今回ご紹介した以外にもカスタマイズ方法はまだまだあるので、いろいろ試してみてくださいね。
![画像6: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/31f88a8e752b48e596271283f195fa769b91ed6e.jpg)
装飾ボックス、ぜひ使ってみてくださいね!
画像に関する機能のまとめ
アルバム
![画像: ※実際のアルバムではなく、スクリーンショットです](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/36137400ab92f88467f7b913e1399c6336f8abce.jpg)
※実際のアルバムではなく、スクリーンショットです
アルバム機能は、大量の画像を表示したいときに便利です。最大72枚までアップロード可能です。詳しくはニュースレターコラム第4回をご覧ください。
カルーセル
![画像7: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/68ad8d3c561633f3d94453bbbf13d2103c0bec57.jpg)
![画像8: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/2536d804317fb4b6e4b107eccaa17a5ddc076954.jpg)
![画像9: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/3f0b92d33f8387fd4129271a3b2e9bcba9581018.jpg)
カルーセル機能は、複数の画像やテキストを、自動スクロールでダイナミックに見せることができます。最大12件まで表示可能です。詳しくはニュースレターコラム第5回をご覧ください。
装飾ボックス
![画像10: 画像をさらに目立たせる! 装飾ボックス機能の豊富なカスタマイズ例をご紹介](https://d1uzk9o9cg136f.cloudfront.net/f/16783049/rc/2023/09/07/ea493b735ef4e1f5d6a599548f1b59aca2dc02e9.jpg)
装飾ボックス機能は、背景色や枠線をつけることでより強調させた見せ方ができます。1〜2枚の画像を使用する際におすすめです。この記事でご紹介しています。