コンテンツにスキップ
IGNITE Webflow更新マニュアル

本文にPDFなどのファイルを添付する方法

新規追加（標準スコープ補完）

「会社案内のPDFをダウンロードできるようにしたい」「セミナー資料を本文からリンクしたい」といった時に使うのが ファイル添付（リンク） です。 実画面例: 資料リンクを入れる場合は、公開ページでリンク導線が自然に見えるか確認します。

1. ファイル添付の基本方針

Webflow では、ファイルを直接埋め込む のではなく、「アセットにアップロード → リンクとして本文に貼る」 という流れが基本です。

対応形式の例（一般的なもの）:

  • PDF（最も多い）
  • Word（.docx）
  • Excel（.xlsx）
  • PowerPoint（.pptx）
  • ZIP

注意: アップロード可能な最大サイズは 10MB が目安です。それ以上は分割するか圧縮してください。

2. アップロードと添付の手順

Step 1: アセットにファイルをアップロード

  1. Designer モードまたは CMS の編集画面で、画像挿入と同じ要領で 「Asset Manager（アセットマネージャー）」 を開く
  2. 「Upload」 をクリックしてファイルを選択
  3. アップロード完了後、ファイルの URL をコピー
キャプチャー指示: Asset ManagerでPDFをアップロードする画面
  • 保存名: 03-24-attach-file-asset-upload.png
  • 差し込み位置: この Step 1 の手順1の直後
  • 撮影画面: WebflowのAsset Managerを開き、PDFファイルをアップロードする直前の画面
  • 事前状態: デモ用PDF sample-company-profile.pdf を用意し、実在の顧客資料は表示しない
  • 強調箇所: Upload ボタン、Asset Managerのパネル名、アップロード対象ファイル名
  • 隠す情報: 顧客名、社内資料名、未公開ファイル名、ユーザー名
  • 撮影後チェック: 読者が「まずAsset ManagerからUploadする」と分かる画面になっていること
キャプチャー指示: アップロード済みファイルのURLをコピーする画面
  • 保存名: 03-24-attach-file-copy-url.png
  • 差し込み位置: この Step 1 の手順3の直後
  • 撮影画面: アップロード済みPDFの詳細メニュー、またはURLコピー操作ができる画面
  • 事前状態: デモPDFがAsset Manager内に表示されている状態にする
  • 強調箇所: Copy URL、ファイル名、URLコピー用のボタンまたはメニュー
  • 隠す情報: 実URLに含まれる顧客名、非公開ファイル名
  • 撮影後チェック: 本文に貼るURLをどこで取得するか分かること

Step 2: 本文にダウンロードリンクを貼る

  1. CMS の本文エディタで、リンクにしたいテキスト（例:「会社案内PDF（2.3MB）」）を選択
  2. ツールバーの リンク（鎖アイコン） をクリック
  3. コピーした URL を貼り付け
  4. 「Open in new tab」をON（PDF は別タブで開くのが安全）
  5. Save
キャプチャー指示: CMS本文内でPDFリンクを設定する画面
  • 保存名: 03-24-attach-file-rich-text-link.png
  • 差し込み位置: この Step 2 の手順2の直後
  • 撮影画面: CMS Rich Text本文で「会社案内PDF（2.3MB）」を選択し、リンク設定パネルを開いた状態
  • 事前状態: 本文にデモテキストを入力し、リンクにしたい文字列だけを選択しておく
  • 強調箇所: 選択中のリンクテキスト、リンクアイコン、URL入力欄、Open in new tab
  • 隠す情報: 未公開記事本文、実在資料名、顧客サイトURL
  • 撮影後チェック: 「テキストを選択してURLを貼る」流れが1枚で分かること
キャプチャー指示: 公開ページでPDFリンクを確認する画面
  • 保存名: 03-24-attach-file-published-check.png
  • 差し込み位置: Step 2 の手順5の直後
  • 撮影画面: Previewまたは公開ページでPDFリンクが表示されている状態
  • 事前状態: リンクテキストが本文内に表示され、クリック直前の状態にする
  • 強調箇所: PDFリンクのテキスト、ブラウザのURL欄、別タブで開くことが分かる状態
  • 隠す情報: 顧客サイトURL、資料の実ファイル名、非公開記事URL
  • 撮影後チェック: 読者が「設定後に必ず公開画面でリンク確認する」と分かること

3. リンクテキストの書き方（おすすめ）

ユーザーが安心してクリックできるよう、ファイルの種類とサイズ を明記しましょう：

  • 良い例: 「会社案内をダウンロード（PDF / 2.3MB）」
  • 良い例: 「料金表（Excel / 120KB）」
  • 悪い例: 「こちら」「資料」（何が開くか分からない）

4. ファイルを差し替える時

同じ URL を維持したい 場合は、Asset Manager で 既存ファイルの「Replace」 機能を使うのがおすすめです。これにより、本文中のリンクを編集しなくてもファイル内容が更新されます。

  1. Asset Manager で対象ファイルを選択
  2. 「Replace asset」 をクリック
  3. 新しいファイルを選択してアップロード
  4. URL は変わらないので、本文側の編集は不要

5. よくある質問 (Q&A)

PDFが直接サイト内で表示されません。

PDF は基本的に「ダウンロード」または「ブラウザの新しいタブで表示」という挙動になります。サイト内に埋め込み表示したい場合は、別途 PDF ビューア機能の実装が必要です（IGNITE公式サイトのお問い合わせフォーム からご相談ください）。

アップロードしたファイルを削除したいです。

Asset Manager から削除できます。ただし 本文にリンクが残っている場合、リンク切れ（404） になります。事前に本文を確認してから削除してください。

10MBを超えるファイルはどうすれば？

圧縮（ZIP化）するか、Google Drive 等の外部ストレージにアップロードしてリンクを貼る方法があります。

次のステップ: これで CMS の基本機能は一通り完了です。次は Designer モード編へ進みましょう → 「デザイナーモードを開く時の注意点」