【日本語】WebflowチュートリアルStep4(画像付き)

はじめに

この記事は「WebflowチュートリアルStep3(画像付き)」の続きになります。
このチュートリアルは2021年1月10日に書いたものです。
現在のチュートリアルとは違う箇所があるかもしれませんが、ご容赦下さい。
また、画像が多いため、Step毎にチュートリアルの記事を分けようと思います。

ステップ1
ステップ2
ステップ3

チュートリアル

Step4

作成したサイトをプレビューしてみましょう

左上にある目のアイコンをクリックします。

すると、自分で作成したサイトのプレビューが表示されます。
もちろんスマホのページも確認する事ができます。

また、プレビュー画面の右に引っ張る事ができるアイコンがついているので、それをドラッグすることで、任意の画面幅で作成したサイトを確認する事ができます。

サイトをデプロイ(ネットに公開)してみよう

この段階で、サイトに登録したメールアドレスにアカウント認証のメールが届いていると思います。

メールを開いて認証をすると、「おかえりなさい」と言われるので、そのまま「Resume Tutorial」ボタンをクリックしてチュートリアルを再開します。

この画面に戻ってくると思います。

右上の「Publish」ボタンを押します。

デプロイ先を選ぶ事ができるのですが、チュートリアルではWebflowが提供しているドメインを使用します。
なので、このまま何もせずに「Publish to Selected Domains」をクリックします。

すると、ボタンが緑色に変わって「Publish Successfully」になっていると思います。
これでネットに公開する事ができました。
urlの右にあるアイコンをクリックして確認してみましょう。

このアイコンです。

以上でWebflowのチュートリアルはおしまいです。

新しく作るかそのまま編集するか

また、チュートリアルが終わったら、このような画面になっていると思いますが、新しくサイトを作成したい場合は「Create new project」をクリック。
このまま続けてサイトの編集を行いたい場合は、「Keep building」をクリックして作業を進めてください。

また、プレビューモードを解除したい場合は、再度左上の目のアイコンをクリックすることで解除する事ができます。