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

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

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

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


メディア構築CMS「CREAM」を使い始めるときに、はじめの設定で必要な画像を説明します。
・HOMEアイコン
・サイトロゴ
・シェア用サイト画像
・ファビコン
・タッチアイコン

このうち、本当の最低限としては「サイトロゴ」がまずあれば良いでしょう。

HOMEアイコン

HOMEアイコンのサイズ、画像形式は?

サイズ:160x160px
形式 :背景が透明のPNGファイル

HOMEアイコンが表示される場所は?

カテゴリーが並んでいる際の『HOME』のアイコンとして表示されます。

左カラムにある、カテゴリーの『HOME』のアイコンとして表示されている例です。

サイトロゴ

サイトロゴのサイズ、画像形式は?

サイズ:380x96px
形式 :背景が透明のPNGファイル

サイトロゴが表示される場所は?

サイト全ページのヘッダー部分とフッター部分に表示されます。

記事のヘッダー部分に表示されている例です。

記事のフッター部分に表示されている例です。

サイト画像(シェア用サイト画像)

サイト画像のサイズ、画像形式は?

サイズ:1200x630px
形式 :JPGファイル または PNGファイル

画像は各サイトが任意のサイズで切り出す場合があります。例えば『Twitter』や『Facebook』では正方形で切り出される場合もあります。

サイト画像が使われる場所は?

『Twitter』や『Facebook』などでシェアされる際に、『サイトを表す画像』として使われる「og:image」の画像です。そのため自サイト内では表示されません。

Facebookでシェアされる際の例です。

「シェアデバッガー - Facebook for Developers」を使って表示したものです。

ファビコン(Favicon)

ファビコンのサイズ、画像形式は?

サイズ:32x32px
形式 :PNGファイル

ファビコンが使われる場所は?

ブラウザのタブやブックマークなどに表示されます。そのため自サイト内では表示されません。

ブラウザchromeのタブに表示されている例です。

タッチアイコン

タッチアイコンのサイズ、画像形式は?

サイズ:306x306px
形式 :PNGファイル

タッチアイコンが使われる場所は?

スマートフォンのブックマークや「HOME画面に追加」を行った際に使われるアイコン画像です。そのため自サイト内では表示されません。

iPhoneで「HOME画面に追加」を行った例です。

その他

ここまでのサイト全体に関わる画像のほかに、カテゴリーやキーワードを示すアイコン画像、ログインユーザー(管理者やライター)のマイページに使う画像などがあります。

一例として、カテゴリーのアイコン画像を説明します。

カテゴリーアイコンのサイズ、画像形式は?

サイズ:160x160px
形式 :背景が透明のPNGファイル

カテゴリーアイコンが表示される場所は?

トップページの左カラムなど、カテゴリーが並んでいる際のアイコンとして表示されます。

左カラムにカテゴリーアイコンが表示されている例です。

カテゴリー ラージイメージのサイズ、画像形式は?

サイズ:300x300px
形式 :背景が透明のPNGファイル

カテゴリー ラージイメージが表示される場所は?

カテゴリーページのTOPに表示されます。

カテゴリーページのTOPに表示されている例です。

マイページの画像

マイページで使われる画像を設定する「アカウント編集」画面については、以下の記事を参考にしてください。

記事作成のはじめ方①【記事作成画面の説明】 | CREAMサポートブログ

https://media.cream-cms.com/blog/articles/30

メディア構築CMS「CREAM」を使って記事を書く流れを説明します。はじめて使う方でもわかるよう、できるだけ丁寧に紹介します。1つ目の記事は記事作成画面の説明編です。

本記事の表示結果

この記事は、開発中の「FAQリッチリザルト機能」の表示テストを兼ねています。

Google検索結果の表示画面は以下でした。

FAQコンテンツ作成(FAQリッチリザルト)機能については、CREAM標準パッケージのアップデートで正式に機能追加されました。以下の記事をご覧ください。

【CREAM】12月のアップデート内容詳細 | CREAMサポートブログ

https://media.cream-cms.com/blog/articles/39

CREAM12月のアップデート内容の詳細についてお知らせします。

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

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

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

関連するキーワード


記事作成 リッチリザルト

関連する投稿


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

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

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


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

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

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


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

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

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


キーワード(タグ)の機能説明③:多階層構造の管理とパンくずリスト

キーワード(タグ)の機能説明③:多階層構造の管理とパンくずリスト

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


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

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

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


最新の投稿


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へ