TCDテーマREHUB：日本地図の各エリアの位置を調整する方法

Q. 日本地図で各エリアのコンテンツ同士が被ってしまう場合がありますが、どうしたら良いでしょうか？

▼参考事例

上記のように北海道エリアに複数の市町村を設定すると、東北エリアと被ってしまうことがあります。

A. 「カスタムCSS」の機能で各所調整可能です。

今回は上のパターンのように「北海道エリア」と「東北エリア」が被ってしまった場合を想定します。
管理画面のTCDテーマ＞基本設定＞カスタムCSSエリアに、以下のCSSを記載してください。

▼参考CSS例

/* 日本地図の位置調整 */
.p-jmap-a-list__item.p-jmap--tohoku {
    top: 210px;
}

.p-jmap-a-list__item.p-jmap--kanto {
    top: 360px;
}

.p-jmap-a-list__item.p-jmap--kinki {
    top: 500px;
}

.p-jmap-a-list__item.p-jmap--shikoku {
    top: 500px;
}

.p-jmap-a-svg {
    top: 70px;
}

.p-jmap-a {
    height: 675px;
}

各エリアは枠線内の日本地図コンテンツの“上から何pxの位置か”を指定して配置しております。
その為、上記のCSSの様に北海道の下に配置されているエリア（東北、関東、近畿、四国）の位置を、
カスタムCSSで更新することで、重なりを改善することが可能です。

またそれに併せて、日本地図コンテンツ全体の高さと、日本地図の画像の位置を調節する必要があります。（各エリアが下にずれて、枠線からはみ出てしまったり見栄えが悪くなる為）
以下のCSSで日本地図コンテンツの高さ（p-jmap-a）、日本地図画像の位置（p-jmap-a-svg）を変更しています。

.p-jmap-a-svg {top: 70px;}.p-jmap-a {height: 675px;}

▼修正後

備考

※本記事の参考CSSでは既存の位置からそれぞれのエリアを40pxほど下にずらしています。
pxの値などはお客様の方で、ご自由に変更して調節してくださいませ。