WordPress│マトリックス図からのリンクの作り方

2020.12.262026.10.05

画像内の円を押すと、それぞれの説明へ移動するイメージマップを作ります。

画像が縮小されたときは、元画像の座標からクリック範囲を計算し直します。

この例はjQueryや外部の補助ライブラリを追加しません。

動く見本

円または画像下の通常リンクから移動できます。

ツール名はリンクの識別用で、製品の現行価格や提供状況を示す図ではありません。

画像を使わずに移動：Maya / Unity / After Effects / Live2D / Photoshop / Illustrator / Adobe XD

2026年10月2日の公開見本の検証では、画像読み込み後と、PC幅から390px幅へ切り替えた後の座標更新を確認しました。

6つの円がそれぞれの説明へ移動することを確認しました。

画像を使わずに移動したいときは、直下の通常リンクを使えます。

スマホ幅390pxに縮小した6領域の画像マップと、同じ移動先の通常リンクが表示されたWAZAの実画面 — 2026年10月2日撮影。SWELL 2.19.0、390px幅。PC・スマホ幅で6つの円から対応する説明へ移動できることを確認しました。実機のタッチ操作とは別の検証です。

サンプル：Maya

Mayaの移動先です。

実際の記事ではここに説明を記載します。

サンプル：Unity

Unityの移動先です。

実際の記事ではここに説明を記載します。

サンプル：After Effects

After Effectsの移動先です。

実際の記事ではここに説明を記載します。

サンプル：Live2D

Live2Dの移動先です。

実際の記事ではここに説明を記載します。

サンプル：Photoshop / Illustrator

Photoshop / Illustratorの移動先です。

実際の記事ではここに説明を記載します。

サンプル：Adobe XD

Adobe XDの移動先です。

実際の記事ではここに説明を記載します。

カスタムHTMLブロックへ貼るコード

以下を1つのカスタムHTMLブロックへ貼ります。

本文へスクリプトを保存できる権限・環境を前提にしています。

管理者でもマルチサイトやサイトの制限によって保存できない場合があります。

保存後にscriptが除去される環境では、そのままでは座標補正は動きません。

画像が縮小されたときにクリック範囲がずれる場合は、画像下の通常リンクを使ってください。

旧例のCDN版jQueryとrwdImageMapsのscriptは同じ見本へ重ねて設置しないでください。

<img id="waza-matrix-image" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/matrix.png" usemap="#waza-matrix-map" alt="6種類の制作ツールを配置した図。下に同じ移動先のリンク一覧があります。" style="display:block;max-width:100%;height:auto;border:0;padding:0">
<map name="waza-matrix-map" id="waza-matrix-map">
<area shape="circle" coords="530,105,36" data-original-coords="530,105,36" href="#waza-matrix-maya" alt="Mayaの説明へ">
<area shape="circle" coords="605,296,34" data-original-coords="605,296,34" href="#waza-matrix-unity" alt="Unityの説明へ">
<area shape="circle" coords="423,228,34" data-original-coords="423,228,34" href="#waza-matrix-ae" alt="After Effectsの説明へ">
<area shape="circle" coords="291,192,34" data-original-coords="291,192,34" href="#waza-matrix-live2d" alt="Live2Dの説明へ">
<area shape="circle" coords="200,225,34" data-original-coords="200,225,34" href="#waza-matrix-design" alt="Photoshop / Illustratorの説明へ">
<area shape="circle" coords="97,296,35" data-original-coords="97,296,35" href="#waza-matrix-xd" alt="Adobe XDの説明へ">
</map>
<p>画像を使わずに移動：<a href="#waza-matrix-maya">Maya</a> / <a href="#waza-matrix-unity">Unity</a> / <a href="#waza-matrix-ae">After Effects</a> / <a href="#waza-matrix-live2d">Live2D</a> / <a href="#waza-matrix-design">Photoshop / Illustrator</a> / <a href="#waza-matrix-xd">Adobe XD</a></p>
<script>
(() => {
  const image = document.getElementById('waza-matrix-image');
  const map = document.getElementById('waza-matrix-map');
  if (!image || !map) return;
  const update = () => {
    if (!image.naturalWidth || !image.clientWidth) return;
    const ratio = image.clientWidth / image.naturalWidth;
    map.querySelectorAll('area[data-original-coords]').forEach(area => {
      const values = area.dataset.originalCoords.split(',').map(Number);
      area.coords = values.map(value => Math.round(value * ratio)).join(',');
    });
  };
  image.addEventListener('load', update);
  if ('ResizeObserver' in window) new ResizeObserver(update).observe(image);
  else window.addEventListener('resize', update);
  update();
})();
</script>