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の背景色

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

後編の記事に続きます。

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

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

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

関連するキーワード


デザイン設定 特集エリア

関連する投稿


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

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

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


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

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

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


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

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

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


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

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

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


最新の投稿


メディア運営をサポートするおすすめサービス

メディア運営をサポートするおすすめサービス

メディア運営の運用サポートやお悩みの解決におすすめのサービスサイトをご紹介いたします。


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への切り替え方法をご案内します。


不用品回収 タスクル

ページTOPへ