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では、手軽にトップページの見た目が変更できます。それぞれ設定場所をご案内します。前の記事の続き、モバイル表示の後編です。


最新の投稿


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画面の見た目を調整します。


【初期設定】サイト公開後の『基本設定』について

【初期設定】サイト公開後の『基本設定』について

CREAMが納品されたら、まずはサイトにまつわる基本的な設定を行います。管理画面の基本設定画面で各種項目を入力してください。


オウンドメディア構築の具体例

オウンドメディア構築の具体例

「オウンドメディア」という言葉が、一般企業でも聞かれるようになってきました。もとはマーケティング専門の用語だったものが幅広く浸透しつつあるのが昨今の状況です。 Web制作会社やコンサルティング会社から「オウンドメディア活用」の提案が増え、それにともなって広い業種でオウンドメディアに相当するWebサイトが構築・制作・運用されています。先行して取り組み、ノウハウの蓄積とともにオウンドメディアで成功し、業績を上げた会社はライバルに大きな差をつけています。


不用品回収 タスクル

ページTOPへ