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

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 とクラス名を設定

上から順に翻訳すると

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

クラス設定する項目の横ページから選択できます。今回は上から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分で完成することができますよ。

‍