メインコンテンツにスキップ

CMS素材のスタイルを整える(イージー編)

Hanasaki avatar
対応者:Hanasaki
今日アップデートされました

CMSカードが扱いにくく感じるのは、

要するに人が作ったセットを一度壊して整形し直すのは手間だし、

面倒に感じるのが原因だと思います。(あくまで個人の感想です)

だったら、最初からパーツを1つずつ自分の思うように配置すればいいじゃないか、

という訳で、ここからは Hanasakiイチ推しのイージー編です。

さっそく行ってみましょう!

1.CMSページのデザイン画面を開きます。

ここからはCMSカードではなく、CMS画像やCMSテキストなどを単体で呼び出します。

2.ツールバーの画像ツールで画像領域を確保します。

❶ 画像ツール選択 ➡ ❷ 画像領域を確保 ➡ ❸ プロパティパネルで「CMS」をクリック

3.プロパティパネルからカバー画像を呼び出します。

❶ プロパティパネルで「未選択」をクリック ➡ ❷ 選択パネルから「カバー画像」を選択

4.CMSページ名に一致したカバー画像が現れます

5.簡易板を作成して任意の場所に置きます。(単なるデザインです)

❶ 簡易板ツール選択 ➡ ❷ 簡易板を作成

6.テキストツールを使って簡易板の中にテキストを入れます。

❶ テキストツール選択 ➡ ❷ テキストを挿入 ➡ ❸ プロパティパネルで「CMS」をクリック

7.画像と同様にプロパティパネルからCMSテキストを呼び出します。

❶ プロパティパネルで「未選択」をクリック ➡ ❷ 選択パネルから「タイトル」を選択

8.上部のスタイルパネルでテキストのスタイルを整えます。

9.ツールバー(左下)CMSツールから記事を呼び出します。

❶ CMSツール選択 ➡ ❷ ブログ記事>CMS記事 ➡ ❸ 任意の場所に置く

10.CMS記事のスタイルを整えます。

スタイルパネルとプロパティパネルを使って、CMS記事を整えます。

CMS記事のスタイルを整えるにはちょっとしたコツがあります。

ただ、手順を説明していると本項が少し長くなるので、別記事にしました。

CMS記事(リッチテキスト)を編集する」を一度読んでから、こちらに戻ってきてください。

11.他のCMS素材を呼び出した後、デザインを完成させる。

この記事ではすでに、画像/テキスト/記事、

すべてのタイプの単体での呼び出し方について触れてきました。

そう。これを読んでいる方は、この時点でCMSページの作成について、ほぼ理解している状態です。

後は、公開日時など必要なCMS素材があれば、

すべて上の手順でページに追加して、自由にデザインするだけです。

なのですが、

「あー、CMSページってこういうことなんだね」と再認識していただくために、

もうひと手間かけてみますので、今しばらくお付き合いください。

私としては全体がまだ寂しいので、背景に画像を貼り付けてみます。

(デザイン的には邪道かもしれませんが、後で他のCMSページを対比する時のためでもあります)

スタイルパネルで画像の不透明度を変更します。

この状態で、ヘッダのCMSページ名を別のページに変えてみます。

デザインが完全に共有されているのがわかります。

そして、みなさんはすでにこれを作れるようになっている、というのが最大のポイントです。

おめでとうございます。

まずはCMSページの作成をマスターしました。

次のステップは、「通常ページにCMS組み込む」ですが、

これだけの情報量をインプットした後なので、学習した内容が定着するまで

しばらく間を置かれることをオススメします。(続けて詰め込むと多分、混乱します)

という訳で、「CMSページを作成する」はこれにて終了です。

おつかれさまでした!

 

こちらの回答で解決しましたか?