今まで気が付いてなかった、、、

スマホ表示が変になってたのは全て対策してたつもりだった

ヤマレコの地図・標高グラフをブログに貼りつけていますが

そのままだと半分ほどが切れて見えません

これをスマホで見ても切れないように

パソコンでも問題ないように対策しました

対策前のスマホでの表示

今年に入ってスマホを手に入れ、それから何度かブログもチェックしていたんですが、パっと見は地図も標高グラフも見えていたのでスルーしていました。。。

で、すっかりスマホでのチェック忘れてたんで最近の記事をチェック＆リライトで対策してた時に気が付きました

ヤマレコが書いたコードだし、Bloggerのテーマもスマホも対応して自動で対応するので、こんな不具合があるとは思ってもいなかったのがスルーしていた原因です

ちゃんとチェックしないと駄目だね。。。

これを山に遊びに行った記事全てにアップしています

全てを修正するのは非常に面倒くさい

自分じゃできないのでAIに相談

おぉ！！　助かったぁぁぁ！！

ちなみに、、、

ヤマレコでの設定はコレ

表示調整コード

<script>
(function () {
  'use strict';

  function adjustYamarecoMaps() {
    var frames = document.querySelectorAll(
      'iframe[src*="yamareco.com/modules/yamareco/include/ymap_iframe.php"]'
    );

    frames.forEach(function (frame) {
      try {
        var url = new URL(frame.src);

        // 標高グラフ付きの地図だけを対象にする
        if (url.searchParams.get('graph') !== '1') return;

        // 埋め込み先の表示可能幅を取得
        var parentWidth = frame.parentElement.clientWidth;

        if (!parentWidth) {
          parentWidth = document.documentElement.clientWidth - 24;
        }

        // 地図幅は最大600px、最小300px
        var mapWidth = Math.floor(
          Math.min(600, Math.max(300, parentWidth - 2))
        );

        // iframeの幅は地図幅＋2px
        var frameWidth = mapWidth + 2;

        // iframeの表示幅を調整
        frame.setAttribute('width', frameWidth);
        frame.style.width = frameWidth + 'px';
        frame.style.maxWidth = '100%';

        // YAMARECO側の地図生成幅を調整
        if (url.searchParams.get('w') !== String(mapWidth)) {
          url.searchParams.set('w', mapWidth);
          frame.src = url.toString();
        }

      } catch (e) {
        // 他の埋め込みには影響させない
      }
    });
  }

  // 初回表示
  adjustYamarecoMaps();

  // 画面サイズ変更・スマホの縦横回転に対応
  var resizeTimer;

  window.addEventListener('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(adjustYamarecoMaps, 200);
  });

})();
</script>

これを</body>の直前に貼り付けてください
自動で調整してスマホでも全体が見れます
ヤマレコのコードだけを指定しているので他のiframeには影響ありません

        // 地図幅は最大600px、最小300px
        var mapWidth = Math.floor(
          Math.min(600, Math.max(300, parentWidth - 2))
        );も

もっと小さい場合も表示したい場合はココを調整、、、
そこまでしなくて良いと思いますが、、、

ブログに貼付けしている方は、、、どれだけいるだろう

すでに対策している方もいるとは思いますが、、、

諦めてブログ貼付けしていない方は参考にしてください