[{"data":1,"prerenderedAt":634},["ShallowReactive",2],{"page-\u002Fja\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page":3,"related-\u002Fja\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page":633},{"id":4,"title":5,"author":6,"body":7,"category":622,"description":623,"extension":624,"heading":625,"heroImage":625,"heroImageAlt":625,"layout":625,"meta":626,"navigation":627,"ogImage":625,"path":628,"publishedAt":625,"sections":625,"seo":629,"sourcePath":630,"stem":631,"updatedAt":625,"videoPosition":625,"videos":625,"__hash__":632},"pages\u002Fja\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page.md","HTMLでランディングページをカスタマイズする方法","Mia",{"type":8,"value":9,"toc":611},"minimark",[10,18,21,29,40,44,47,51,54,57,170,173,176,180,183,186,189,226,229,232,235,238,271,278,282,285,288,321,324,327,330,337,371,377,410,413,416,509,513,516,608],[11,12,13,17],"p",{},[14,15,16],"strong",{},"HTMLエディター"," を使えば、ランディングページを自由にカスタマイズできます。",[11,19,20],{},"ランディングページにHTMLエディターを1つ追加します。",[22,23],"img",{"src":24,"alt":25,"width":26,"height":27,"loading":28},"\u002Fimages\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page-1.png","HTML 1",890,500,"lazy",[11,30,31,32,35,36,39],{},"その ",[14,33,34],{},"3点メニュー"," をクリックし、",[14,37,38],{},"\u003C\u002F>アイコン"," をクリックしてHTML表示に切り替えます。",[22,41],{"src":42,"alt":43,"width":26,"height":27,"loading":28},"\u002Fimages\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page-2.png","HTML 2",[11,45,46],{},"追加できる内容の例をいくつかご紹介します。",[48,49,50],"h4",{"id":50},"区切り線",[11,52,53],{},"コンテンツの間に線や区切りを追加できます。",[11,55,56],{},"次の文字列を追加します。",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cstyle>.line {border-top: 3px solid #000000;width: 100%;margin: 0;}\u003C\u002Fstyle>\u003Cdiv class=\"line\">\u003Cbr>\u003C\u002Fdiv>\n","html","",[65,66,67],"code",{"__ignoreMap":63},[68,69,72,76,80,83,86,89,93,96,100,104,107,110,113,116,118,121,123,126,128,131,134,136,139,142,146,149,152,155,157,159,162,165,167],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sMK4o","\u003C",[68,77,79],{"class":78},"swJcz","style",[68,81,82],{"class":74},">.",[68,84,70],{"class":85},"sBMFI",[68,87,88],{"class":74}," {",[68,90,92],{"class":91},"sqsOY","border-top",[68,94,95],{"class":74},":",[68,97,99],{"class":98},"sbssI"," 3px",[68,101,103],{"class":102},"sTEyZ"," solid ",[68,105,106],{"class":74},"#",[68,108,109],{"class":102},"000000",[68,111,112],{"class":74},";",[68,114,115],{"class":91},"width",[68,117,95],{"class":74},[68,119,120],{"class":98}," 100%",[68,122,112],{"class":74},[68,124,125],{"class":91},"margin",[68,127,95],{"class":74},[68,129,130],{"class":98}," 0",[68,132,133],{"class":74},";}\u003C\u002F",[68,135,79],{"class":78},[68,137,138],{"class":74},">\u003C",[68,140,141],{"class":78},"div",[68,143,145],{"class":144},"spNyl"," class",[68,147,148],{"class":74},"=",[68,150,151],{"class":74},"\"",[68,153,70],{"class":154},"sfazB",[68,156,151],{"class":74},[68,158,138],{"class":74},[68,160,161],{"class":78},"br",[68,163,164],{"class":74},">\u003C\u002F",[68,166,141],{"class":78},[68,168,169],{"class":74},">\n",[11,171,172],{},"「border-top:」では、線の太さをピクセル単位で設定できます。",[11,174,175],{},"「solid #」では、線の色を16進数カラーコードで設定できます。",[22,177],{"src":178,"alt":179,"width":26,"height":27,"loading":28},"\u002Fimages\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page-3.png","HTML 3",[48,181,182],{"id":182},"電話をかけるリンク",[11,184,185],{},"ユーザーがデバイスから直接電話をかけられるリンクを作成できます。",[11,187,188],{},"電話アプリを開くテキスト（お電話はこちら）に、発信先の電話番号を指定した「href」属性を追加します。例：",[58,190,192],{"className":60,"code":191,"language":62,"meta":63,"style":63},"\u003Ca href=\"tel:+1234567890\">お電話はこちら\u003C\u002Fa>\n",[65,193,194],{"__ignoreMap":63},[68,195,196,198,201,204,206,208,211,213,216,219,222,224],{"class":70,"line":71},[68,197,75],{"class":74},[68,199,200],{"class":78},"a",[68,202,203],{"class":144}," href",[68,205,148],{"class":74},[68,207,151],{"class":74},[68,209,210],{"class":154},"tel:+1234567890",[68,212,151],{"class":74},[68,214,215],{"class":74},">",[68,217,218],{"class":102},"お電話はこちら",[68,220,221],{"class":74},"\u003C\u002F",[68,223,200],{"class":78},[68,225,169],{"class":74},[11,227,228],{},"「+1234567890」を該当する電話番号に置き換えてください。「+」記号は国際電話の国番号を示します。",[48,230,231],{"id":231},"メールを送信するリンク",[11,233,234],{},"ユーザーがデバイスから特定のアドレスに直接メールを送信できるリンクを作成できます。",[11,236,237],{},"メールアプリを開くテキスト（メールを送る）に、宛先アドレスを指定した「href」属性を追加します。例：",[58,239,241],{"className":60,"code":240,"language":62,"meta":63,"style":63},"\u003Ca href=\"mailto:abc@example.com\">メールを送る\u003C\u002Fa>\n",[65,242,243],{"__ignoreMap":63},[68,244,245,247,249,251,253,255,258,260,262,265,267,269],{"class":70,"line":71},[68,246,75],{"class":74},[68,248,200],{"class":78},[68,250,203],{"class":144},[68,252,148],{"class":74},[68,254,151],{"class":74},[68,256,257],{"class":154},"mailto:abc@example.com",[68,259,151],{"class":74},[68,261,215],{"class":74},[68,263,264],{"class":102},"メールを送る",[68,266,221],{"class":74},[68,268,200],{"class":78},[68,270,169],{"class":74},[11,272,273,274,277],{},"「",[200,275,276],{"href":257},"abc@example.com","」を該当するメールアドレスに置き換えてください。",[48,279,281],{"id":280},"whatsappにメッセージを送るリンク","WhatsAppにメッセージを送るリンク",[11,283,284],{},"ユーザーがデバイスから特定のWhatsApp番号に直接メッセージを送信できるリンクを作成できます。",[11,286,287],{},"WhatsAppアプリを開くテキスト（WhatsAppでお問い合わせ）に、宛先のWhatsApp番号を指定した「href」属性を追加します。必要に応じて、「?text=」の後に送信するメッセージ（これはメッセージです）を追加することもできます。例：",[58,289,291],{"className":60,"code":290,"language":62,"meta":63,"style":63},"\u003Ca href=\"https:\u002F\u002Fwa.me\u002F+1234567890?text=これはメッセージです\">WhatsAppでお問い合わせ\u003C\u002Fa>\n",[65,292,293],{"__ignoreMap":63},[68,294,295,297,299,301,303,305,308,310,312,315,317,319],{"class":70,"line":71},[68,296,75],{"class":74},[68,298,200],{"class":78},[68,300,203],{"class":144},[68,302,148],{"class":74},[68,304,151],{"class":74},[68,306,307],{"class":154},"https:\u002F\u002Fwa.me\u002F+1234567890?text=これはメッセージです",[68,309,151],{"class":74},[68,311,215],{"class":74},[68,313,314],{"class":102},"WhatsAppでお問い合わせ",[68,316,221],{"class":74},[68,318,200],{"class":78},[68,320,169],{"class":74},[11,322,323],{},"「+1234567890」を該当するWhatsApp番号に置き換えてください。",[48,325,326],{"id":326},"特定の箇所へのリンク",[11,328,329],{},"ユーザーがランディングページ内の特定のセクションに直接移動できるリンクを作成できます。",[331,332,333],"ol",{},[334,335,336],"li",{},"移動先の要素（セクション1）に「id」属性を追加します。要素の名前はidと同じ（section1）にすることをおすすめします。例：",[58,338,340],{"className":60,"code":339,"language":62,"meta":63,"style":63},"\u003Ca id=\"section1\">セクション1\u003C\u002Fa>\n",[65,341,342],{"__ignoreMap":63},[68,343,344,346,348,351,353,355,358,360,362,365,367,369],{"class":70,"line":71},[68,345,75],{"class":74},[68,347,200],{"class":78},[68,349,350],{"class":144}," id",[68,352,148],{"class":74},[68,354,151],{"class":74},[68,356,357],{"class":154},"section1",[68,359,151],{"class":74},[68,361,215],{"class":74},[68,363,364],{"class":102},"セクション1",[68,366,221],{"class":74},[68,368,200],{"class":78},[68,370,169],{"class":74},[331,372,374],{"start":373},2,[334,375,376],{},"移動先の要素へ移動するテキスト（セクション1へ移動）に、手順1で作成したid（#section1）を使った「href」属性を追加します。例：",[58,378,380],{"className":60,"code":379,"language":62,"meta":63,"style":63},"\u003Ca href=\"#section1\">セクション1へ移動\u003C\u002Fa>\n",[65,381,382],{"__ignoreMap":63},[68,383,384,386,388,390,392,394,397,399,401,404,406,408],{"class":70,"line":71},[68,385,75],{"class":74},[68,387,200],{"class":78},[68,389,203],{"class":144},[68,391,148],{"class":74},[68,393,151],{"class":74},[68,395,396],{"class":154},"#section1",[68,398,151],{"class":74},[68,400,215],{"class":74},[68,402,403],{"class":102},"セクション1へ移動",[68,405,221],{"class":74},[68,407,200],{"class":78},[68,409,169],{"class":74},[48,411,412],{"id":412},"動画を埋め込む",[11,414,415],{},"YouTube、Vimeoなどのオンライン動画プラットフォームの動画は、埋め込みオプション（「iframe」タグ）があればランディングページに表示できます。コピーしたら、ランディングページに移動して「iframe」タグを貼り付けます。例：",[58,417,419],{"className":60,"code":418,"language":62,"meta":63,"style":63},"\u003Ciframe width=\"560\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FVIDEO-URL\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen>\u003C\u002Fiframe>\n",[65,420,421],{"__ignoreMap":63},[68,422,423,425,428,431,433,435,438,440,443,445,447,450,452,455,457,459,462,464,467,469,471,474,476,479,481,483,486,488,491,493,495,498,500,503,505,507],{"class":70,"line":71},[68,424,75],{"class":74},[68,426,427],{"class":78},"iframe",[68,429,430],{"class":144}," width",[68,432,148],{"class":74},[68,434,151],{"class":74},[68,436,437],{"class":154},"560",[68,439,151],{"class":74},[68,441,442],{"class":144}," height",[68,444,148],{"class":74},[68,446,151],{"class":74},[68,448,449],{"class":154},"315",[68,451,151],{"class":74},[68,453,454],{"class":144}," src",[68,456,148],{"class":74},[68,458,151],{"class":74},[68,460,461],{"class":154},"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FVIDEO-URL",[68,463,151],{"class":74},[68,465,466],{"class":144}," title",[68,468,148],{"class":74},[68,470,151],{"class":74},[68,472,473],{"class":154},"YouTube video player",[68,475,151],{"class":74},[68,477,478],{"class":144}," frameborder",[68,480,148],{"class":74},[68,482,151],{"class":74},[68,484,485],{"class":154},"0",[68,487,151],{"class":74},[68,489,490],{"class":144}," allow",[68,492,148],{"class":74},[68,494,151],{"class":74},[68,496,497],{"class":154},"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",[68,499,151],{"class":74},[68,501,502],{"class":144}," allowfullscreen",[68,504,164],{"class":74},[68,506,427],{"class":78},[68,508,169],{"class":74},[48,510,512],{"id":511},"googleマップを埋め込む","Googleマップを埋め込む",[11,514,515],{},"Googleマップで住所を検索し、「共有」＞「地図を埋め込む」をクリックして「iframe」タグをコピーすれば、複数のGoogleマップを表示できます。その後、ランディングページに移動して「iframe」タグを貼り付けます。例：",[58,517,519],{"className":60,"code":518,"language":62,"meta":63,"style":63},"\u003Ciframe src=\"https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fembed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\">\u003C\u002Fiframe>\n",[65,520,521],{"__ignoreMap":63},[68,522,523,525,527,529,531,533,536,538,540,542,544,547,549,551,553,555,558,560,563,565,567,570,572,574,576,579,582,584,586,588,590,593,595,597,600,602,604,606],{"class":70,"line":71},[68,524,75],{"class":74},[68,526,427],{"class":78},[68,528,454],{"class":144},[68,530,148],{"class":74},[68,532,151],{"class":74},[68,534,535],{"class":154},"https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fembed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar",[68,537,151],{"class":74},[68,539,430],{"class":144},[68,541,148],{"class":74},[68,543,151],{"class":74},[68,545,546],{"class":154},"600",[68,548,151],{"class":74},[68,550,442],{"class":144},[68,552,148],{"class":74},[68,554,151],{"class":74},[68,556,557],{"class":154},"450",[68,559,151],{"class":74},[68,561,562],{"class":144}," style",[68,564,148],{"class":74},[68,566,151],{"class":74},[68,568,569],{"class":154},"border:0;",[68,571,151],{"class":74},[68,573,502],{"class":144},[68,575,148],{"class":74},[68,577,578],{"class":74},"\"\"",[68,580,581],{"class":144}," loading",[68,583,148],{"class":74},[68,585,151],{"class":74},[68,587,28],{"class":154},[68,589,151],{"class":74},[68,591,592],{"class":144}," referrerpolicy",[68,594,148],{"class":74},[68,596,151],{"class":74},[68,598,599],{"class":154},"no-referrer-when-downgrade",[68,601,151],{"class":74},[68,603,164],{"class":74},[68,605,427],{"class":78},[68,607,169],{"class":74},[79,609,610],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":63,"searchDepth":612,"depth":612,"links":613},3,[614,616,617,618,619,620,621],{"id":50,"depth":615,"text":50},4,{"id":182,"depth":615,"text":182},{"id":231,"depth":615,"text":231},{"id":280,"depth":615,"text":281},{"id":326,"depth":615,"text":326},{"id":412,"depth":615,"text":412},{"id":511,"depth":615,"text":512},"作成・追跡・管理","HTMLを使って、デジタルリンクに区切り線やCTA（行動喚起）などを追加します","md",null,{},true,"\u002Fja\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page",{"title":5,"description":623},"\u002Fja\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page\u002F","ja\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page","Ba9cQRrqGBj7Nyp2s7q8ayTX0VBnCRLbLCkISFbXY64",[],1790247882147]