ウェブサイト間で複製して挿入する

この指導セッションでは、以下のことを理解します。

1. ウェブサイト間で複製して挿入する方法
2. クラス名とスタイルの競合を防ぐ戦略
3. インタラクション名とアクションの衝突を避けるためのアプローチ
4. 例外や特殊なケースへの対処方法

ウェブサイト間で複製および挿入する方法

任意の Web サイトから任意の要素または要素のグループを複製し、別のサイトに挿入することができます。基礎となる要素、デザイン、リソース、構成、機能はすべて保持されます。

別の Web サイトで要素とモジュールを利用するには:

1. デザイナーで最初のサイト（複製元のサイト）にアクセスします。
2. 要素を複製するには 指示 + Ｃ (Mac) または コントロール + Ｃ （ウィンドウズ）
3. デザイナーで2番目のウェブサイトにアクセスし、挿入したい要素を選択します。
4. 要素に挿入する 指示 + 五 (Mac) または コントロール + 五 （ウィンドウズ）

また、挿入プロセスを逆にするオプションもあります。 指示 + ず (Mac) または コントロール + ず （ウィンドウズ）。

重要な: 読み取り専用モードの Web サイトからの複製は実行できません。 

問題解決

「ネイティブ クリップボード データを読み取れませんでした」または「クリップボードが空です」というメッセージが表示された場合は、次の点を確認してください。

• 読み取り専用モードからではなく、デザイナーのライブ サイトから要素を複製しています。
• デバイスのデフォルトのコピー/貼り付け機能を上書きするシステム設定がありません。具体的には、 指示 + Ｃ そして 指示 + 五 (Mac) または コントロール + C そして コントロール + V (Windows) はデフォルトの機能を保持し、カスタム ショートカットによって変更されません。これらのショートカットにカスタム機能が割り当てられている場合、Web サイト間で複製して挿入することが目的であれば、必ずそれらを削除してください。

クラス名とスタイルの衝突を防ぐためのアプローチ

ターゲット サイトとソース サイトに類似したクラスがあり、競合が発生する場合、これを管理するためのいくつかの戦術があります。

同じクラス名、多様なスタイル

ソース Web サイトとターゲット Web サイトの両方のクラスが同じ名前を共有しているが、スタイルが異なるシナリオでは、Webflow は挿入された要素のクラス名に数字を追加して変更します (例: 「classname 1」、「classname 2」など)。

同一のクラス名、同一のスタイル

両方のサイトに、一致する名前（付加された番号を無視して、例：「クラス名」、「クラス名 2」、「クラス名 3」など）と同じスタイルを持つクラスが存在する場合、Webflow は挿入されたクラスをターゲット サイトの既存のクラスと結合します。これにより、宛先 Web サイトでの繰り返しスタイルの数が減ります。

たとえば、サイト A のクラス「Button」のボタンをサイト B に挿入するとします。サイト B には、サイト A の「Button」をミラーリングした「Button 3」というクラスがあります。Webflow は同一のクラスを認識し、挿入されたボタンにサイト B の「Button 3」クラスを適用します。

スタイルの衝突

別の要素に挿入すると、挿入した親要素 (上位要素など) からの継承により、コピーされた要素のスタイルに影響する可能性があります。 

コピーされた要素が以前はテキスト配置を使用して中央揃えされる要素 (中央揃えのテキストなど) 内にあったが、受信側の要素が子要素を右揃えにする対照的なスタイルである場合、貼り付けられた要素は挿入時に右揃えになります。

インタラクション名とアクションの競合を防ぐためのアプローチ

Webflow は、同一のインタラクションを統合しようとしますが、複雑さが生じる可能性があります。ここでは、インタラクションの競合に対処する方法について詳しく説明します。

要素の活性化

インタラクション パネルの上部のセグメントでは、ホバーやクリックなど、要素と対話するときにアニメーションを開始する要素アクティベーションを追加できます。

複製された要素に接続すると、これらのアクティベーションはコンテンツを貼り付けるサイトに統合されます。

同じ名前、異なる行動

同じ 名前 貼り付けるのと同じだが、異なる 行動貼り付けられたインタラクションの名前に、重複を示す数字の接尾辞が追加されます (例: 「インタラクション名 2」、「インタラクション名 3」など)。

同じ名前、同じ行動

クラス名の競合解決と同様に、宛先サイトでのインタラクションが同じ 名前 貼り付ける側と同じで、付加された数字（「インタラクション」、「インタラクション2」、「インタラクション3」など）は無視し、 行動、それらを同じものとして識別し、貼り付けられたインタラクションを宛先の既存のインタラクションと結合します。

ページトリガー

インタラクション パネルの下部のセグメントでは、ページ トリガーを追加して、ページが読み込まれたときなど、ページの状態が変化したときにアニメーションを開始できます。

ページ トリガーは、要素トリガーとは異なり、サイトに要素を貼り付けるときには含まれません。

特殊なケースと境界シナリオ

特定のシナリオでは、コピーされた特定の設定またはコンテンツがターゲット サイトに転送されない場合があります。

パーソナライズされたフォント

カスタマイズされたフォントが設定されたテキスト要素をコピーして貼り付けた場合、新しいサイトで元のフォントが設定されていない場合は、デフォルトのフォントが使用されます。

カスタマイズされたフォントを保持したい場合は、要素を貼り付ける前に新しいサイトに必ず追加してください。カスタム フォントのインポートの詳細については、こちらをご覧ください。

外部コンテンツ編集者のコンテンツ

Microsoft Word、Google Docs などのサードパーティのコンテンツ エディターでは、Webflow CMS 内のリッチ テキスト フィールドにコピーするとコンテンツが破損する可能性があり、手動で再フォーマットする必要があります。

Google Docs は、追加の書式設定なしで CMS のリッチ テキスト フィールドにクリーンな貼り付けオプションを提供し、さまざまなコンテンツ要素の適切なマークダウンを保証します。

リンクの接続設定

別のサイトから要素を貼り付けると、それらのセクションが同時に貼り付けられない限り、サイト内の特定のページまたはセクションに誘導するリンク設定がリセットされます。

フォーム通知設定

コピーされたフォーム要素は、宛先サイトのフォーム通知設定を継承します。詳細については、フォーム通知設定を参照してください。

マップAPI認証

あるサイトから別のサイトにマップ要素を組み込むには、宛先に Google Maps API キーを追加する必要があります。その他の設定は、ソースから新しいサイトに自動的に移行されます。

継承されたテキスト書式

コピーされたテキスト要素は、通常どおり親要素から書式設定を継承します。したがって、コピーされた要素に新しいサイトの親レベルで設定された特定のスタイルがない場合、それらのスタイルが貼り付けられた要素に適用されます。

基本的なHTMLタグ

「すべての H1 見出し」や「すべての段落」に適用されているような、ソース サイトの要素の基本 HTML タグに関連付けられているスタイルは、コピーが新しいサイトに貼り付けられるときに除外されます。

CMSデータとの接続

コレクション リスト全体を貼り付けると、コレクション データは新しいサイトに転送されないため、空のコレクション リスト要素が生成されるだけです。 

ただし、構築したコレクション アイテムのレイアウトを再利用するための実用的なソリューションを次に示します。 

1. 統合する divブロック に コレクションアイテム
2. すべての要素を整理する コレクションアイテム 下 divブロック
3. コンテナをコピーして貼り付ける divブロック 新しいサイトへ

貼り付けられた要素は CMS データにリンクされません (たとえば、H1 は単純な「見出し」に変換されます) が、すべてのクラスは複製され、新しいサイト全体で再利用できるようになります。コレクション ページのレイアウトを再利用する場合にも、この手法をご利用ください。

ビルディングブロック

元のサイトでビルディングブロックとして保存された要素は、宛先サイトではその状態を維持しません。ビルディングブロックとして再確立するには、デザイナーボードで要素を選択し、 指示 + シフト + あ (Macの場合) または コントロール + シフト + あ (Windows の場合)。

色の定義

ソースサイトで変数として指定された色を持つクラスを貼り付けると、宛先サイトではその色が変数として認識されません。

プロのヒント: クラスを埋め込んだ後、そのクラスを複数の要素で使用する場合は、必ず色を変数として定義してください。色変数の詳細については、こちらをご覧ください。

重要： 元のサイトからアセット URL (画像、ビデオ、トピックなど) を参照してコピー/貼り付けされた要素は、元のサイトが削除された場合はアクセスできなくなります。