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

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

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

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


モバイル表示の記事ページの見た目(上部)

前の記事で説明したとおり、トップページは設定変更によって見た目を変更することが可能です。

一方で記事ページについては、実は設定変更で見た目を変えられる項目はごくわずかです。

モバイル表示の記事ページ上部です。

上から、ヘッダーエリア、サムネイル画像、公開日表示、タイトル、説明文、SNSボタン、目次、本文、大見出し、画像、本文、中見出し…、と各ブロックが並んでいます。

この部分の見た目を変更するとしたら、一番かんたんなのは、挿し絵となる画像素材やバナー画像を設置することです。

記事作成画面で「画像」を追加しても良いですし、コンテンツウィジェットを使って見出し上のバナー画像を設定しても良いでしょう。

記事作成のはじめ方②【コンテンツ作成の前半】 | CREAMサポートブログ

https://media.cream-cms.com/blog/articles/31#outline12

メディア構築CMS「CREAM」を使って記事を書く流れを説明します。はじめて使う方でもわかるよう、できるだけ丁寧に紹介します。2つ目の記事はコンテンツ作成の前半です。

広告収益アップ!メディア記事内広告「コンテンツウィジェット」の使い方 | CREAMサポートブログ

https://media.cream-cms.com/blog/articles/16

広告収益型のメディアサイトで実績が多いCREAMには、広告掲載場所を設定する「ウィジェット」という機能が3種類あります。その中で、使い方次第で広告収益改善が期待できる記事内広告「コンテンツウィジェット」機能を紹介します。

設定変更ではなく「CSS設定」機能を使う

例えば、
・ヘッダーエリアの表示高さ
・目次の背景色
・大見出しのフォントサイズ
・本文テキストの行間
などを変更したい場合を例にすると、設定変更できるボタンやスイッチを用意してありません。

この場合は、CSS設定の機能を使います。
以下の引用にある、②に相当するものです。

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

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

「CSS設定」は、HTML/CSSの知識ある上級者向けの機能ですので、ここでは説明を割愛します。

モバイル表示の記事ページの見た目(下部)

モバイル表示の記事ページの下部です。

上から、最新の投稿、ランキング、最近話題のキーワード、カテゴリー一覧、カテゴリーにひも付くキーワード、SNSボタン、フッターエリア、の各ブロックが並んでいます。

ランキングの順位表示の背景色(アクセントカラー)の変更は、以下で紹介しました。
https://media.cream-cms.com/blog/articles/65#outline6

フッターエリアの色変更は、以下で紹介しました。
https://media.cream-cms.com/blog/articles/65#outline16

ランキングの項目テキストについては設定変更が可能です。

設定の場所は以下です。
管理画面トップ > 詳細設定

ランキング設定

例えば、このようにテキストを変更できます。

その他の見た目の変更は

その他の見た目の変更は、やはり「CSS設定」機能を使うことになります。

例えば、テキストのフォントファミリーやサイズを変更したり、記事ページ全体の背景色を指定したり、特定のブロックにだけ枠線を表示したり、さまざまな見た目の変更や装飾を行えるのが「CSS設定」です。

ですが、サイト全体のレイアウト崩れやコンテンツの非表示など、意図しないトラブルが発生することもあります。くれぐれもスキルを持った担当者だけの活用に留めて、トラブルが発生しても元に戻せるようにしておきましょう。

 

 

 

この記事のライター

関連するキーワード


デザイン設定

関連する投稿


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

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

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


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

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

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


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

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

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


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

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

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


最新の投稿


2021年 ゴールデンウィーク休業のお知らせ

2021年 ゴールデンウィーク休業のお知らせ

2021年のゴールデンウィークの弊社休業期間をお知らせします。


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

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

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


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

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

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


2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始の弊社休業期間をお知らせします。


RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSは登録したWebサイトの新規記事や更新情報などを配信する仕組みです。メディア構築CMSのCREAMには標準で用意されています。情報収集にも、記事の外部サイト表示もできる活用方法を案内します。


 

ページTOPへ