ノーコードでビジネスマッチングサイトを作成:協力企業の掲載の仕方【Webflow】

Webflow
CMS
Web
ノーコード

今回は、協力企業の一覧を作る方法について説明します。

協力企業だけではなく、メディア掲載実績など、会社のロゴ一覧を掲載する際に使える方法です。


まずはNavigatorでHTMLの中を見ていきます。

Section>Container>div blockの中に heading(今回の場合は「協力企業」)とCollection List wrapperを入れます。


今回Collection List wrapperを入れる理由は、デザイナー以外の人(実際のサイト運用者)でも、簡単に協力企業を足したり消したりできるようにするためです。

Collection List wapperを入れると自然にCollection Listが入っている状態になるので、Link blockと、image(画像)のカラムを追加しましょう。


次に、Collectionの中身を見てみましょう。

Collection fieldsのcustom fieldsで、Logo→協力企業のロゴ画像、URL→協力企業のURLを設定します。


💡ヒント①:Collection Listにclassを付ける

Collection Listにclassを付け(partner div)、レイアウトをflex lays out(フレックス)/ Horizontal(横並び)/Align,Justifyともにcenter(中央寄せ)にしました。

classを設定しておくことで、現時点で協力企業は1つなのでサイトの真ん中表示になるように、そして2つや3つに増えた時も真ん中から均等に並べられるようになります。


💡ヒント②inline blockを使用する

Collection itemにもclassを付け(inline block)、Link Blockを選択してLink Settingsでさっき設定したCollectionからURLを、image(画像)を選択して同じようにCollectionからLogoを設定する。


ロゴ画像は高さで揃えるのがおすすめ。今回は40pxに設定しました。

プレビューすると、ちゃんと反映されています。

ノーコードで簡単に協力企業の一覧を作ることが出来ました!


協力企業やメディア掲載実績など、会社のロゴ一覧をサイト表示するときのやり方についてです。

関連チュートリアル