narumekoさん

ご提示いただいたURLは、管理画面内であり、外部からは確認できません。
アクセスすると、以下のようにログイン画面が表示されてしまいます。

投稿者:: @narumeko

対象のページのURL：

https://naru-neko.com/wp-admin/post.php?post=2670&action=edit

もしくは、貼り付けたコードをフォーラムにも貼り付けていただくか。
（コードの貼り付けができない場合は、テスキトファイルの添付でも良いと思います。）

投稿者:: @narumeko

②今後地図内のポップを増やしていく予定でいるため、カスタムHTMLはどこまで行数が増やせる（無限？）のか知りたく存じます。

こちらは特に聞いたことがありませんので、制限は特にないものと思われます。

サーバーの設定で、1投稿あたりの容量の制限はあるかもしれません。
（それも、設定である程度変更できるものと思われます。）

ただ、外部参照するようなものであれば、大量に貼り付ければページの表示速度は遅くなってしまいますので、そこは考える必要はあると思います。

早速のお返事ありがとうございます。
また、ページが見れない旨大変失礼いたしました。

公開設定にしましたので確認可能か見ていただけるとありがたいです。
https://naru-neko.com/test/

画像については少々お待ちいただけますでしょうか。
プレーンテキストで貼っているつもりなのですが、なぜかうまく反映されず。。

（編集画面HTML）

（編集画面プレビュー）

（公開画面）

申し訳ございません。
なぜ画像がうまく貼れないのかが良くわからなくて、、。

先ほど貼り付けようとしていたURLは以下３つで、各アドレスの最後に『.jpg』を付けたものです。
『.jpg』を付けるといただいた表示のようになってしまうので一旦『.jpg』を消しました。

http://netakiri.net/uploader/src/up0697
http://netakiri.net/uploader/src/up0698
http://netakiri.net/uploader/src/up0699

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

narumekoさん

ちょっと時間がなく、しっかりと確認しておりませんが。。。

投稿者:: @narumeko

公開設定にしましたので確認可能か見ていただけるとありがたいです。
https://naru-neko.com/test/

上記は「404 Not Found」になってしまい、閲覧できないです。

もしかして、国土地理院の地図を埋め込もうさなさっていますか？

画像を拝見すると、Scriptの一部が見える気がしますが、完全なものではないような気がしますが、ちょっと良く分かりません。

一番簡単なのは、以下の国土地理院のヘルプページに説明がある通りですが。。。
https://maps.gsi.go.jp/help/intro/kinolist/8-kyoyu.html

上記ページの右下の「iframe」の方法が簡単な気はします。

画像が添付できないのは、httpのサイトなので表示できないようです。

「新しいタブで開く」等でURLに直接アクセスすると画像が見れます。

テストページは私も404になってしまいました。

narumekoさん

画像の添付については、一旦画像をPCに保存ください。

その後、フォーラムのエディタ下部のボタンから添付できます。

「iframe」の方法でも、場所や縮尺は問題なく表示できるような。。。
Scriptでなくても良い気はしますが。

色々教えていただきありがとうございます。

アクセスできるようにUPしてみました。見れますでしょうか？
https://naru-neko.com/test00/

該当の地図はLeaflet経由で地理院地図を使ったものだと認識してます。
こちらのサイト（ https://ktgis.net/service/leafletlearn/index.html#step1 ）で公開されていたStep1のコードを使いました。
このStep1のコードをそのままカスタムHTMLに貼り付けても「プレビューはできるが表示されない」状態になります。

目的は地図の上にマーカーを置いて、ポップアップでリンクを貼ることです。
（イメージは添付画像のような感じ）
（ポップアップ内のワードも検索できるようにしたい）
そう思って検索していたら上のサイトに行きつきました。

国土地理院のサイト、少し使ってみましたが、地理院地図のサイト上では添付画像のようにマーカーを置いたりはできましたが、マーカーが記載された状態だと「iframe」で表示できませんでした。
（初期状態の地理院地図は「iframe」で問題なく表示できました）

やはりカスタムHTMLだと難しいのでしょうか・・。

narumekoさん

私は国土地理院のものか…と推測しただけです。

実際に、どんなコードを貼ったのかが分からないと試しようがないです。

またコードについては、画像で添付されても、長いコードをコチラで手打ちすることはしません。
実質的にできません。

• どういうコードを貼ったのか
• それは、何を参考にして、どういうことをしたいのか

などなど、分かりませんので、試していません。

カスタムHTMLでできないなんて、一言も言っておりません。
（カスタムHTMLは、単にHTMLソースをそのまま貼り付けるだけですので、HTMLが正しければ何の問題もないはずです。）

まだ、何をしたいのかが分からないという状態だっただけです。

「Leaflet」については、私は初見です。

正直使い方は分かりません。

ただ、単に投稿中に貼れば良いというものには見えないのですが。。。

リンクしていただいたStep1だけを見ても。。。

Step 1.Leafletで地理院地図を表示する最も基本的なコード

• Leafletを使うための、cssとJavaScriptライブラリを指定する（6～7行）
• body要素内にdiv要素を作成し、idを設定する（ここでは"mapcontainer"）（19行）
• JavaScriptで関数initを作成し、L.mapオブジェクトでLeafletの地図を表示するdiv要素のid、"mapcontainer"を指定して地図を作成し、mapに入れる（10行）
• setViewメソッドで地図の中心の経緯度とズームレベルを指定する（11行）
• Leafletには独自の地図データは含まれていないので、ここでは地理院タイルをタイルレイヤに設定して、addToメソッドでmapに入れる（12～14行）

上記のようにあります。
ソースを見た限り、「head」タグに書いて準備をしておかねばならないように見えます。

となると、カスタムHTMLのことではなく、「Leaflet」の埋め込み方というご質問なんだと思います。

正直、使ったことないですし、試すにはエネルギーが必要そうで、ちょっと時間に余裕がないと難しい。。。という印象を抱きます。

使ったことのある方がいらっしゃれば良いのですが。。。

例えば、以下のサイトに記載のコードを埋め込むと、「Leaflet」の地図が表示されるようです。
https://drawtrail.net/how-to-start-leaflet/

投稿者:: @narumeko

アクセスできるようにUPしてみました。見れますでしょうか？
https://naru-neko.com/test00/

上記は見えますね。
真っ白…ですけれど。

正直使い方が分からないのですが。。。

以下の画像の「埋め込みコード」部分を丸ごとコピーして。。。

2つ貼ってみましたが、特に問題なく表示されますねぇ。。。

narumekoさん

とりあえず今回のお問い合わせ内容は、カスタムHTMLというよりは、「Leaflet」に関するもののように思われます。

最初に「Leaflet」のコードであること。
そしてどうやってそのコードを生成したのか。

ポップアップの利用、リンク機能の利用など、お伝えいただくべき事案だと思われます。

それによって、調べる内容なども違うのではないかと。

正直、私はまだポップアップやリンクについては、どうやってコードを生成するのかすら分からないです。

「Leaflet」に対する知識がないですので。
その辺りのことは、ご教示いただかないと分からないです。

少なくとも、ただ「Leaflet」の地図を埋め込むだけであれば、先に私が試したとおり、問題なくできそうです。実際のページにも表示されます。

ポップアップやリンクや検索機能がつくとどうなるかは、今のところ分かりません。（それらの機能があると、必要な設定内容も変わる感じがします。。。おそらく。）

そして、まったく同じマップ（コード）を同じページに埋め込むと、プレビューでは表示されるものの、実際のページ表示では片方しか表示されない感じでした。（私の設定ミスかもしれませんが。）

「Leaflet ポップアップ リンク」「Leaflet ポップアップ 検索」などで検索いただく方が良いように思います。

検索機能は、プラグインの導入で実現しているようなことが書いてあるサイトもありました。

ポップアップ、リンクや検索機能をつけることは、「Leaflet」の機能であり、カスタムHTMLの話ではない気がします。

私は「Leaflet」については、今回初めて知りましたし、正直知識はないです。

ご存知の方をお待ちになるか、ご自身で検索していただくしかない気がします。（今のままでは情報が足りない気はします。）

お返事遅れて申し訳ございません。
また、様々なご教示ありがとうございます。
いただいた検索方法を試しながら色々なサイト様で情報集めしましたところ、少し時間がかかりましたが解決いたしました。

おっしゃる通り、コードの方に問題がありました。
コードの中で、地図中に画像を入れるコードをコピペで加えていたのですが、画像の引用の仕方を絶対参照から相対参照に変更してみたところ公開画面でも表示できるようになりました。

この度は当方勉強不足で、見当違いな発言が多く、大変失礼致しました。
情報いただいたおかげで何から調べたらよさそうか見当づけることができました。
特にカスタムHTMLのところ、よくわかっておらず大変失礼な発言をしてしまいましたことお詫び申し上げます。
こちらで質問してなかったら諦めていたと思うので、大変助かりました。ありがとうございます。