メディア構築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/39CREAM12月のアップデート内容の詳細についてお知らせします。