CREAMサポートブログ | はじめてのメディアサイト運用に

サムネイル画像の注意すべき点を教えてください

サムネイル画像の注意すべき点を教えてください

メディア構築CMSのCREAMでは、記事にサムネイル画像をセットできます。サムネイル画像は一覧表示だけでなく、メイン画像のように使われるケースもあるため、サイズや内容物の位置に注意が必要です。


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の正方形」を用意する


という対応策で、お願いできましたら幸いです。

CREAMに関するお問い合わせはこちら

お問い合わせ・資料請求は下記のフォームからお気軽にお申し付けください。

CREAMお問い合わせフォームへ
不用品回収 タスクル

関連するキーワード


記事作成 サムネイル画像

関連する投稿


サイト内で使う画像をアップロードする「画像管理」の使い方

サイト内で使う画像をアップロードする「画像管理」の使い方

管理画面の「画像管理」メニューでは、サイト内で使う画像をアップロードすることができます。バナーやよく使う画像など、サイト全体で共有したい画像を登録しておきましょう。 また、ウィジェットやページ作成で画像を表示するときにも「画像管理」を使います。 「画像管理」での画像の登録の仕方と便利な使い方をご紹介します。


記事メディアにおける画像サービスの活用とメリット

記事メディアにおける画像サービスの活用とメリット

記事メディアに画像はつきものです。記事のサムネイル画像としても必要であり、また記事内でもテキストの間に挿し絵的な画像を挿入することで読みやすさの向上にも。CREAMが標準で用意している、外部サービスから画像を検索するAPIの使い方から、画像掲載の効果まで紹介します。


記事をページ分割(改ページ)したいときには

記事をページ分割(改ページ)したいときには

ブログやメディアサイトでは、記事コンテンツが長文になりやすいことからページ分割(改ページ)を行う場合があります。CREAMでは標準で、指定したブロック数で「次のページ」ボタンを表示する機能を用意しています。このページネーション機能を説明しながら、便利な活用Tipsなども紹介します。


キーワード(タグ)の機能説明①:記事への設定と一覧表示

キーワード(タグ)の機能説明①:記事への設定と一覧表示

企業ブログやオウンドメディアサイトでよく活用される、記事のラベル分類やタグ付けの「キーワード」機能を説明しながら、便利な活用Tipsなども紹介します。その1。


カテゴリーの機能説明と便利な活用方法②

カテゴリーの機能説明と便利な活用方法②

ブログやメディアサイトで必須となる、記事の分類やメニューの「カテゴリー」機能を説明しながら、便利な活用Tipsなども紹介します。その2。


最新の投稿


CREAMアップデートのお知らせ

CREAMアップデートのお知らせ

CREAM標準パッケージを対象とした、2023年3月のアップデート内容の詳細についてお知らせします。


ウェブページを軽量化!WebP画像対応

ウェブページを軽量化!WebP画像対応

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるPNGやJPGよりも軽量なため、ウェブサイトの表示速度を向上させることができます。CREAMにも導入可能です。


Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクスは、メディアの運営上、必須ともいえるアクセス解析ツールです。CREAMの管理画面からGoogleアナリティクスのタグを設置して、アクセス解析を始めましょう。


Googleアナリティクス(GA4)に切り替える

Googleアナリティクス(GA4)に切り替える

Googleアナリティクスは、2023年7月1日に「ユニバ―サルアナリティクス(UA)」から「Googleアナリティクス4(GA4)」に変わります。UAを利用している場合は、GA4への切り替えが必要です。CREAMでUAを利用している方向けに、GA4への切り替え方法をご案内します。


CREAM管理『デザイン設定』について

CREAM管理『デザイン設定』について

『デザイン設定』では主にサイトのHOME画面の見た目を調整します。


不用品回収 タスクル

ページTOPへ