ヘッドタグとボディタグ内のパーソナライズされたコード

サイト全体または個々のページに適用されるカスタム コードとスクリプトを追加します。

Core、Growth、Agency、Freelancer ワークスペースをお持ちの場合、または Web サイトにアクティブなサイト プランがある場合は、Web サイト全体または特定のページに適用される固有のコードとスクリプトを統合できます。これは、追加の HTML、CSS、および JavaScript を含める場合に役立ちます。 

また、埋め込み要素を利用して、カスタマイズされた HTML コード ブロックを Web サイトのデザインやリッチ テキスト要素に組み込むこともできます。

このチュートリアルでは、次のトピックについて説明します。

  1. サポートされているコード
  2. サイト設定のパーソナライズされたコード
  3. ページ設定のパーソナライズされたコード
  4. FAQと問題解決のヒント

重要: パーソナライズされたコードには、Webflow の基本的な機能と衝突する可能性のある高度な変更が含まれます。したがって、Webflow はパーソナライズされたコードの機能性や完全な互換性を保証することはできません。同様に、当社のサポート チームは、パーソナライズされたコードの設定やトラブルシューティングに関する直接的なサポートを提供することはできません。これらの問題は当社のカスタマー サポート ポリシーの範囲外であるためです。パーソナライズされたコードで問題が発生した場合は、 Webflow フォーラムWebflow コミュニティ全体 (スタッフを含む) が追加の支援とリソースを提供できます。

サポートされているコード

サイトとページ設定内のパーソナライズされたコードの領域は、 HTML, CS、 そして JSサーバー側言語 (Perl、PHP、Python、Ruby など) は、どのコード セクションとも互換性がありません。 

知っておくべき重要なこと: サイト設定のヘッドコードとフッターコードセクションはそれぞれ最大20,000文字まで入力できますが、 <head> タグと </body> ページ設定の タグは、それぞれ最大 10,000 文字まで収容できます。必要なコードがこの制限を超える場合は、別のサーバーに保存し、パーソナライズされたコードでスクリプトを参照できます。サードパーティのツールを使用して、パーソナライズされたコードを圧縮することもできます。</head>

タグ

重要: パーソナライズされたコードに開始タグや終了タグが含まれている場合は、適切な機能を維持するために必ず含めてください。また、 <html>, <body>、 または <head> パーソナライズされたコードにタグを含めないでください。Web サイトやレイアウトが乱れる可能性があります。

リンクタグ: 

鬼ごっこ documentと外部リソース間の接続を確立し、常にコードセクション。 

Metaタグ: 

鬼ごっこ あなたのサイトに関するメタデータを提供し、常にコードセクション。 

スタイルタグ:

鬼ごっこ サイトの追加のCSSスタイルを定義し、常にコードセクション。 

スクリプトタグ:

鬼ごっこ サイトにJavaScriptを埋め込むことができ、 <head> コードセクションまたは終了の前に </body> タグ(つまり</head> フッターコード セクション)。それでも、 <script></script> 終了直前のタグ </body> タグにより、JavaScript が実行される前にサイト ページのすべてのコンテンツが読み込まれるようになり、ページの読み込み速度が向上し、ユーザー エクスペリエンスが向上します。 

重要: 2020年8月から新たに公開されたWebflowサイトには、 jQuery v3.5.1パーソナライズされたコードを使用して他のバージョンの jQuery をインポートすると、サイトで競合や予期しない動作が発生する可能性があります。 

サイト設定のパーソナライズされたコード

ヘッドコード

入力されたパーソナライズされたコード ヘッドコード セクションは終了前に表示されますウェブサイトのHTMLマークアップにタグを追加し、サイト全体に適用されます。 ヘッドコード セクションでは、外部リソースへのリンク、メタデータの組み込み、パーソナライズされたスタイルの利用が可能です。 

知っておくと便利なこと: 外部を含む tags in the of your site may delay page loading speed. Consider adding the “async” or “defer” attribute in the tag to boost performance.

ヘッドタグにパーソナライズされたコードを組み込むには: 

  1. へ移動 サイト設定 > カスタムコード タブ
  2. パーソナライズされたコードを入力してください ヘッドコード セクション
  3. クリック 変更内容を保存

フッターコード

入力したコード フッターコード セクションは終了前に表示されます </body> ウェブサイトの HTML マークアップにタグを追加すると、サイト全体に適用されます。 

ヘッドタグにパーソナライズされたコードを埋め込むには: 

  1. アクセス サイト設定 > カスタムコード タブ
  2. パーソナライズされたコードを フッターコード セクション
  3. クリック 変更内容を保存

重要: パーソナライズされたスクリプトは、公開されたサイトにのみ表示されます。 

ページ設定のパーソナライズされたコード

どのページのパーソナライズコードセクションに埋め込まれたコードも 排他的に そのページに関連し、ウェブサイトの HTML マークアップ内のサイト全体のパーソナライズされたコードの後に表示されます。 

の中に鬼ごっこ

<link>, <meta>、 そして <style></style> タグは常に <head> 鬼ごっこ。 <script></script> タグは <head> タグではなく、スクリプトを終了タグの前に配置します </body> タグは通常、サイトのパフォーマンスを向上させ、サイト訪問者のエクスペリエンスを向上させます。</head> 

知っておくと便利: 外部を含む tags in the of your site may slow down page loading. Consider adding the “async” or “defer” attribute in the tag to enhance performance.

パーソナライズされたコードを追加するには個々のページのタグ: 

  1. デザイナーでサイトを立ち上げる
  2. アクセス ページ設定 コードを組み込む予定のページの
  3. パーソナライズされたコードを入力してください 内部鬼ごっこ セクションの下 カスタムコード 
  4. 変更を保存する
内側Webflow デザイナーのページレベルのカスタム コード設定で「.tag」セクションが強調表示されます。

の前に </body> 鬼ごっこ

ラベルは通常このセクションに属します。 

終了直前にパーソナライズコードを挿入したい場合 </body> 特定のページのタグ: 

  1. デザイナーでウェブサイトにアクセスする
  2. に移動 ページ設定 コードを挿入したいページ
  3. パーソナライズされたコードを入力してください 前に </body> 鬼ごっこ 下の領域 カスタムコード
  4. 変更を保存する
「ビフォー </body> デザイナーのページレベルのカスタム コード設定で「.tag」セクションが強調表示されます。

注記: パーソナライズされたスクリプトは、公開された Web サイトでのみ表示されます。

FAQと解決すべき問題

Web サイトやページレベルのカスタム コードでサーバー側言語を利用できますか? 

カスタムコードを介してサーバーサイド言語(Perl、PHP、Python、Rubyなど)を統合することはできません。サイトとページ設定のカスタムコードは、 HTML, CS で labels, and JS で labels.

特注コードの最大文字数制限を拡張することは可能ですか? 

サイト設定のヘッドコードとフッターコード領域はそれぞれ最大20,000文字まで処理でき、 <head> タグと </body> ページ設定のタグは、それぞれ最大 10,000 文字を処理できます。必要なコードがこの長さを超える場合は、別のサーバーに保存し、カスタム コード内でスクリプトを参照することができます。サードパーティ ツールを使用して、カスタマイズされたコードを圧縮することもできます。</head>

私のカスタムコードが Designer に影響を与えないのはなぜですか? 

カスタムスクリプトは 排他的に 公開された Web サイトには表示されません。予期しない動作を防ぐために、これらはデザイナーで無効になっています。

特注コード機能の問題に関するサポートが必要です! 

コードに適切な開始タグと終了タグが含まれているか、また次のものが含まれていないか再度確認してください。 <html>, <body>、 または <head> タグ。 

2020 年 8 月現在、新しくリリースされた Webflow サイトには jQuery v3.5.1 が付属しています。カスタム コードを含む他の jQuery バージョンをインポートすると、Web サイトで競合や予期しない動作が発生する可能性があります。onClick、onHover などの DOM イベントに影響を与えるスクリプトも、予期しない動作につながる可能性があります。

特注コードは高度な変更であり、Webflow の基本的な操作と衝突する可能性があることに留意してください。したがって、Webflow はカスタマイズされたコードの機能性や完全な互換性を保証することはできません。

当社のカスタマーサービスチームは、カスタムコードの設定や問題解決を直接支援することはできません。これらの問題は当社のカスタマーサービスガイドラインの範囲外です。カスタムコードで問題が発生した場合は、 Webflow フォーラムWebflow コミュニティ全体 (スタッフを含む) が追加の支援とリソースを提供できます。

ユアン・マック