ランディングページ内にアンカーリンクを設置したい

Question

コミュニティを検索しても記載している箇所がなかったのでご質問させていただきました。

Marketoで作成したランディングページ内にアンカーリンクを設置し、ページ内リンクをさせたいのですが

可能なものなのでしょうか。

ランディングページはフリーフォームランディングページをテンプレートとして作成したので

エディター上で編集等しています。

ページ上部に申込みフォームまでのボタンを配置し、申込みフォームの見出しにアンカーを設置。

上部ボタンにページ内の見出しまでのリンク先を設定してフォームの見出しまで飛ばしたいという内容です。

アンカーリンクを設置.png

簡単に図を作ってみましたが、イメージとしてはこんな感じです。

見出し部分を画像で作ってしまったので、空白のリッチテキストを見出し画像の上に設置して

リッチテキストのHTML内にidを入れてみたのですがうまくいきませんでした。

どなたかご存知の方、恐れ入りますがご教示ください。

よろしくお願い致します。

Taishi_Yamada · Accepted Answer

>>LP上のエディターから編集する方法がわかりませんでしたLPもTemplateの作りで2タイプあって、Guided TemplateとFree-formとありますが。。。。○Guided Templateの場合↓の例で、Landing PageのEdit画面において、仮に左上の知りつけた画像にidを入れたいとします。↓この部分は、破線の部分で「１つの編集枠」としてTemplate上で設計してあるので、ここを「Edit」（ダブルクリック）すると、Rich Text Editorが開きます。↓Rich Text Editorには、この破線枠の中は、いまは画像1点だけ入ってます。そして、この破線内部分のコードのソース（HTML)を開きたいので、HTMLボタンを押します。↓HTML Source Editorが開きます。該当箇所のソースが表示され、中身はこのようになってます。（画像だけなのでシンプルなコードですね）↓今回は、このimgにジャンプできるように。。。ということで、この<img>に idを足してあげます。下記のように書き足します。あとは保存すればOKです。○free-formの場合確かに選択肢のImageを使うと、idを入れる余地が無さそうですね。なので隣のRich Textで代用します。↓Rich Text Editorから、Insert Imageをクリックして↓画像を指定するとともに、"Advanced"を開いて、そこからIDを指定します。そうすると、先程のHTMLソースで手書きしたのと同じ様に、idが挿入されます。念の為、保存してから、改めてHTMLソースをRich Text EditorのHTML Source Editorから見てみると。。。↓のように、idとして値が差し込まれているのが分かりますね。という手順ですね。こうすれば、個々のLPのAssetごとに編集できそうです。なお、後者の技は、Guided TemplateのRich Text Editorの中において、画像を挿入するときにも同じく可能ですね。>>LPそのもののソースコードの編集はデザインスタジオからしかできないという理解ですが1つ目の例のように、Guided Templateの場合は、予めTemplateで指定した領域の中であれば（その指定手段などは、TemplateのルールとしてMarketo Docsに説明があります）、HTMLソースの編集は可能です。Free-Formの場合は、Rich Textの領域なら、その中を編集できますね。以上、ご参考までに。-Yamada

Taishi_Yamada · Answer

@雅彦金子さん、こんにちはRich Text Editorの編集画面についての謎は別として、anchorをLPで使えますか？という点でいうと、可能です。anchorの仕組みは、特定のElement（HTMLの１要素）に付けられたidを使って、そのidのところまで飛ぶ。という単純なものです。そのため、まず、飛ばしたい先のElementを編集画面で開いて、HTMLのコードを直接編集してしまってください。たとえば、飛ばしたい先が「画像」なら、という要素があると思うので、そこにおもむろにと書き足します。test123は任意の文字列に変えてください(アルファベットor数字で）。既にidとして何か入っているなら書き足さずに、既にあるidの値をそのまま使えばOKです。なお、大原則として、１つのページの中で、idは重ならないことになってます。画像ではなくて、テキスト（段落）なら

のところを

みたいな感じですし、他にも

とかでも問題ないです。そして、飛ばしたい「元」（クリックする箇所）の方ですが、これはようはただの「リンク」です。HTMLのコードを直接編集。。。。。でもいいですが、Rich Text Editorの「リンク」ボタンを使って編集でもOKです。その場合、↓のURLのところに　#test123　と記載してください（先頭にシャープをいれて、先程つけたID文字列を入れる）。これによって、クリックすると同じページ内の、そのidをもつElementの場所にジャンプします。あと、↓のTargetを変更して、「Current Window」に変更してください(New Windowのままだと、新しいTabをブラウザ上で開け。ということになってしまうので・・・）。それから、今は「同じページ内でのジャンプ」ですけれど、他のページから、いきなりtest123に飛ばすことも可能です。その場合は、他のページ上でのリンクのところで、https://www.example.com/ja_jp/index.html#test123といったようにリンクを指定します。index.htmlまでは、そのページ名のURLを。そして。#test123 を足す。という感じですね。以上、ご参考までに。-Yamada

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded