すべてのHTMLバナーにカスタムのHTML・CSS・JavaScriptを挿入する

HTMLエクスポート設定パネルから、任意のカスタムHTML、CSS、JavaScriptをすべてのバナーに挿入できます（任意）。

動画チュートリアル：FigmaのバナーエクスポートにカスタムのHTML・CSS・JavaScriptを追加する

この動画では、Bannerifyプラグインを使って、FigmaのバナーエクスポートにカスタムのHTML・CSS・JavaScriptを追加する方法を紹介します。

すべてのHTMLバナーのエクスポートに独自のカスタムHTML・CSS・JavaScriptを追加する必要がある場合は、エクスポート設定でInject Custom Codeトグルを有効にします。これにより、閉じタグ</body>の前（コンテンツの追加用）や</head>の前（metaタグや素材へのリンクの追加用）にカスタムHTMLを追加したり、新しいstyleタグにカスタムCSSを追加したり、新しい<script></script>タグの中にカスタムのJavaScriptコードを追加したりできます。

注意書きのオーバーレイを切り替えるカスタムコードの例 この機能のよくある使い方の基本的な例として、こちらのCodePenのHTML・CSS・JSのコード例を参考にしてください。バナーの上に、表示を切り替えられる注意書きのポップアップを挿入します。スタイルや内容は必要に応じて自由にコピーして変更してください。

カスタムコードのプリセットの保存（任意） ​

Saved Custom Code Presets機能を使うと、バナーをエクスポートする際に、カスタムのHTML、CSS、JavaScriptコードのさまざまな構成を保存して再利用できます。使うには、4つの入力エリア（Head HTML、Body HTML、CSS、JavaScript）にカスタムコードを入力し、わかりやすい名前を付けてSave as New Presetをクリックすると、その構成が保存され、今後も使えるようになります。

保存したら、Load Saved Preset (Optional) ドロップダウンメニューから任意のプリセットをすぐに読み込み、保存した構成をすべてのカスタムコードのエリアに一度に入力できます。要件の異なるバナーをエクスポートするたびに、コードのスニペットを手作業でコピー＆ペーストする必要がなくなります。不要になったプリセットは削除でき、既存のプリセットは、読み込んで変更し、同じ名前で保存すれば更新できます。すべてのプリセットは、（FigmaのclientStorage APIを使って）現在のFigmaアプリ内にローカルで保存されます。別のFigmaファイルでBannerifyのコードパネルを開き直しても保持されるため、複数のエクスポート作業で一貫したコードを簡単に維持できます。

編集可能なHTMLテキストにカスタムフォントを追加する ​

編集可能なテキストで使うウェイトとスタイルごとに、Webフォントのファイルを用意します。Figmaにフォントをインストールしていても、そのフォントがHTMLエクスポートにパッケージされるわけではありません。

  1. ブランドが承認したWeb用の .woff2 または .woff ファイルを入手します。
  2. 段落テキストのエクスポートを有効にします。編集可能なテキストは、Figmaでロックしないままにしておきます。
  3. HTMLエクスポートパネルでInject Custom Codeを有効にし、Add custom CSS stylesを選びます。
  4. 前後に<style>タグを付けずに、@font-faceルールをCSSの欄に貼り付けます。サンプルのファミリー名を、Figmaとエクスポートしたテキストのfont-family宣言で使われている正確なファミリー名に置き換え、実際のフォントのウェイトとスタイルに合わせます。
css
@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
  1. 追加のウェイト・スタイルごとに、別のルールを追加します（例：太字には700、イタリック体のファイルにはitalic）。
  2. バナーをエクスポートして解凍します。各バナーのHTMLファイルの横にあるfontsフォルダにフォントファイルを置き、そのバナーの内容全体をもう一度ZIP圧縮します。BannerifyはCSSを挿入しますが、これらのローカルのフォントファイルをZIPにコピーすることはありません。相対パスのフォントURLはスタイルシートの場所から解決されるため、CSSを別のフォルダに保存する場合はパスを調整してください。
  3. ローカルのWebサーバーか入稿先のプラットフォームのプレビューで、フォントがインストールされていないデバイスも含めてパッケージをテストします。フォントの読み込み、改行、長い差し替えテキストを確認してください。フォントファイルはパッケージのサイズに含まれ、入稿先でそれらのファイルが許可されている必要があります。

広告プラットフォームが外部のフォントのリクエストを許可している場合は、代わりにHTTPSでホスティングされたフォントファイルへの直接のURLを使うこともできます。フォントサーバーは、クロスオリジンでのフォントの読み込みを許可している必要があります。MDNのfont-faceリファレンスをご覧ください。