外部ツール等で作成したLPデザインを、MyASPで作ったランディングページに移したいです。
MyASPのLP機能で作ったページに、よそで作ったHTMLを入れ込むことはできますか。
MyASPのランディングページ（LP）機能では、外部ツール等で作成したHTML / CSSを取り込むことができます。
外部ツール等で作成したHTML / CSSを取り込むことで、MyASP上でも既存デザインを活かしたLP運用がしやすくなります。
また、取り込み後は「ページ設定」と表示内容（プレビュー）を確認したうえでLPの公開を行ってください。
ご利用前の注意
MyASPのLP機能でブロックエディタを使って1からLP（ランディングページ）を作成した場合に対して、HTMLを取り込んでLPに反映させた場合は以下の注意事項があります。
- 取り込んだHTMLは自動で細かいブロックに分割されません
取り込んだ本文は、ブロックエディタ上では主に1つのカスタムHTMLブロックとして扱われます。
そのため、見出しや画像、ボタンなどが個別のブロックへは自動変換されません。 - 既存LPへHTML/CSSを取り込んだ場合は、データが上書きされます
とくに、titleタグやdescriptionタグ、OGP情報などを含むHTMLを取り込んだ場合は、ページタイトルやページ説明、SNSシェア設定、タグ埋め込みなどの内容が取り込んだ情報で変更される可能性があります。
公開前に必ず現在の設定内容を確認してください。 - 外部CSSや外部JavaScriptを利用している場合は、取り込み後必ず内容を確認してください
<link>タグで外部CSSファイルや外部JavaScriptファイルを参照している場合、設定箇所によっては正しく読み込まれない場合があります。
反映されていない場合は、LPの編集画面から手動で修正してください。 - JavaScriptタグを利用している場合、タグ埋め込み欄も確認してください
LP編集画面のカスタムHTMLブロックでは、JavaScriptタグをそのまま利用できない場合があります。
計測タグ等を利用したい場合は、「ページ設定」画面の「タグ埋め込み」欄も確認してください。
HTML / CSSを取り込む手順
本マニュアルでは、シナリオAで作成したLPをシナリオBで作成したLPに移す方法を例として紹介します。
１．シナリオ管理メニュー ＞ ランディングページ（LP）設定 をクリックします。
２．『ページ新規作成』、もしくは、HTML / CSSを取り込みたいページの「ページ詳細」画面を開きます。
３．『HTMLインポート』をクリックします。
４．「HTML / CSSを取り込む」に、取り込みたいHTML / CSSを貼り付けます。
入力欄の上部にHTML、下部にCSSを入力します。
貼り付けたら、『HTML/CSSを取り込む』をクリックします。
※HTMLは、body部分のみのHTMLだけでなく、headやbodyを含むHTML文章全体を貼り付けることも可能です
５．取り込み完了後は「ページ詳細」画面へ遷移し、取り込み完了のメッセージが表示されます。
また、取り込み内容に応じて画面イメージ（簡易プレビュー）が更新されます。
HTML/CSSの取り込み後は、必ず正しくデータが反映されたか確認してください。
headやbodyを含むHTML文章全体を取り込んだ場合に、metaタグやheadタグの情報が上書きされた場合は
『HTML / CSS を取り込みました。ページ設定側も更新あり: headタグ埋め込み』
のメッセージが表示されます。
取込後の確認ポイント
HTML / CSSを取り込んだ後は、下記の点について確認してください。
- 「編集する」から本文を開き、ブロックエディタの編集画面や「プレビュー」機能から見た目が崩れていないか確認する
- titleタグやdescriptionタグ、OGP情報などを含むHTMLを取り込んだ場合は、「ページ設定」で、ページタイトル、ページ説明、SNSシェア設定、タグ埋め込み内容を確認する
また、表示崩れや取り込みが上手く行かなかった箇所があった場合は、必要に応じて直接ブロックエディタまたはコード編集で調整してください。
参考：機能解説：ランディングページ（LP）設定
参考：画面説明：ランディングページ（LP）設定
参考：LP作成機能で作成したページにOGPを設定することはできますか？
補足
headやbodyを含むHTML文章全体を貼り付けた場合に反映される項目
headやbodyを含むHTML文章全体を取り込んだ場合、本文以外の情報もLPの設定内容として反映されることがあります。
LPの公開前には必ず正しい内容になっているかを確認してください。
| 番号 | 項目名 | 詳細 |
|---|---|---|
| １ | title | 「ページタイトル（titleタグ）」へ反映されます。 |
| ２ | meta description | 「ページ説明（descriptionタグ）」へ反映されます。 |
| ３ | og:title / og:description / og:image | 「SNSシェア設定」へ反映されます。 |
| ４ | タグ情報 | 内容に応じて「タグ埋め込み」欄で確認が必要です。 |
| ５ | 本文HTML | ブロックエディタ上では主に「カスタムHTML」ブロックとして扱われます。 |