CREAMでのサムネイル画像の扱い
サムネイル(英語:thumbnail、サムネールとも表記される)とは、画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。親指(thumb)の爪(nail)のように小さく簡潔であるという意味から来ている。
CREAMの記事作成画面では、タイトルや説明文の隣りに、サムネイル画像を登録するボタンが用意されています。
記事作成しているパソコンのローカルにある任意の画像をアップロードして登録できます。
記事作成のはじめ方①【記事作成画面の説明】 | CREAMサポートブログ
https://media.cream-cms.com/blog/articles/30メディア構築CMS「CREAM」を使って記事を書く流れを説明します。はじめて使う方でもわかるよう、できるだけ丁寧に紹介します。1つ目の記事は記事作成画面の説明編です。
サムネイル画像は大きなサイズのものは自動でリサイズされます。推奨は正方形の画像、フォーマットはPNG、JPEG、GIFです。
PC表示の記事文中のサムネイル表示です。
PC表示のトップページや新着リストなど、記事一覧の際のサムネイル表示です。
モバイル表示の記事文中のサムネイル表示です。
モバイル表示のトップページや新着リストなど、記事一覧の際のサムネイル表示です。
サムネイル画像で気をつける点
ゴキブリさんの上下が切れています。
記事一覧表示やPC記事では正方形で表示されるサムネイル画像ですが、モバイル表示の記事文中のときだけは横長で表示されます。
そのため正方形のつもりで内容物を用意すると、上記のようにモバイル表示の記事では「上下が切れてしまう」という問題が発生します。
風景画像やイラストでは問題なくても、人物画像の場合はあまりよろしくないでしょう。かつ、モバイル表示の記事では、サムネイル画像がメインビジュアルのような扱いになるため、影響が大きいことが予想されます。
サムネイル画像の上下切れ問題を解消するには
上下切れ問題を、端的に説明するとこんな感じです。本画像はダウンロードして画像編集ソフトに取り込んでガイドとしてご利用いただけます。
システム的な対応策は用意していないのですが、サムネイル画像を選んだり画像制作する場合には以下を意識することで何とか運用回避していただけるのではないかと思います。
・記事のサムネイル画像は「828x828pxの正方形」を推奨
・モバイル記事トップ表示の際は上下138pxずつ切り取られる
・640x640pxの場合は上下107pxずつ切り取られる
サムネイル画像を用意する際は、
上下138pxずつ切り取られて問題のない「828x828pxの正方形」を用意する
という対応策で、お願いできましたら幸いです。