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

トップページのデザイン変更の方法を教えてください(モバイル前編)

トップページのデザイン変更の方法を教えてください(モバイル前編)

メディアサイト構築CMSのCREAMでは、手軽にトップページの見た目が変更できます。それぞれ設定場所をご案内します。まずはモバイル表示の前編です。


CREAMのデザイン設定の概要

「スマートフォンで記事ページに直接アクセスされ、トップページは見られない」のが、ほとんどのWebメディアサイトの特性です。

モバイルデバイスでのアクセスがほとんどであり、記事ページにランディングするため、トップページのアクセスはわずか。という説明を以前の記事でご案内しました。

その特性にそって、見た目のデザインやレイアウトにこだわるよりも、記事コンテンツの内容に注力したほうが費用対効果が高いです。というアドバイスをさし上げることがよくあります。

とはいえ、「見た目をどのくらい変更できるのか?」は、多くの方々にご質問いただく内容です。

CREAMの仕様としては、WordPressでいう「テーマ」のような、デザインやレイアウトなどのテンプレートの概念がありません。

そのため、大きくわけると以下3方向の対応が行われています。
①管理画面からデザイン設定する
②CSSを管理画面から追記する
③SODAがデザイン改修を行う(有償)

今回は、この①について説明していきます。

標準的なデモサイトのトップページを例に

こちらが、CREAM標準レイアウトのデモサイトです。

ヘッダーエリアの固定on/off

通常、モバイルトップのヘッダーエリアは、ブラウザ上部に固定されているため、スクロールしても追従してきます。

ちなみに、ヘッダーエリアの左端の「三」のようなアイコンは、ハンバーガーメニューと呼ばれる、カテゴリーメニューの入り口です。

ヘッダーの追従を解除する(上部固定しない)と、スクロールするとヘッダーが見えなくなります。

設定の場所は以下です。
管理画面トップ > 詳細設定 > さらに詳細な設定 > その他 > ヘッダーの追従解除

特集エリアの変更

赤枠で囲ったところは「特集エリア」です。

指定した記事のサムネイル画像とタイトルが表示されています。

表示する記事数を変更することもできます。

こちら3個表示した例です。

特集エリアを非表示にすることもできます。

設定の場所は以下です。
管理画面トップ > HOME画面の特集 > 対象の「特集」の設定

特集の編集画面内の以下です。
・公開をon/off(offの場合は非公開の扱い)
・Mobileの個数指定

新着記事のタイル表示/リスト表示

新着記事の4個をタイル表示している例です。

新着記事をリスト表示にしている例です。

設定の場所は以下です。
管理画面トップ > デザイン設定 > 新着設定 > 新着記事表⽰レイアウト

タイル表示を選択すると、
タイル表示の個数や、タイトル部分の色設定、Newアイコンの設定などが選択できるようになります。

タイトルエリア、New背景の色変更

青枠で囲った、特集エリアのタイトルの背景色、タイル表示のタイトルの背景色、Newアイコンの背景色を赤色(#ff0000)変更した例です。

設定の場所は以下です。
管理画面トップ > デザイン設定

タイル型デザイン設定
・記事タイトルの背景色
・Newの背景色

特集デザイン設定
・特集のタイトル背景カラー

後編の記事に続きます。

 

 

 

関連するキーワード


デザイン設定 特集エリア

関連する投稿


広告にもデザインにも活用!「ウィジェット」の使い方

広告にもデザインにも活用!「ウィジェット」の使い方

バナー画像や広告タグを配置するための機能のひとつ、『ウィジェット』を紹介します。トップページやカテゴリー記事一覧トップなどに表示されるエリアを管理できます。コンバージョン促進など、自由なアイデアで活用していただきたい機能です。


記事ページのデザイン変更の方法を教えてください(モバイル編)

記事ページのデザイン変更の方法を教えてください(モバイル編)

メディアサイト構築CMSのCREAMでは、設定変更により見た目を変更できるところもあるのですが、モバイル表示(スマートフォン表示)の記事ページについてはごくわずかです。では見た目を変更するにはどうしたら良いでしょうか。


トップページのデザイン変更の方法を教えてください(モバイル後編)

トップページのデザイン変更の方法を教えてください(モバイル後編)

メディアサイト構築CMSのCREAMでは、手軽にトップページの見た目が変更できます。それぞれ設定場所をご案内します。前の記事の続き、モバイル表示の後編です。


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

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

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


最新の投稿


UXの新指標「コアウェブバイタル」対応

UXの新指標「コアウェブバイタル」対応

Google は、2021年6月からUXの新指標「コアウェブバイタル」を検索結果の表示順位に反映させると発表しました。 CREAMは、この「コアウェブバイタル」にもいち早く対応。 ページスピードインサイトで確認すると、高いスコアを出していることが分かります。


初期費用半額キャンペーン実施中!

初期費用半額キャンペーン実施中!

SODA株式会社では、withコロナ時代にデジタルマーケティングの活動を行う皆様を支援するため、初期費用を半額にするキャンペーンを実施します。


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

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

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


企業ブログの成功ポイントと事例

企業ブログの成功ポイントと事例

企業ブログは、オウンドメディアやメールマガジンなど様々なコンテンツマーケティング手法のひとつです。企業ブログの成功のポイントや事例、CMS活用についてまとめました。


CREAMサイトにおけるサブドメインとサブディレクトリの扱い

CREAMサイトにおけるサブドメインとサブディレクトリの扱い

オウンドメディアやWebメディアサイトに特化したCMS「CREAM」の導入時に、サブドメインやサブディレクトリを設定できるのか、といった質問をよく受けるため説明します。


CREAM 初期費用半額キャンペーン

ページTOPへ