機能解説：ランディングページ（LP）のHTMLインポート

MyASPのランディングページ（LP）機能では、外部ツール等で作成したHTML / CSSを取り込んで、MyASP上のLPに反映できます。

外部ツール等で作成したHTML / CSSを取り込むことで、MyASP上でも既存デザインを活かしたLP運用がしやすくなります。
なお、取り込み後は「ページ設定」と表示内容（プレビュー）を確認したうえでLPの公開を行ってください。

概要

HTMLインポートは、外部ツール等で作成したLPデザインのHTMLタグやCSSをMyASPのLP機能へ取り込むための機能です。

取り込み方法は、主に以下の2種類があります。

番号	項目名	詳細
１	HTML / CSS を貼り付け	HTMLタグやCSS等をテキストとして入力欄に直接貼り付けて取り込みます。
２	ZIP/ファイル一式をファイルアップロード	ZIPファイル、またはHTML / CSS / 画像ファイル一式を指定してデータで取り込みます。 ※ファイル容量のアップロード上限は8MBです ※画像をアップロードした場合は、メディアライブラリへ追加されます

HTMLインポート利用時の注意

• 取り込んだHTMLは自動で細かいブロックに分割されません
  取り込んだ本文は、ブロックエディタ上では主に1つのカスタムHTMLブロックとして扱われます。
  そのため、見出しや画像、ボタンなどが個別のブロックへは自動変換されません。
  
  
• 既存LPへHTML/CSSを取り込んだ場合は、データが上書きされます
  とくに、titleタグやdescriptionタグ、OGP情報などを含むHTMLを取り込んだ場合は、ページタイトルやページ説明、SNSシェア設定、タグ埋め込みなどの内容が取り込んだ情報で変更される可能性があります。
  公開前に必ず現在の設定内容を確認してください。
  
  
• 外部CSSや外部JavaScriptを利用している場合は、取り込み後必ず内容を確認してください
  <link>タグで外部CSSファイルや外部JavaScriptファイルを参照している場合、設定箇所によっては正しく読み込まれない場合があります。
  反映されていない場合は、LPの編集画面から手動で修正してください。
  
  
• JavaScriptタグを利用している場合、タグ埋め込み欄も確認してください
  LP編集画面のカスタムHTMLブロックでは、JavaScriptタグをそのまま利用できない場合があります。
  計測タグ等を利用したい場合は、「ページ設定」画面の「タグ埋め込み」欄も確認してください。

参考：機能解説：ランディングページ（LP）
参考：画面説明：ランディングページ（LP）
参考：LP作成機能で作成したページにOGPを設定することはできますか？

操作方法

１．HTMLインポートで取り込みたいデータを設定する

HTML / CSS を貼り付けて取り込む場合

「HTML / CSS を貼り付け」を選択し、HTML入力欄とCSS入力欄へ取り込みたいHTML / CSSを入力します。
入力後、右下の『取り込み内容を確認する』をクリックします。

※HTMLは、body部分のみのHTMLだけでなく、headやbodyを含むHTML文章全体を貼り付けることも可能です

ファイルをアップロードして取り込む場合

「ZIP/ファイル一式をファイルアップロード」を選択し、アップロードしたいZIPファイルまたはHTML / CSS / 画像ファイル一式をドラッグ＆ドロップ、もしくは、『ファイルを選択する』から選択します。
必要データをアップロードしたら、右下の『取り込み内容を確認する』をクリックします。

ZIPファイルを使ってアップロードする場合について

• ZIPファイル化してからアップロードすることで、フォルダ構成のまま取り込むことができます。
  ZIPファイル化する際は、HTMLやCSS内の参照パスが崩れない形でまとめてください。
  
  ZIPファイル内ファイル構成例：
  ndex.html
  assets/css/style.css
  assets/images/main.png
  
  
• ZIPファイルのでアップロードする際の必須ファイルはありません。
  HTMLのみ、画像のみのZIPファイルをアップロードすることも可能です。
  
  
• HTML内の img タグ、style属性、 style タグ、CSS内の url(…) で参照している画像は、取り込み対象内の画像ファイルと照合され、メディアライブラリ登録後のパスへ差し替えられます。

２．事前確認画面で内容を確認する

『取り込み内容を確認する』をクリックすると、事前確認画面へ進みます。
事前確認画面では、以下の内容を確認できます。

番号	項目名	詳細
１	LPプレビュー	解析後のHTML / CSSと画像の対応状況を反映した表示を確認できます。
２	警告一覧	取り込み対象内に存在しない画像参照など、確認が必要な内容を確認できます。
３	画像タグ一覧	HTML内の img タグごとに、元の参照先や紐付け先を確認できます。
４	style / CSS 画像参照一覧	style属性、 style タグ、CSS内のurl(…)で参照している画像を確認できます。
５	画像ファイル一覧	取り込み対象に含まれる画像ファイルの相対パス、サイズ、参照状況を確認できます。
６	入力へ戻る	事前確認画面を閉じて、HTMLインポート画面に戻ります。
７	この内容で取り込む	設定した内容で、設定したHTMLタグ、もしくはアップロードしたファイルを取り込みます。

画像やCSSファイルの紐付けを変更したい場合は、画像タグ一覧、またはstyle / CSS 画像参照一覧から、紐付け先を手動で変更できます。

■画像の紐づけとは？
HTMLで指定されている画像と、実際に表示させる画像をマッチングさせる作業です。
ここでプルダウンから別のファイル名を選ぶことで、HTMLコードを書き換えずに画面上で簡単に画像の差し替えができる便利なメリットがあります。

■紐づけ時の各選択肢について

選択肢名	詳細
自動判定を使う	初回取り込み時点では自動判別をおすすめします。 MyASPが最適な画像を自動で割り当てます。
元のsrcをそのまま残す	外部のサーバーを使う時を選択します。 画像やCSSのURLを元のサーバーのままLPへ反映させます。
画像ファイル名を選択	別の画像に差し替えたい場合に選択します。 自動で紐づかなかった場合や、やっぱりこちらの画像に変えようと手動で差し替えたいときに一覧からファイル名を選びます。

取り込む内容の確認や画像やCSSの割り当てに問題がなければ、『この内容で取り込む』をクリックします。

反映が完了すると、LPのページ詳細画面に戻ります。

３．取り込み後のLPを確認する

取り込み完了後は、実際にLPを確認して正しく想定通りに取り込めているか、必ず確認を行ってください。

デザインが大きく崩れてしまった場合は、無理にブロックエディタで修正せず、一度取り込みをやり直すか、HTMLの知識がある方に「コード編集」ボタンから該当箇所のタグ（コード）を確認していただくことをおすすめします。

なお、HTMLインポートで作成したLPを、ページ詳細の「編集する」からブロックエディタで開いた場合は、画面上部に

『このページはブロックエディタで作られたものではありません。初回編集の際は崩れ等がないか注意してください。』

のメッセージが表示されます。

その他の利用方法

既存LPの画像を差し替える

既に作成済みのLPに対して、「ZIP/ファイル一式をファイルアップロード」から画像データのみをアップロードして、LP内の画像をまとめて差し替えることができます。

１．「ZIP/ファイル一式をファイルアップロード」を選択し、差し替えたい画像をアップロードして『取り込み内容を確認する』をクリックします。

２．右下の「画像ファイル一覧」にアップロードした画像が表示されます。
今回は、LP内の画像名（画像パス）と取り込んだ画像名が異なるため、この時点では画像の割り当てはされていません。

３．割り当たっていない画像を利用するには、画像タグ一覧、もしくは、style/CSS画像参照一覧にて、LP側で変更したい画像の選択欄から今回アップロードした画像名を選択します。

画像を選択すると、プレビュー内の該当箇所の画像が差し替わります。

割り当て後、プレビューを確認し問題がなければ、右下の『この内容で取り込む』をクリックし、画像のアップロードおよび反映をします。

補足

画像参照の自動差し替え対象

自動差し替えの対象は、HTML内の img タグ、style属性、 style タグ、CSS内のurl(…)です。

srcset 属性、 picture タグ、 source タグなどの複数解像度画像は、自動差し替えの対象外です。
必要な場合は、取り込み後に手動で調整してください。

自動取り込みや自動差し替えの対象外となるもの

• 外部URLの画像
• CSSの@import
• CSSのimage-set(…)
• Sass / Lessなどの未コンパイル構文
• Webフォント、動画、PDF、JavaScriptファイル

外部URLの画像は、MyASP側へ自動でダウンロード取り込みされません。
必要な画像は、ファイル一式に含めて取り込むか、取り込み後に手動で調整してください。

HTMLファイルが複数ある場合

ファイル一式にHTMLファイルが複数含まれる場合は、取り込みルート直下のindex.html、またはindex.htmが優先されます。
index.htmlやindex.htmがなく、HTMLファイルが複数ある場合は、取り込み対象のHTMLを決定できないためエラーになります。

未参照の画像ファイルについて

ファイル一式に含まれる画像は、HTML / CSSから参照されていない場合でも、取り込み実行時にメディアライブラリへ追加されます。
ただし、事前確認画面で手動再紐付けできる対象は、HTML内の img タグ、style属性、 style タグ、CSS内のurl(…)に限られます。

---