【CMS導入編】 Webflowで一番最初に行うCMS設定【3days】

【CMS導入編】 Webflowで一番最初に行うCMS設定【3days】

3日目はCMSを使用してページのメインコンテンツを作成していこうと思います。WebflowのCMSでは共通デザインのページを簡単に作成できます。ブログの作成に使用したり店舗のお知らせとして定期的な更新をするページを作成する際に使うと便利です。

Webflowを使用してブログページを作成したいという方には重要な日になるかもしれませんね!

1.WebflowのCMSコンテンツの作成準備

CMSをホームページに追加するためには最初にいくつか土台を作る必要があります。まずは土台作りから初めていきましょう。

CMSを入れるSectionを作る

  • 新たにsectionを追加
  • 前回作成したSectionのクラスを使用
  • 上下に60pxのPaddingがあることを確認
  • Containerを追加して既存のクラスを使用

見出しと説明文を追加

  • headingを追加
  • 「H2 Heading」とクラス名をつけます。
  • 文字の大きさを28pxに変更
  • H2のPadding top 0px

文章はいつでも変更可能なので一旦「仕事一覧」に設定。追加したHeadingの青の歯車をクリックして「H2」を選択しましょう。ウェブサイト制作のルールとしてH1は1ページに一つしか設定できないルールが有ります。

H2選択してクラス名を設定
  • paragraphを追加
  • Max Width 450px
  • 文字色の透明度を60まで下げましょう。
色の透明度はここから設定

見出し作成は完了です。CMSの作成に進みましょう!

CMSの見出し
H2の見出し作成完成図

2.CMSの作成・コンテンツField作り

1.ではCMSをサイトに導入する土台を作りました。ここではCMSを使用するための情報入力を行う土台を作ります。このCMSの中身作りは1から作るとなかなか時間がかかるので「サンプルだけぶち込んでササッと終わらせたい」という方はサンプル使用して2,3番をスキップすることができます

サンプルを読み込む方法はこちら

CMSファイルの初期設

写真を参考に新しくCMSを作っていきましょう。名前は自由に設定します。今回は僕は「Projects」にしました。

ここから作成を始めます

新しくCMSを作成したら、Add New fieldをクリックして必要なField(フィールド)を作ります。ここで追加する FieldはCMSのでなにを作りたいかによって変わります。最初はあまり想像できないと思うのでとりあえず真似して作成してみましょう。

CMS初期設定
Field設定

アイコン・題名を参考に同じように作成しましょう。基本Web制作ではコーティングに英語を使用するのでここでも英語で作成することをオススメします

コンテンツ説明

  • Breaf text description:ページを開いてもらう前の説明文を記入。
  • Project details :ページ内のメインコンテンツを記入。
  • Project type:コンテンツを分けるための機能。

色は作成するコンテンツに適した色を、linkには動作確認のために何かしらのURLを入れて作成しておきましょう。

当ブログのURLを記入しておいてもOK↓

https://how-to-webflow-5021.webflow.io/posts/webflow-university

Project typeは下記のように作成、まだ内容が決まっていない方は真似してみてください。

  • ロゴ・チラシ・名刺デザイン
  • ライティング依頼
  • HPの作成の運用(コード)
  • HPの作成の運用(Webflow)

3.CMSコンテンツの中身を作成

2.を作成した後についにCMSの情報を入力していきます。右上、New projectから新しく情報を記入していきましょう。

※使い方だけ知りたい方はサンプルを使用するとめっちゃ楽です。サンプルの使用方法

CMSコンテンツの作成画面

先程作成したFieldが各コンテンツの記入項目となっています。情報を記入してコンテンツを充実させていきます。

写真はまだ決めていなかったので、僕がフィリピンに留学していた時の写真を入れちゃいました。写真が決まるまでは海外の無料写真配信サイトにて「オーダン」あたりで写真をダウンロードしておきましょう。特に作りたいサイトが決まっていない方はサンプルを使用しましょう。

4.CMSの挿入

メインページにCMSを表示させます。CMSで作成した数だけ、一気にページを作る事ができます。

  • サイト構築画面の左上の「+」よりCMS lists をドラッグ&ドロップ ※土台として作成したH2とparagraphの下に配置
  • CMS listsにHeadingを挿入
  • Get text fromをクリックして「name」を選択。(CMSでnameに入力した文字が表示されます)
  • CMSを使用している箇所は紫で表示されています。確認しましょう。
  • Text blockを挿入してBreaf text description を選択。下記のように各コンテンツごとFieldに入力した文章が表示されます。
Fieldに記入した項目が一気に表示されます。
  • 更にテキストブロックを2つ挿入、
  • 1つはCMSの制作日(create day)を選択
  • もう一つはCMSを使用せずに「詳しく見る」と文字入力。
  • CMSページの全てに「詳しく見る」と反映される。

CMSページではCMSを使用しない要素は共通で反映されます。設定をいじれば多少表示の変更はできますが基本デザインは統一されると把握しておきましょう。

プロジェクトカラーを設定

上記で作成したCMSの文章たちの頭にDIVブロックを挿入し、CMSのプロジェクトカラーを選択しましょう。

  • DIVブロックをCMS内に挿入
  • HeaderやparagraphをDivブロックに入れる
  • project details とクラス名を設定
カラー変更の項目

上から順に翻訳すると

  1. テキストのカラー変更
  2. Imageをバックグラウンドに設定
  3. 背景色を変更←今回使うのはこちら
  4. ボーダーカラーを変更

クラス設定する項目の横ページから選択できます。今回は上から3番目、背景色の変更を行います。

  • チェックを入れてCMSを選択

各コンテンツごとCMSに設定した色が表示されます。

※↓写真では背景に色が反映していることだけ注目しましょう。

CMSの背景色を設定後

グリッドを使用

レイアウトからグリッドを選択してデザインを整えます。

  • CMSのcollection itemを選択
  • レイアウトから、グリッドに変更
  • グリッド2列目を削除
  • 左右の隙間を埋める
  • 上下にmargin 20px
  • project detailsの全方向にPadding 15px

Flex boxを使用する

Flex boxはグリットを設定した時と同じ、レイアウトから選択可能。グリッドの一つ左にあります。

  • project detailsにFlex boxを設定
  • 縦並び(Vertical)を選択
  • テキスト入力した「詳しく見る」を選択
  • Margin top にAutoを設定

一見、Flex boxを設定する前に戻っただけに見えますがFlex boxを設定したことにより「詳しく見る」をコンテンツの下に配置することができます。

公式動画では「日にちの文字色を薄く」「見出しの文字の大きさを変更」など行っています。しかし今回は特に重要なパートではないためスキップしちゃいましょう。

まとめ

CMSの初期設定から導入まで一気に行いました。最初はうまく行かないこともあるかもしれませんが一つ一つクリアしていきましょう。CMSを使用したウェブサイトはWebflowの管理費用が少し値段が上がります。また正直いって現状では少し使いにくい気がします。これからもっとアップデートすることを期待して、今は機能の把握のみでもいいかもしれません。

次回はお問い合わせフォームを作成します。ものすごく簡単に約5分で完成することができますよ。

併せて読むとおすすめの記事▼

2分で完成!Webflowならたったの3ステップでフッター制作可能【5days/Webflow大学】

Webflowでフッターを作成します。Webサイトの一番下に位置し、サイトマップの役割やお問い合わせ、などを配置するフッター。主に補足・補助程度の役割を持っています。Webflowの使い方を学びながらウェブサイトを作成していきましょう。

Read more...

【2022年最新版】Webflowの使い方を項目別にまとめました

Webflowの使い方で迷っていませんか?本記事ではWebflowの使い方をCMSやリッチテキスト、独自ドメイン、フォントの追加方法など項目別にまとめました。Webflowの使い方で悩むことがある方は必見です。

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。