コードエクスポート - Webflow ヘルプ
有料のワークスペースプランでは、サイトのHTML、CSS、JavaScript、アセットをエクスポートしてコードをバックアップしたり、クライアントに提供したり、好きな場所にホストしたりできます — 帰属表示は不要です。
コードをエクスポートする方法
- Webflowでサイトを開く
- メインメニュー > コードエクスポート(左上の「W」ロゴをクリックしてメインメニューを開く)、またはShift + Eを押す
- ZIPを準備をクリック
- ZIPファイルをダウンロード
圧縮HTMLをエクスポートする方法
HTMLを圧縮することで、空白、コメント、ブラウザがページを読み込むのに必要ないコード要素を削除し、ページの読み込み時間を改善できます。圧縮HTMLをエクスポートするには:
- Webflowでサイトを開く
- メインメニュー > コードエクスポート(左上の「W」ロゴをクリック)、またはShift + Eを押す
- Command + O(Macの場合)またはControl + O(Windowsの場合)を押す
- エクスポートウィンドウに表示されるHTMLを圧縮チェックボックスをチェック
- ZIPを準備をクリック
- ZIPファイルをダウンロード
エクスポートされたファイルに含まれるもの
ダウンロードしたZIPファイルには、サイトのすべてのページ、スタイル、スクリプト、画像が含まれています。
- CSSフォルダには、サイトのスタイルが含まれた3つの.cssファイルがあります。 - サイトのカスタムスタイルを含むCSSファイル(例:
your-site-name.css) - Webflowのレイアウトコンポーネントの共通基本スタイルを含むwebflow.css- ブラウザがすべての要素をより一貫して表示するためのnormalize.css - JSフォルダには、サイトのすべてのJavaScriptファイルがあります。フォーム、ナビゲーションバー、スライダー、タブ、インタラクションなどの要素や機能はこれらのファイルに依存しています。これらのファイルを削除すると、ページは正しく表示されるかもしれませんが、期待通りに動作しません。
サイトのアセットパネルにアップロードされたすべての画像を含む画像フォルダ
サイトのすべてのページ(空のコレクションテンプレートページを含む)の.htmlファイル
知っておくべきこと
Webflowがエクスポートするコードのサンプルを見たい場合は、ホームページのソースコードを確認してください。すべてWebflowで構築されています!
エクスポートされたファイルに含まれないもの
以下の機能とコンテンツはエクスポートされたコードには含まれず、エクスポートされたウェブサイトでは期待通りに機能しません。
- CMSのコンテンツと機能(コレクションアイテムとコレクションリストを含む)
- ユーザーアカウントのコンテンツと機能(ユーザーとアクセスグループを含む)
- Eコマースのコンテンツと機能(製品とチェックアウトを含む)
- サイトおよび/またはページのパスワード保護
- フォーム送信の処理
- 既存のフォーム送信(別途エクスポート可能)
- フォーム内のreCAPTCHA要素
- サイト検索
- ローカライズされたコンテンツ(サイトの主要なロケールのページ、要素、コンテンツのみが含まれます)
- コードコンポーネント
FAQとトラブルシューティングのヒント
クラス名の前に「w-」プレフィックスがあるのはなぜですか?
Webflowは、他のコードフレームワークとの競合を避けるために、コンポーネント固有のクラスに「w-」を付けています。
サイトのコードの一部だけをエクスポートすることはできますか?
現時点では、エクスポートする内容を選ぶことはできません。エクスポート可能なサイトのすべての部分が各エクスポートに含まれます。
エクスポート後にコードを編集できますか?
エクスポート後にコードを編集できます。エクスポートされたファイルに手動で変更を加えると、一部のWebflowコンポーネントが壊れる可能性があります。
エクスポートされたページのURLから.html拡張子を削除できますか?
エクスポートされたページから.html拡張子を削除したい場合は、.htaccessファイルを使用して削除できます。
サイトを外部でホストする場合、Webflowへの帰属を提供する必要がありますか?
いいえ、サイトを独自のサーバーで動作させるためにWebflowへの帰属を提供したり、Webflowプランを維持したりする必要はありません。
エクスポートされたコードにCMS、メンバーシップ、Eコマースコンテンツが含まれていますか?
いいえ。CMS、ユーザーアカウント、Eコマースコンテンツ(データベース)はエクスポートされたコードに含まれていません。コレクションリストは空の状態を表示します。
エクスポートされたコードにローカライズされたページ、要素、コンテンツが含まれていますか?
いいえ。ローカライズされたページ、要素、コンテンツはエクスポートされたコードに含まれていません。エクスポートされたコードにはプライマリロケールのみが含まれます。
コードをエクスポートした後もパスワード保護されたページは保護されますか?
いいえ。コードをエクスポートした後、サイト上のパスワード保護されたページは保護されません。パスワード保護を期待通りに機能させるには、Webflowでホスティングする必要があります。
コードを他の場所でホスティングした場合、すべての要素は機能しますか?
CMS、ユーザーアカウント、Eコマースのコンテンツと機能、ローカライズされたページ、要素、コンテンツはエクスポートされたコードには含まれません。これらの機能はホスティングが必要です。また、サイト検索やフォーム(ファイルアップロードやreCAPTCHAを含む)は、GDPRに準拠するため、エクスポートされたサイトでは機能しません。
サイトをエクスポートしたときにローカルでLottieアニメーションが動作しないのはなぜですか?
セキュリティ上の理由から、LottieのJSONファイルはローカルファイルシステムから読み込まれないため、サイトをローカルで読み込んだときにLottieアニメーションは表示されません。期待通りに動作させるにはウェブサーバーが必要です。