%402x.svg){kind=icon}
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ページに一つしか設定できないルールが有ります。
- paragraphを追加
- Max Width 450px
- 文字色の透明度を60まで下げましょう。
見出し作成は完了です。CMSの作成に進みましょう！
２.CMSの作成・コンテンツField作り
1.ではCMSをサイトに導入する土台を作りました。ここではCMSを使用するための情報入力を行う土台を作ります。このCMSの中身作りは１から作るとなかなか時間がかかるので「サンプルだけぶち込んでササッと終わらせたい」という方はサンプル使用して2,3番をスキップすることができます。
サンプルを読み込む方法はこちら
CMSファイルの初期設
写真を参考に新しくCMSを作っていきましょう。名前は自由に設定します。今回は僕は「Projects」にしました。
新しくCMSを作成したら、Add New fieldをクリックして必要なField(フィールド)を作ります。ここで追加する FieldはCMSのでなにを作りたいかによって変わります。最初はあまり想像できないと思うのでとりあえず真似して作成してみましょう。
アイコン・題名を参考に同じように作成しましょう。基本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コンテンツの中身を作成
２.を作成した後についにCMSの情報を入力していきます。右上、New projectから新しく情報を記入していきましょう。
※使い方だけ知りたい方はサンプルを使用するとめっちゃ楽です。サンプルの使用方法
先程作成したFieldが各コンテンツの記入項目となっています。情報を記入してコンテンツを充実させていきます。
写真はまだ決めていなかったので、僕がフィリピンに留学していた時の写真を入れちゃいました。写真が決まるまでは海外の無料写真配信サイトにて「オーダン」あたりで写真をダウンロードしておきましょう。特に作りたいサイトが決まっていない方はサンプルを使用しましょう。
４.CMSの挿入
メインページにCMSを表示させます。CMSで作成した数だけ、一気にページを作る事ができます。
- サイト構築画面の左上の「＋」よりCMS lists をドラッグ＆ドロップ ※土台として作成したH2とparagraphの下に配置
- CMS listsにHeadingを挿入
- Get text fromをクリックして「name」を選択。(CMSでnameに入力した文字が表示されます)
- CMSを使用している箇所は紫で表示されています。確認しましょう。
- Text blockを挿入してBreaf text description を選択。下記のように各コンテンツごとFieldに入力した文章が表示されます。
- 更にテキストブロックを２つ挿入、
- １つはCMSの制作日(create day)を選択
- もう一つはCMSを使用せずに「詳しく見る」と文字入力。
- CMSページの全てに「詳しく見る」と反映される。
CMSページではCMSを使用しない要素は共通で反映されます。設定をいじれば多少表示の変更はできますが基本デザインは統一されると把握しておきましょう。
プロジェクトカラーを設定
上記で作成したCMSの文章たちの頭にDIVブロックを挿入し、CMSのプロジェクトカラーを選択しましょう。
- DIVブロックをCMS内に挿入
- HeaderやparagraphをDivブロックに入れる
- project details とクラス名を設定
上から順に翻訳すると
- テキストのカラー変更
- Imageをバックグラウンドに設定
- 背景色を変更←今回使うのはこちら
- ボーダーカラーを変更
クラス設定する項目の横ページから選択できます。今回は上から3番目、背景色の変更を行います。
- チェックを入れて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の使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。愛すべきあなたへ届きますように。
