CREAMのデザイン設定の概要
「スマートフォンで記事ページに直接アクセスされ、トップページは見られない」のが、ほとんどのWebメディアサイトの特性です。
モバイルデバイスでのアクセスがほとんどであり、記事ページにランディングするため、トップページのアクセスはわずか。という説明を以前の記事でご案内しました。
その特性にそって、見た目のデザインやレイアウトにこだわるよりも、記事コンテンツの内容に注力したほうが費用対効果が高いです。というアドバイスをさし上げることがよくあります。
とはいえ、「見た目をどのくらい変更できるのか？」は、多くの方々にご質問いただく内容です。
CREAMの仕様としては、WordPressでいう「テーマ」のような、デザインやレイアウトなどのテンプレートの概念がありません。
そのため、大きくわけると以下3方向の対応が行われています。
①管理画面からデザイン設定する
②CSSを管理画面から追記する
③SODAがデザイン改修を行う（有償）
今回は、この①について説明していきます。
標準的なデモサイトのトップページを例に
こちらが、CREAM標準レイアウトのデモサイトです。
ヘッダーエリアの固定on/off
通常、モバイルトップのヘッダーエリアは、ブラウザ上部に固定されているため、スクロールしても追従してきます。
ちなみに、ヘッダーエリアの左端の「三」のようなアイコンは、ハンバーガーメニューと呼ばれる、カテゴリーメニューの入り口です。
ヘッダーの追従を解除する（上部固定しない）と、スクロールするとヘッダーが見えなくなります。
設定の場所は以下です。
管理画面トップ > 詳細設定 > さらに詳細な設定 > その他 > ヘッダーの追従解除
特集エリアの変更
赤枠で囲ったところは「特集エリア」です。
指定した記事のサムネイル画像とタイトルが表示されています。
表示する記事数を変更することもできます。
こちら3個表示した例です。
特集エリアを非表示にすることもできます。
設定の場所は以下です。
管理画面トップ > HOME画面の特集 > 対象の「特集」の設定
特集の編集画面内の以下です。
・公開をon/off（offの場合は非公開の扱い）
・Mobileの個数指定
新着記事のタイル表示/リスト表示
新着記事の4個をタイル表示している例です。
新着記事をリスト表示にしている例です。
設定の場所は以下です。
管理画面トップ > デザイン設定 > 新着設定 > 新着記事表⽰レイアウト
タイル表示を選択すると、
タイル表示の個数や、タイトル部分の色設定、Newアイコンの設定などが選択できるようになります。
タイトルエリア、New背景の色変更
青枠で囲った、特集エリアのタイトルの背景色、タイル表示のタイトルの背景色、Newアイコンの背景色を赤色（#ff0000）変更した例です。
設定の場所は以下です。
管理画面トップ > デザイン設定
タイル型デザイン設定
・記事タイトルの背景色
・Newの背景色
特集デザイン設定
・特集のタイトル背景カラー
後編の記事に続きます。
