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

くりたまさと
Masato Kurita
栗田 将人 の過去を覗き見る↗︎
【CMS導入編】 Webflowで一番最初に行うCMS設定【3days】

2023年更新ーCMSで何ができるか解説した記事を作成しました。今後CMSの使い方を独自でまとめた記事を作成します。告知はTwitterでご確認ください。
>Webflow CMSを完全理解ガイド2023

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分で完成することができますよ。

無料メルマガで追加情報を告知します。

Webflow専門家として事業を行っている栗田自身が実際に使用して便利だと感じたWebflowの使い方や小技などを共有しています。他にもノマドライフや、事業計画、経験と過程について発信しています。

これは僕からあなたへの手紙です。飾らない言葉で発信しています。登録が励みになります。メルマガ登録100人を最初の目標にしています。100人集まったら旅企画を告知します。海外旅行に一緒に行って新しい価値観を広げましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

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

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

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

Read more...

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

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

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup