Webflow / Webマーケティング の様々なTipsを掲載 Sitefun

【日本語版Webflow University】 CMS解説_画像フィールド

この投稿はWebflow社が提供する「Image field」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/image-field

‍

Webflow CMSでコレクションフィールドの1種として使用できる画像フィールド（Image field）を使用することで、テンプレートページやコレクションリストなどを動的にデザインすることができます。

‍

画像フィールドを使用すれば、お客様やコラボレーターがコレクションアイテムに画像をアップロードして、ページのデザインに使用することができます。コレクションの画像は、通常の画像要素もしくはコレクションページやコレクションリスト内の背景画像として使用することができます。

また、画像フィールドを使用して、コレクションリストをフィルタリングしたり、コレクションリストやページ内の要素に表示/非表示条件を設定したりすることもできます。

画像フィールドの一般的な使用方法

著者やチームメンバーのプロフィール画像
記事、コラムのサムネイル
アイコン
セクションの背景画像
Open Graph用画像

‍

レッスン概要

画像フィールドの作成
画像フィールドに画像を追加
デザインで画像フィールドを使用
画像フィールドを使用してコレクションリストをフィルタリング
画像フィールドを使用して条件付き可視性を設定する表示/非表示条件を設定

画像フィールドの作成

画像フィールドは、新規または既存のコレクションに追加することができます。「Collection settings」で「＋Add New Field」をクリックし、「Image」フィールドを選択します。

他のフィールドと同様に、そのフィールドが必須かどうかを指定することができます。

‍

画像フィールドに画像を追加

画像フィールドに画像を追加するには、画像をドラッグ＆ドロップするか、クリックして画像をアップロードします。アップロードできる画像ファイルの種類は問いません。

画像の最大ファイルサイズは4MBです。アップロード時にこれらの画像に対してレスポンシブバリアントが作成されます。しかし、これらのバリアントは画像が画像要素として使われるときだけ使われ、背景画像には使われません。

‍

デザインで画像フィールドを使用

コレクションリストやコレクションページでは、画像フィールドをさまざまな要素やスタイルに接続し、コレクション画像をデザインに取り込むことができます。

画像フィールドと画像要素の接続

コレクションリストまたはコレクションページに画像要素を追加します
画像設定の「Get Image from」チェックボックスにチェックを入れます
ドロップダウンから参照する画像フィールドを選択します

要素を選択し、キャンバス上の要素ラベルの横にある歯車アイコンをクリックするか、設定パネル（ショートカット D）にアクセスすることでも、画像設定にアクセスできます。

「Image Properties」の「Get Image from」のチェックを外すと、フィールドとの接続を解除することができます。

‍

動的なalt属性の設定

画像に動的なaltテキストを設定する方法は次の通りです。

画像を選択します
「Settings」タブに移動します。
画像のプロパティで、「Get Alt Text from」チェックボックスをチェックします
画像のAltテキストを含むフィールドを選択します

‍

画像フィールドと背景画像の接続

コレクション画像をセクションやdivブロックなどの要素の背景に設定することで、例えばブログのサムネイル画像やヒーローの背景画像などを作成することができます。動的な背景画像を設定する方法は次の通りです。

1 - 背景画像と画像フィールドを接続する

セクションを選択します
要素設定パネル（ショートカット D）へ移動します
「Get GB Image from」を選択します
フィールドのドロップダウンから画像フィールドを選択します

2 - 背景画像の設定を編集する

イメージフィールドを背景画像に接続すると、デフォルトの背景画像設定が適用されます。それらの設定を上書きする方法は次の通りです。

同じセクションを選択したまま、スタイルパネルで背景画像を追加します
背景画像のサイズ、位置、タイルを設定します

一言メモ

スタイルパネルで設定されている背景画像は、フィールドに接続されている場合、CMSコレクションの画像で上書きされます。

スタイルパネルでグラデーションや無地など背景をスタイリングしている場合、動的な背景画像の「Position」がデフォルト設定になってしまうため注意が必要です。

‍

動的背景画像の削除

「Collection Style Settings」の「Get GB Image from」のチェックを外すと、接続を解除することができます。

‍

画像フィールドを「Lightbox」要素に接続する

手順は次の通りです。

コレクションリストまたはコレクションページに「Lightbox」要素を追加します
「Lightbox」要素の子要素である「Image」要素を選択します
要素パネルの「Image Settings」で、参照するイメージフィールドからイメージを取得します
「Lightbox」要素の設定で、同じイメージフィールドからメディアを取得するようにします

‍

画像フィールドを使用してコレクションリストをフィルタリング

特定のイメージフィールドを持つコレクションアイテムのみを表示するコレクションリストを表示することができます。例えば、サムネイル画像を持つアイテムのみを表示したい場合など。

方法は次の通りです。

フィルタリングしたいコレクションリストを選択します
要素設定パネル(ショートカット D)に移動します
Collection List Settings下でフィルタを追加します
最初のドロップダウンで参照する画像フィールドを選択します（この例では、「サムネイル画像」を選択しています）
2番目のフィールドで「Is Set」を選択します
「Save」をクリックします

画像フィールドの値で使用できるフィルタールールは以下の通りです。

Is Set - この画像フィールドに何らかの値が設定されているコレクションアイテムを指定します
Is Not Set - この画像フィールドに値が設定されていないコレクションアイテムを指定します

‍

画像フィールドを使用して条件付き可視性を設定する表示/非表示条件を設定

画像フィールドを使用して、コレクションリストまたはコレクションページで個々の要素の表示または非表示に条件を付けて制御することができます。

例えば見出しに条件付き書式を設定して、特定の画像フィールドにコンテンツがあるときだけ表示させることもできます。

画像フィールドに接続されている画像要素を選択します
要素設定パネル（ショートカット D）に移動します
「Conditional visibility」の下にある「Condition」を追加します
最初のドロップダウンで、参照する画像フィールドを選択します
2番目のドロップダウンで「Is Set」を選択します
「Save」をクリックします

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

【日本語版Webflow University】 CMS解説_リッチテキストの概要

この投稿はWebflow社が提供する「Rich text field overview」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/rich-text-field

‍

Webflow CMSでコレクションフィールドの1種として使用できるリッチテキスト（Rich text）は、お知らせの本文やコラムのコンテンツ部分に使われるCMSフィールドです。

‍

リッチテキストフィールドは、コラボレーターが自由にコンテンツを作成し、書式設定できるようにします。リッチテキストフィールドは、コレクションリストやコレクションページで表示できます。また、リッチテキストフィールドを使用して、コレクションリストをフィルタリングしたり、コレクションページやリスト内の要素に表示/非表示条件を設定することもできます。

‍

一般的な使用方法

リンクのある長文コンテンツのほとんど
ブログ記事
ニュース記事
チームメンバーの経歴
製品の詳細な説明
イベントの詳細な説明

一言メモ

リッチテキストは、コラボレーターにテキストのスタイルを変更する機能を提供する場合に便利です。この機能を使用したくない場合は、プレーンテキストフィールドを使用することをおすすめします。

‍

レッスン概要

リッチテキストフィールドの作成
リッチテキストコンテンツの作成
動的なリッチテキストを表示
リッチテキストフィールドにネストされた要素をスタイリング
リッチテキストフィールドを使用したコレクションリストのフィルタリング
リッチテキストフィールドを使用した表示/非表示の条件設定

‍

リッチテキストフィールドの作成

リッチテキストフィールドは、新規または既存のコレクションに追加することができます。コレクション設定で、「Add New Field」をクリックし、「Rich text」フィールドを選択します。

フィールドを保存する前に、このフィールドに許可される最小文字数および最大文字数を設定することができます。また、他のフィールドと同様に、ヘルプテキストを追加し、フィールドが必須かどうかを指定することができます。

‍

リッチテキストコンテンツの作成

お客様やコラボレーターは、リッチテキストフィールド内でコンテンツを作成することができます。

大まかな手順は下記の通りです。

CMSでコレクションアイテムを開きます
リッチテキストコンテンツを入力または貼り付けします
さらに書式設定したり、画像や動画などのメディアを追加したりします
コレクションアイテムを保存します

リッチテキストには次のコンテンツが追加できます。

複数行テキスト
画像
動画
リッチメディア
箇条書きリスト
番号付きリスト
太字テキスト
イタリックテキスト
リンク
見出し
引用符

一言メモ

Webflowの標準機能には無いその他の主だったコンテンツを下記に記します。

表形式
テキストのハイライト、文字色変更
背景色の変更
テキスト毎のフォントの設定別け

‍

動的なリッチテキストを表示

コレクションリストやコレクションページでリッチテキストフィールドの内容を表示するには、リッチテキスト要素を追加して、このフィールドに接続します。

この手順は次の通りです。

コレクションリストまたはコレクションページでリッチテキスト要素を追加します
表示される「Inner Text Settings」で、「Get text from」チェックボックスにチェックを入れます
フィールドドロップダウンから、参照するリッチテキストフィールドに接続します

また、テキスト要素を選択し、キャンバス上の要素ラベルの横にある歯車アイコンをクリックするか、設定パネル（ショートカット D）にアクセスすることで、「Inner Text Settings」にアクセスできます。

‍

リッチテキストフィールドにネストされた要素をスタイリング

見出し、リスト、リンクなど、リッチテキストに入れ子になっている各要素に特定のスタイルを設定することができます。これは、リッチテキスト要素をリッチテキストフィールドに接続する前に行います（接続した後も一時的に「Inner Text Settings」のチェックボックスを外して、スタイリングすることができます）。

一言メモ

リッチテキストのスタイリングはPC画面でも重要ですが、特にレスポンシブ対応で重要になります。
特に、画像はデフォルトだとコンテンツ枠からはみ出たり、リンクや見出しが画面外にはみ出てしまったりします。
従って、リッチテキストを実装する場合は、レスポンシブも必ず確認し、まとめて設定することをおすすめします。

‍

リッチテキストフィールドを使用したコレクションリストのフィルタリング

リッチテキストフィールドを使用してコレクションリストの表示に条件を付けることができます。

設定の手順は下記の通りです。

フィルタリングしたいコレクションリストを選択します
要素設定パネル（ショートカット D）に移動します
「Collection List Settings」の下にある「Filter」をクリックします
最初のドロップダウンで、参照するリッチテキストフィールドを選択します
2番目のフィールドでルールを選択します
必要であれば、値を指定します
「Save」をクリックします

リッチテキストのフィールドと値で使用できるフィルタールールは以下の通りです。

Is Set - このリッチテキストフィールドに何らかの値が設定されているコレクションアイテムを指定します
Is Not Set - このリッチテキストフィールドに値が設定されていないコレクションアイテムを指定します

‍

リッチテキストフィールドを使用した表示/非表示の条件設定‍

リッチテキストフィールドを使用して、コレクションリストまたはコレクションページで個々の要素の表示または非表示に条件を付けて制御することができます。

例えば見出しに条件付き書式を設定して、特定のリッチテキストフィールドにコンテンツがあるときだけ表示させることもできます。

見出しを選択します
要素設定パネル（ショートカット D）に移動します
「Conditional visibility」の下にある「Condition」を追加します
最初のドロップダウンで、参照するリッチテキストフィールドを選択します
2番目のドロップダウンで「Is Set」を選択します
「Save」をクリックします

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

【日本語版Webflow University】 CMS解説_プレーンテキストの概要

この投稿はWebflow社が提供する「Plain text field overview」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/plain-text-field

‍

Webflow CMSでコレクションフィールドの1種として使用できるプレーンテキスト（Plain text）は、見出し、インラインスタイル、インラインメディアなどの書式設定を必要としない基本的なテキストとして使用できます。

‍

プレーンテキストフィールドは、コレクションアイテムで使用する短いテキストブロックまたは短いパラグラフ用のフィールドです。プレーンテキストフィールドを使用して、コレクションリストをフィルタリングしたりソートしたり、コレクションページまたはリストで表示/非表示切り替えることもできます。

CMSの複数行プレーンテキストフィールドでは、1行のプレーンテキストフィールドに収まらないテキストを複数行（改行可能なテキスト）にわたって入力し、保存、編集することが容易にできます。ブラウザ上では、複数行テキストもプレーンテキストとして、1つの要素に内包されて表示されます。

CMSのコンテンツにインラインスタイル（改行を含む）を追加する場合は、プレーンテキストではなくリッチテキストフィールドを使用してください。

‍

一般的な使用方法

書式を必要としない短文テキスト
名前やタイトル
チームメンバーの経歴
製品の簡単な説明
イベントの簡単な説明
ブログや記事のサマリー

プレーンテキストは、コラボレーターが行える書式設定を制限したい場合に効果的です。リッチテキストとは異なり、プレーンテキストではインラインでのスタイル指定ができないため、テキストの大きさが変わったり、メディアが入ったりしません。

‍

レッスン概要

プレーンテキストフィールドの作成
プレーンテキストの表示方法
プレーンテキストフィールドを使用したコレクションリストのフィルタリング
プレーンテキストフィールドを使用したコレクションリストのソート
プレーンテキストフィールドで表示/非表示を制御

プレーンテキストフィールドの作成

プレーンテキストフィールドは、新規または既存のコレクションに追加することができます。コレクション設定で、「＋Add New Field」をクリックし、「Plain Text」フィールドを選択します。

フィールドを保存する前に、テキストフィールドの種類を指定できます。また、このフィールドに許可される最小文字数、最大文字数を設定することができます。また、他のフィールドと同様に、ヘルプテキストを追加たり、フィールドが必須かどうかを指定することができます。

‍

テキストフィールドの種類

プレーンテキストフィールドを使用すると、短いテキストブロックまたは1つの短い段落をコレクションアイテムに追加することができます。テキストフィールドのタイプを設定することで、テキストフィールドのタイプと機能を指定することができます。

「Single-line」（短いテキスト用）
「Multiple-line」（長いテキスト用）

これにより、CMSパネルとエディターでのテキストフィールドの表示方法が変更されます。

‍

プレーンテキストの表示方法

プレーンテキストフィールドは、任意のテキスト要素に接続することができます。

その手順は以下の通りです。

コレクションリストまたはコレクションページでテキスト要素を追加します
表示される「Settings」ウィンドウで「Get text from」チェックボックスにチェックを入れます
フィールドドロップダウンから、接続したいプレーンテキストフィールドを選択します

これらの設定には、テキスト要素を選択し、キャンバス上の要素ラベルの横にある歯車アイコンをクリックするか、設定パネル（ショートカット D）を開いてアクセスすることもできます。接続を解除するには、「Get text from」チェックボックスのチェックを外します。

‍

プレーンテキストフィールドを使用したコレクションリストのフィルタリング

プレーンテキストフィールドを使用してコレクションリストの表示に条件を付けることができます。

設定の手順は下記の通りです。

フィルタリングしたいコレクションリストを選択します
要素設定パネル（ショートカット D）に移動します
「Collection List Settings」の下にある「Filter」をクリックします
最初のドロップダウンで、参照するプレーンテキストフィールドを選択します
2番目のフィールドでルールを選択します
必要であれば、値を指定します
「Save」をクリックします

プレーンテキストのフィールドと値で使用できるフィルタールールは以下の通りです。

Equals - このルールに指定した値と等しいプレーンテキスト文字列を持つコレクションアイテムを指定します
Does Not Equal - このルールに指定した値と等しくないプレーンテキスト文字列を持つコレクションアイテムを指定します
Is Set - このプレーンテキストフィールドに何らかの値が設定されているコレクションアイテムを指定します
Is Not Set - このプレーンテキストフィールドに値が設定されていないコレクションアイテムを指定します

一言メモ

「Is Set」と「Is Not Set」は、デフォルトで必須項目です。したがってデフォルトの「Name」テキストフィールドでは利用できません。

デフォルトの項目はこうした制限があるため、当社では「Name」フィールドは管理用の項目として扱い、ページに表示するようのNameフィールドは追加で作成することが多いです。

‍

プレーンテキストフィールドを使用したコレクションリストのソート

プレーンテキストを使用して、コレクションアイテムを任意のテキストフィールドで並べ替えることができます。（例：A to Z順など）

フィルタリングしたいコレクションリストを選択します
要素設定パネル（ショートカット D）に移動します
「Collection List Settings」の下にある「Sort Order」をクリックします
最初のドロップダウンで、参照するプレーンテキストフィールドを選択します
2番目のフィールドでソート順を選択します
「Save」をクリックします

‍

プレーンテキストフィールドで表示/非表示を制御

プレーンテキストフィールドを使用して、コレクションリストまたはコレクションページで個々の要素の表示または非表示に条件を付けて制御することができます。

たとえば、リンクフィールドと同様にプレーンテキストフィールドに接続されているボタン要素がある場合。2つの条件を設定して、リンクフィールドとテキストフィールドの両方が設定されているときだけ、ボタンがページ上に表示されるようにすることができます。

条件を付けたい要素を選択します
要素設定パネル（ショートカット D）に移動します
「Conditional visibility」の下にある「Condition」を追加します
最初のドロップダウンで、参照するプレーンテキストフィールドを選択します
2番目のフィールドでルールを選択します（例：「Is Set」）
「Save」をクリックします

一言メモ

一方で、必須項目をフィールドに設定しておくことで、こうした表示/非表示の複雑な設定を回避することができます。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

【日本語版Webflow University】エディター機能の概要

この投稿はWebflow社が提供する「Intro to the Editor」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/intro-to-the-editor

動的コンテンツの追加、編集、削除を含む、サイト更新作業全般を簡単に操作できるエディター機能がWebflowには備わっています。

この投稿では、エディター画面へのアクセス方法から、静的コンテンツの編集方法、動的コンテンツの編集方法まで、詳細に解説します。

‍

ウェブサイトを構築・デザインするデザイナー画面が開発者用の機能とするならば、エディター画面（Editor）はコンテンツの編集と管理のみを行う、クライアント用（Webに詳しくない方向け）の機能ということができます。シンプルなインターフェイスのエディターでは、公開されたウェブサイトを管理するためのツールがいくつも用意されています。また、これはプロジェクトの所有者だけでなく、第三者をコラボレーターとして招待することができます。

‍

レッスン概要

エディターへのアクセス方法
エディターツールバーの構造
ページ上での編集
ページ設定の管理
動的コンテンツの作成と管理
変更の表示と公開
フォーム履歴へのアクセス
エディター向けの要素設定

クライアント向けのエディター解説はこちらからご覧ください。

エディターへのアクセス方法

Webflowのエディター画面は、公開されたWebサイトで使用可能になります。Webflowのエディター画面は、公開されたWebサイトを直接操作する形で、サイト内のコンテンツを編集したり、エディターパネルからページやコンテンツの管理を行うことができます。

‍

Webflowの画面からエディターにアクセスする方法

Webflowの画面からエディターにアクセスする方法は3通りあります。

1．ダッシュボード上からのアクセス

2．プロジェクトのSettings画面からアクセス

3．デザイナー画面からアクセス

‍

公開されているサイトからエディターにアクセスする方法

コラボレーターとして招待されたユーザーは、ブラウザのアドレスバーで自分のウェブサイトのURLの最後に「/?edit」を追加することで、自分のウェブサイトのエディターにアクセスできます（例：yourwebsite.com/?edit）。一度ログインすれば、Editorモードで自分のウェブサイトにアクセスすることができます。

後でサイトに戻ったとき、右下に「Edit site」ボタンが表示され、これをクリックするとエディターモードに遷移できます。

エディターを使用するには、ブラウザでサードパーティからのクッキーを受け入れるように設定する必要があることをコラボレーターには伝えておいてください。

‍

エディター画面がサポートされているブラウザ

Webflowは、Chromeの最新版またはSafariのエバーグリーンリリースに加え、様々なアップデートサイクルに対応した2つのバージョンでエディタを公式にサポートしています。また、すべてのブラウザの使用を非公式にサポートしています。

Webflowの機能	IE	Edge	Chrome	Safari	Firefox	iOS Safari	Android用Chrome
Designer画面	×	×	エバーグリーン+2	エバーグリーン+2	エバーグリーン+2(WIP)	×	×
Editor画面	×	エバーグリーン+2	エバーグリーン+2	エバーグリーン+2	エバーグリーン+2(WIP)	×	×
ダッシュボード	×	エバーグリーン+2	エバーグリーン+2	エバーグリーン+2	エバーグリーン+2(WIP)	×	×
公開済みサイト＆コードエクスポート	×	15+	エバーグリーン+3	10.1+	エバーグリーン+3	エバーグリーン+3	エバーグリーン+3
インタラクションの実装	×	12+	エバーグリーン+3	10.1+	エバーグリーン+3	エバーグリーン+3	エバーグリーン+3

* ブラウザーをどの程度サポートしているかについては、使用する機能によって異なります (たとえば、フィルターはEdgeでは部分的にサポートされています)。詳細については、次を参照してください。

CSS は 3d を変換します- インタラクションで使用されます
CSS トランジション- インタラクションで使用
CSS flexbox- スタイルレイアウトパネルで使用
CSS フィルター- インタラクションで使用
CSS グリッド- スタイルレイアウトパネルで使用されます

2022 年 6 月 15 日に、Microsoft は Internet Explorer 11 (IE11) のサポートを正式に終了しました。Webflow で公開されたサイトは、最新の Web ブラウザーでサポートされている業界標準の機能を使用していますが、IE11 でサポートされていない一部の機能は、そのブラウザーで正しく機能しない場合があります。Microsoft による IE11 サポートの詳細をご覧ください。

Webflow は、どのような状況でも IE 9 または IE 10 をサポートしていません。この決定の詳細については、こちらをご覧ください。

‍

エディター画面と公開されているサイト画面を切り替える方法

エディター画面から公開されているサイトの画面を開き、サイトを閲覧することができます。編集モードに切り替えるには、ページの右下にある「Edit site」ボタンをクリックします。

「Back to live site」をクリックすると、公開されているサイトの画面を開くことができます。

‍

エディター画面ログインエラー時のトラブルシューティング

エディターにログインしようとしたときに、エラーメッセージが表示された場合、次のいずれかの修正を試してみてください。

お使いのブラウザがCookieを受け入れているかどうかを確認し、受け入れていない場合は有効にします
エディターからログアウトし、ブラウザーのキャッシュをクリアして再度ログインします
シークレットモードでエディターにログインしてみます
別のブラウザーでログインしてみます
エディターに新しいコラボレーターの招待状を送り、シークレットウィンドウを使って新しいアカウントを作成するように依頼します
どの方法でもうまくいかない場合は、Webflowのサポートにご連絡ください

エディターの共同編集について

デザイナー画面とは異なり、エディター画面では複数人で同時に編集することが可能です。

同じ箇所を2人以上で変更した場合、最後に編集した内容が反映されます。

‍

エディターツールバーの構造

エディターにアクセスすると、エディターツールバー（灰色のバー）が画面下に表示され、メイン画面には実際のウェブサイトと変わらない画面が表示されます。このツールバーから、ページ設定、動的コンテンツ、フォーム、エディターアカウントを管理するための様々なエディターパネルにアクセスすることができます。また、エディターで行った変更を確認したり、公開したりすることもできます。

エディター・ツールバーには、以下のタブとアイコンがあります。

ハンバーガーメニュー - このメニューからは、ダッシュボード、プロジェクト設定、デザイナーに移動できます。このボタンはデフォルトではWebflowのロゴを使用していますが、Proプランではこのロゴをお客様独自のロゴやクライアントのロゴに変更することができます。

「Pages」 - 「Pages」パネルを開き、サイトの静的ページと動的ページのすべてを一覧表示します。ここから、編集したいページを表示したり、ページの設定を管理したりすることができます。

「Collections」 - コレクションパネルには、すべてのコレクションリストが格納されています。任意のコレクションをクリックすると、ツールバーに新しいタブが表示され、そのコレクション内のすべてのアイテムのリストが表示されます。ここでは、任意のアイテムを編集したり、新しいアイテムを作成したりできます。

「Forms」 - フォームパネルを開くと、サイト上で送信されたフォームを確認したりCSVダウンロードしたりできます。

アカウント設定（歯車アイコン） - アカウント設定パネルを開くと、コラボレーターのアカウント情報を編集したり、プロフィール画像をアップロードすることができます。

ヘルプとサポート（ターゲットアイコン） - ヘルプとサポートパネルを開くと、エディタの使用に関するよくある質問を確認することができます。

ログアウト（右矢印アイコン） - エディターからログアウトできます。

「Back to live site ボタン」 - エディタモードからライブサイトモードに切り替わり、サイト訪問者が見るのと同じようにサイトを見ることができます。

保存 - すべての変更は、エディターに自動的に保存されます。左下の「Saving...」と「Saved」のステータスがこれを示しています。

変更履歴 - 右下の「Publish」ボタンの横に、「Unpublished Change（未公開の変更）」の数が表示されます。「Unpublished Change」をクリックすると、未公開の変更箇所やコレクションアイテムが表示され、どのコラボレーターが変更したかも確認することができます。

「Publish（公開）ボタン」 - エディターで行った全ての変更を公開することができます。

‍

ページ上での編集

ページの編集作業は、エディターを使って直感的に行うことができます。さまざまな要素にカーソルを合わせると、編集可能な要素の右上に編集アイコンが表示されます。このアイコンをクリックすると、要素ごとに指定の編集ができます。

一言メモ

一部のスタイルと、カスタムコードで組み込んだ要素はエディター画面に表示されない場合があります。これは、エディター画面の仕様です。

‍

テキストの編集・書式の設定

編集可能なテキスト要素にカーソルを合わせると、テキスト要素の周りに薄いグレーのアウトラインが表示され、右上に鉛筆のアイコンが表示されます。ボックス内をクリックすると、テキストを編集することができます。

また、単語やフレーズを選択し、表示されるフローティングツールバーから書式設定を選択することで、書式を設定することができます。

リッチテキスト要素では、メディアの追加、リストの作成、スタイル設定、テキストのさらなる書式設定など、さまざまなことが可能です。

‍

画像の差し替え

サイトに掲載している画像の入れ替えも可能です。置き換えたい画像の上にカーソルを置き、画像アイコンをクリックするだけです。あなたのコンピューターから新しい画像を選択し、アップロードすることができます。

一言メモ

画像に施される設定は、差し替え前の画像に設定した内容を踏襲するため注意が必要です。例えば、横長の画像を入れ替える場合、元画像に近い縦横比の画像の方が綺麗に表示される場合が多いです。

‍

ボタンの編集

ボタン要素を編集するには、ボタンにカーソルを合わせ、右上に表示される設定アイコンをクリックします。

設定には2つのオプションがあります。

「Edit link settings」 - ボタンのリンクを更新することができます
「Edit text」 - ボタンのテキストを変更することができます

‍

ページ設定の管理

各ページの「Settings」では、SEOメタタイトルやメタディスクリプション、Open Graphタイトルやディスクリプション、Open Graph画像などのSEOにおける重要なページ設定を管理することができます。また、静的ページのパスワード保護設定や、コレクションページのRSSフィード設定も管理することができます。

‍

各ページの「Settings」へのアクセス方法

エディターパネルで「Pages」タブを開きます
リスト内のページにカーソルを合わせます
表示された「Settings」ボタンをクリックします

‍

検索バーからページ名で検索を掛けることもできます。

‍

ページ自体をクリックすると、該当するページが開き、ページ上のコンテンツが編集できるようになります。

‍

動的コンテンツの作成と管理

動的コンテンツを含むWebサイトを構築している場合、エディターの「Collections」タブにアクセスできます（WordPressにおける投稿機能のようなものです）。コレクションパネルには、すべてのCMSコレクションが表示されます。コレクションをクリックすると、コレクション名と同じタイトルの新しいタブが開きます。このタブには、そのコレクション内のすべてのコレクションアイテムが含まれます。

‍

コンテンツを作成・編集する方法

既存の項目をクリックして編集したり、「＋New」ボタンをクリックして新しく投稿したいアイテムの情報を登録することができます。

‍

内容の入力やフィールドの更新が終わったら、次の操作ができます。

Create / Save:作成しているアイテムが新規の場合は作成、既存の場合は保存ができます。このアイテムは別の操作でサイトを公開した際に、一緒に公開されます。

Publish:サイト全体の公開とは別に、このアイテムだけを公開することができます。

Save as Draft:いわゆる下書き保存です。登録内容は保存されますが、公開はされません。

Cancel:これまで登録した内容を破棄します。

Schedule:公開するタイミングを指定できます。公開予約です。

‍

アイテム名の右側にあるアイコンをクリックすると、そのアイテムのコレクションページを表示することができます。これにより、パネルが折りたたまれ、現在閲覧しているアイテムのページがブラウザ上に表示されます。これによって、プレビューしながら編集することができます。

‍

「←」ボタンをクリックするとアイテム一覧に戻ります。

‍

コンテンツの管理方法

コレクションパネルでは、すべてのコレクションアイテムとそのステータスを確認することができます。複数のアイテムの削除、アーカイブ、ステータスの変更を一度に行うことができます。

「Select...」ボタンをクリックします
管理したい項目を選択します
上部のツールバーから必要なアクションを選択します

‍

開いたタブは「✕」ボタンで閉じることができます。

‍

変更の表示と公開

編集をすべて行った後は、「Publish」ボタンをクリックすることで、編集内容を公開できます。

‍

サイトで編集を確認する

エディターでの作業中は、エディターパネルがWebサイトの大部分を覆います。エディタパネルを折りたたんでウェブサイトを表示するには、上部にある「View Site」ボタンをクリックします。

‍

このビューでは、通常と同じようにWebサイトを閲覧し、任意のページに変更を加えたり、確認したりすることができます。

‍

公開（「Publish」）

エディターで行った変更は、編集したコレクションアイテムを個別に公開するか、「Publish」ボタンを押してすべての変更を公開するまで、実際のサイトには表示されません。青い「Publish」ボタンを1回クリックすると、ここまで行った変更内容がリストで表示されます。

‍

一言メモ

エディターで公開すると、ステージングドメイン（テスト環境）とカスタムドメイン（本番環境）の両方にサイトが公開されます。公開する環境を指定したい場合はデザイナー画面もしくはプロジェクトセッティングスから公開を行ってください。

‍

フォーム履歴へのアクセス

Webサイトにフォームを実装している場合、エディターには「Forms」タブがあります。ここでは、サイト閲覧者が送信したフォームの基本的な情報を見ることができます。また、フォームの全情報をCSVダウンロードしてみることもできます。

‍

エディター向けの要素設定

デフォルトでは、エディターにアクセスできる人であればだれでも、どの要素に対しても編集作業ができます。一方で、デザイナー画面で任意の要素をエディターでは編集できないようにすることができます。

あなたとサイトの共同作業者はエディタを使用して本番サイトのすべてのコンテンツを編集できますが、必要に応じて要素を編集不可能にすることができます。

デザイナーでプロジェクトをひらきます
編集不可にしたい要素を選択します
要素設定パネルを開きます
「Collaborators can edit this element」のチェックをはずします

また、ショートカットキー Command＋Shift＋L（Macの場合）、Control＋Shift＋L（Windowsの場合）で切り替えることもできます。

ただし、CMSの要素は編集制限を掛けられません。

一言メモ

Webflowのメンバーシップ機能はエディターでは管理できません。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

【日本語版Webflow University】コレクションページの構成とスタイリング

この投稿はWebflow社が提供する「Structure and style Collection pages」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/structure-and-style-collection-pages

‍

WebflowのCMS機能を使えば、ノーコードでブログやお知らせなどの一覧・詳細ページを制作することができます。

詳細ページは、テンプレートを1つ作っておけば、後はCMSコレクションにデータを投稿していくだけで、詳細ページが自動的に生成されていきます。

このように、CMSコレクションアイテムのデータに応じて、自動的に生成されていくページのことをWebflowでは、コレクションページと呼んでいます。

この投稿では、コレクションページの構成とデザインの仕方について解説します。

‍

レッスン概要

コレクションページの作成方法
コンテンツの追加と接続方法
コレクションページをプレビューする方法
コレクションページへのリンク方法
コレクションページの設定方法

‍

コレクションページの作成方法

CMSコレクションが作成されると、コレクションページも自動的に作成されます。このコレクションページは、ページパネルの「Collection Pages」セクションで選択することができます。コレクションページの横にある紫色のアイコンは、CMSで生成されたページであることを示します。

‍

コンテンツの追加と接続方法

コレクションページは、他の静的なページと同じようにデザイン・構築できますが、そのデザインに動的なコンテンツを取り込むことで、コレクションページの機能を有効活用できます。

‍

静的・動的要素の追加

コレクションリストと同様に、コレクションページにドロップされた要素は、CMSコレクションからフィールドに接続されるまでは静的要素です。コレクションページは他のページと同様にデザインできますが、このページはすべてのコレクションアイテムのテンプレートとして機能します。

以下の手順で、デザイン内のさまざまな要素をコレクションフィールドに接続することができます。

コレクションページでエレメントを選択します
設定アイコンをクリックします（または要素設定パネルに移動します - ショートカット：D）
コレクションから取得するコンテンツをチェックします
ドロップダウンを開き、コンテンツを取得するコレクションフィールドを選択します

ある要素とフィールドを接続すると、コレクションページごとにすべてのアイテムからそのフィールドに対してコンテンツを取得する様になります。これによって、CMSコレクションに登録したアイテムごとに自動的にページが生成できるわけです。

一言メモ

静的コンテンツは青枠で、動的要素は紫枠で表示されます。

‍

コレクションページをプレビューする方法

コレクションページを編集しているとき、コレクション内のアイテムの1つだけを編集しているように見えます。しかし、実際には、テンプレートを編集しているため、他のすべてのページを同時に編集していることになります。

トップバーのドロップダウンを使って、編集するページが参照するコレクションアイテムを切り替えることができます。コレクションページのドロップダウン上部の検索バー、またはクイック検索バーにページ名を入力すると、特定のアイテムのページを表示することができます。

一言メモ

Shift+Option（WindowsではShift+Alt）を押しながら、キーボードの左右の矢印を押すと、コレクションアイテムがリストの次または前のアイテムに切り替わります。

‍

コレクションページへのリンク方法

コレクションページには、他のコレクションページまたはコレクションリストからリンクさせることができます。次の手順でコレクションリストからリンクを設定できます。

コレクションリストを追加します
コレクションに接続します
ボタン、またはその他のリンク要素をコレクションリストに追加します
リンク要素を選択した状態で、歯車のアイコンをクリックします(または要素設定パネルに移動します)
紫色のコレクションページリンクオプションを選択します
「Current {CMSコレクション名}」を選択します

これにより、コレクションリスト内の各ボタンは、それぞれのアイテムに対応するコレクションページに遷移するリンクを保持します。

‍

コレクションページの設定方法

コレクションページ設定では、タイトルタグ、メタディスクリプション、

SEO meta title & description、オープングラフ・タイトル＆description、RSS、およびコレクションページテンプレート用のカスタムコードを設定することができます。ただし、静的なページ設定とは異なり、コレクションページ設定は動的な値を持つことができ、コレクションアイテムページごとに表示する情報を変えることができます。

ページパネルからコレクションページテンプレートの歯車マークをクリックすることで、コレクションページ設定を表示できます。

‍

動的SEO設定

ページタイトルと説明文のテンプレートは、コレクションフィールドを使用して定義することができます。また、プレビューボックスで検索エンジンの結果ページ（SERP）でどのように表示されるかを確認することができます。

‍

動的オープングラフ設定

ここでは、Facebook、Twitter、LinkedIn、Pinterest、Google+などのSNSでコレクションページへのリンクを共有する際に表示される情報を設定することができます。コレクションフィールドを使用すると、各ページのアイテム内の情報を引用してくれるため、ページ固有にオープングラフ設定を行うことができます。

‍

RSSフィードの設定

コレクションページ設定で、コレクションのRSS2.0 フィードを有効にすることができます。これにより、RSSリーダーのユーザーが購読できるフィードが発行され、新しいコレクションアイテムを発行したときに更新を取得することができます。

ここでは、フィードの設定を定義することができます。コレクションフィールドを使用して、RSSチャンネルのタイトル、説明、その他の設定のための動的なテンプレートを作成することができます。また、ページ設定内でフィードのプレビューを見ることができます。そして、RSSのURLをコピーして他のアプリで使用したり、ウェブサイト上にリンクを追加することもできます。

‍

カスタムコード

コレクションページテンプレートの<head>タグまたは</head><body>タグに、カスタムコードやスクリプトを追加することができます。これは、すべてのコレクションページに適用されます。また、このコードに、コレクションアイテムページごとに一意の値を持ちたい情報が含まれている場合、コード内のその値をコレクションフィールドに置き換えることができます。値を選択し、カスタムコードテキストフィールドの右上にある紫色の「+ Add Field」をクリックするだけです。

一言メモ

カスタムコードによって記述されたスクリプトなどは、サイトをパブリッシュして初めて確認できます。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍