リソースセクション

リソース セクションでは、Web サイトのリソースをすべてアップロードして整理できます。このセクションは、デザイナーの左側のツールバーにあります。この領域では、リソースをアップロードし、フォルダーに分類し、タイプ (画像、ドキュメント、または Lottie) 別にフィルターし、Webflow キャンバスにシームレスにドラッグ アンド ドロップできます。

このチュートリアルでは、次の点について理解を深めることができます。

1. リソースの追加
2. 互換性のあるファイル形式
3. 命名リソース
4. リソースの活用
5. リソースの削除
6. リソースのフィルタリングと整理

リソースの追加

注記： リソースセクションにアップロードされたファイルは 制限なし つまり、ファイルは公開され、検索可能ですが、ファイルが公開されている Web ページにリンクされていない限り、検索エンジンによって自動的にインデックス化されることはありません。リソースのプライバシーの詳細については、Webflow を参照してください。

サイトに画像やファイルを含めるには、次の 3 つの方法があります。

• リソースセクションの「クラウド」アップロードアイコンをクリックする
• リソースをリソースセクションに直接ドラッグアンドドロップする
• リソースをキャンバスに直接ドラッグアンドドロップする

注記： 必要な使用権および配布権を持つファイルのみをアップロードしてください。

リソースセクションにリソースをアップロードする

リソース セクションにリソースを追加するには:

1. 「リソース左のツールバーの「」アイコン
2. クリック "雲” アップロードアイコン
3. デバイスから1つまたは複数の画像またはファイルを選択します

リマインダー： リソース セクションに既に存在するファイルを別の名前でアップロードする場合、ファイルが変更されていない (つまり、サイズや寸法が変更されていない) 場合は、元の名前が保持されます。 同一のリソースを別の名前でアップロードするには、ファイルを変更する必要があります。 

キャンバスにリソースを直接追加する

リソース セクションを開かずに、デバイスから 1 つ以上の画像またはファイルを直接キャンバスにドラッグすることもできます。このアクションにより、画像要素が自動的に生成されるか、ファイルへのリンクが作成されます。画像またはファイルは、将来使用するためにリソース セクションに追加されます。

注記： ブラウザの制約により、dotLottie ファイルをキャンバスに直接ドラッグすることはできません。ただし、dotLottie ファイルはリソース セクションにアップロードできます。

互換性のあるファイル形式

リソース セクションは、さまざまな画像ファイル タイプ、以下にリストされている document カテゴリ、および Lottie JSON および dotLottie アニメーション ファイルと互換性があります。

リマインダー： 画像ファイルのサイズは 4MB を超えてはならず、documents は 10MB を超えてはなりません。

サポートされている画像ファイル拡張子

• PNG
• JPEG と JPG
• 画像
• SVGA
• ウェブP

サポートされているdocumentファイルタイプ

• PDF
• DOC と DOCX
• XLS および XLSX
• PPT と PPTX
• TXT
• CSVファイル
• ODTA の
• オーエス
• オーディーピー

サポートされている Lottie ファイルの種類

• JSON (ロッティのみ)
• ドットロッティ

追加のヒント: dotLottieファイルを入手するには3つの方法があります。 変身 既存のLottie JSONファイルをdotLottieにインポートするには、 JSON から dotLottie への変換ツール, 生成する After Effectsから直接dotLottieファイルを LottieFiles プラグイン、 または ダウンロード あらかじめデザインされたdotLottieファイル ロティファイルズ.

命名リソース

リソース セクションまたはキャンバスへのリソースのアップロード中に問題が発生しないようにするには、リソースに名前を付けるときに次の点を考慮してください。

1. あなた 許可されている 文字、数字、ハイフン、アンダースコア（リソースへのリンクの URL で使用できる文字）を使用する
2. 避ける ファイル名の特殊文字 (例: `#, (), ' ,`)
3. ファイル名は簡潔にしてください（100文字以下、 含む ファイル拡張子)

リマインダー： 読み込み速度を向上させるには、画像が4MB未満であることを確認し、大きなファイルはサイズ変更、最適化、圧縮してください。無料のサードパーティツールなどを活用してください。 JPEG を圧縮 または PNGを圧縮Webflow 変換ツールを使用してリソースを WebP 形式に変換することで、リソースを圧縮することもできます。

リマインダー： リソース セクションに別の名前でファイルをアップロードしたが、変更されていない場合 (サイズや寸法がそのまま)、元の名前が保持されます。同じリソースを新しい名前でアップロードするには、ファイルを変更する必要があります。 

リソースの活用

リソース セクションでリソースにアクセスできるようになると、それらをサイトに組み込むことができます。追加された画像は画像要素として表示され、ファイルはテキスト リンクとして表示されます。

リンク要素にリソースを添付する

リンク設定を使用して、リソースをリンク要素にリンクできます。リソースをリンク要素にリンクするには、次の手順を実行します。

1. を選択 リンク要素 （リンクブロック、テキストリンク、またはボタン）をキャンバス上に配置
2. 案内する 設定パネル > リンク設定
3. クリック "ペーパークリップ” ファイルアイコン
4. 選ぶ 添付ファイルを選択

訪問者がリンクをクリックすると、画像または document ファイルが同じタブで開きます。その他のファイル タイプは訪問者のデバイスにダウンロードされます。

リンクされた添付ファイルを変更したい場合は、 代わりの リンク設定で添付ファイルを選択します。画像やdocumentファイルを添付するように設定することもできます。 新しいタブで開く クリックすると。

画像リソースを背景画像として活用する

アップロードした画像リソースを背景画像として使用するには:

1. 背景画像のキャンバス上の要素を選択します
2. アクセス スタイルパネル > 背景
3. クリック "プラス”アイコンの横にある 画像とグラデーション
4. 選ぶ 画像を選択
5. 画像を選択して リソースセクション

背景画像のスタイル設定の詳細については、追加のリソースを参照してください。

リマインダー： Webflow は背景画像のレスポンシブなバリアントを生成しないため、正しい解像度で最適化された背景画像をアップロードしてください。背景画像の解像度の詳細をご覧ください。

リソースの検索

リソースセクション内の検索バーを使用するか、クイック検索を使用してリソースを見つけることができます。クイック検索はショートカットからアクセスできます。 指示 + え (Macの場合) または コントロール + え （Windowsの場合）。クイック検索を使用する場合は、 有効にする 機能.リソースの検出。

クイック検索機能でリソース検出を有効にする場合:

1. 入力 指示 + え (Macの場合) または コントロール + え （Windowsの場合） クイック検索
2. 歯車アイコンを押します
3. 選択する リソースを含める

資源を根絶するための手順

キャンバス上のリソースのバージョンを削除すると、 ではない リソース パネル内のリソースを削除します。リソース パネルからリソースを削除するには:

1. アクセス リソースパネル
2. 除去したいリソースの上にマウスを置きます
3. リソースの右上にある歯車アイコンをクリックします
4. プレス 消去

サイトのどこかでまだ使用されているリソースをリソースパネルから削除すると、サイトを公開してデザイナーを更新すると、リソースがリソースパネルに再び表示されることに注意してください。リソースのすべての出現箇所をサイトから消去する必要があります。 それから リソース パネルから完全に削除するには、

重要な情報: リソースの歯車アイコンを選択すると、 リソースの詳細 モーダルでは、その 寸法, サイズ、および/または フレーム.

リソースを分類して整理する方法

特定のリソースをより簡単に見つけるために、リソース パネルにはさまざまなフィルタリングと並べ替えの選択肢があります。

リソースをフィルタリングするプロセス

最初は、すべての種類のリソースがリソース パネルに表示されます。ファイルの種類別にリソースをフィルターするには、次の手順を実行します。

1. 起動する リソースパネル
2. パネルの左上隅にあるドロップダウンを押します
3. 展示するリソースのcategoryを選択します（すべてのリソース, 画像, 文書、 または ロッティ)

リソースを分類するプロセス

最初は、リソースパネルのリソースは新しいものから古いものの順に並べられています。 新着順, 古い順、 または アルファベット順（AZ または ZA）リソースを並べ替えるには:

1. アクセス リソースパネル
2. パネルの左下にあるドロップダウンを押します
3. 並べ替えの設定を選択します（例： 新着順, 古い順, アルファベット順 (AZ)、 または アルファベット順（ZA）)

リソースパネルの表示オプションを変更するプロセス

最初は、アセットパネルのリソースはグリッドビューで表示されます。 グリッド, リスト、 または リスト – 小 オプション。表示オプションを変更するには:

1. 起動する リソースパネル
2. 「グリッドパネルの左下にある「」アイコン
3. 表示オプションを選択します（例： グリッド, リスト、 または リスト – 小)