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


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

この記事のライター

関連するキーワード


記事作成

関連する投稿


構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

Googleは、検索エンジンが理解しやすいHTMLタグに記述する特殊なコードである構造化データの利用を推奨しています。構造化データで記述することでリッチリザルトが表示され、検索ユーザーの目に触れやすくなります。メディア構築CMSのCREAMなら初めから機能が用意されています。


記事本文を装飾するには?ビジュアルエディターの使い方②

記事本文を装飾するには?ビジュアルエディターの使い方②

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は後編です。


記事本文を装飾するには?ビジュアルエディターの使い方①

記事本文を装飾するには?ビジュアルエディターの使い方①

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は前編です。


初期管理者やログインユーザー追加の使い方

初期管理者やログインユーザー追加の使い方

CREAM環境構築が終わり、初期管理者で管理画面にログインできるようになったら、まずは他のログインユーザーを追加登録しましょう。


CREAMはじめの設定で必要な画像ファイルを教えてください

CREAMはじめの設定で必要な画像ファイルを教えてください

メディア構築CMS「CREAM」を使い始めるときに、はじめの設定で必要な画像について、サイズやファイル形式を整理して説明します。


最新の投稿


オウンドメディアに使いやすいフォームサービスを導入(formrun編)

オウンドメディアに使いやすいフォームサービスを導入(formrun編)

企業のオウンドメディアやブログへの導入が進むメディア構築CMS「CREAM」を使う際に、効果が高まる外部サービスとの組み合わせ活用の紹介です。今回はCVアップやコミュニケーション促進に、フォームサービス「formrun」を埋め込み導入します。


Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

メディア構築CMS「CREAM」のスポットページ作成機能を使う際に、自社名や店舗名が表示されたGoogleマップを埋め込む方法があります。Googleマイビジネスの説明と合わせて紹介します。


構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

Googleは、検索エンジンが理解しやすいHTMLタグに記述する特殊なコードである構造化データの利用を推奨しています。構造化データで記述することでリッチリザルトが表示され、検索ユーザーの目に触れやすくなります。メディア構築CMSのCREAMなら初めから機能が用意されています。


記事本文を装飾するには?ビジュアルエディターの使い方②

記事本文を装飾するには?ビジュアルエディターの使い方②

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は後編です。


記事本文を装飾するには?ビジュアルエディターの使い方①

記事本文を装飾するには?ビジュアルエディターの使い方①

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は前編です。


 

ページTOPへ