【ワードプレス】無料素材を使ってリンク付きの日本地図を作る方法

無料ホームページテンプレートの素材屋さんに

日本地図の素材があったので、こちらを使わせていただくことにします。

上記のホームページに乗っている、ソースコードを貼るとなぜか、こんな感じになってしまいました。

なぜか、本州が２つにわかれてしまってるので、くっつけることにします。

そして、なんかバランスも悪いので、大きさを調整すると

こんな感じになりました。

そして、線も全部消します。

また、スマホで見たとき都道府県名が変に改行されてしまい、地図の形がいびつになっていたので、

改行させないようにします。

こんな感じになりました。

これで、完成です！

ソースコードを載せておきますので、使用したい方はご自由にお使いください。

<!--★始まり-->
<table cellspacing="0" cellpadding="0">
<tr>
<td style="border:none;" align="right">

<table cellspacing="1" cellpadding="0">
<tr height="40" style="font-size:10px;text-align:center;">
<td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" width="80" height="70">
<a href="http://www.hokkaido-jin.jp/" target="_blank">北海道</a>
</td>
</tr>

<tr>
<td style="border:none;" height="10"></td>
</tr>
</table>



<table cellspacing="1" cellpadding="0" style="font-size:10px;text-align:center;border-style:none;">

<tr height="35">
<td style="border:none;" colspan="11"></td><td style="border:none;"></td><td style="border:none;"></td><td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://portal.pref.aomori.jp/" target="_blank">青森</a>
</td>
<td style="border:none;"></td>
</tr>
<tr height="35">
<td style="border:none;" colspan="11"></td><td style="border:none;"></td><td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.akita.jp/index.htm" target="_blank">秋田</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.iwate.jp/" target="_blank">岩手</a>
</td>
<td style="border:none;"></td>
</tr>
<tr height="35">
<td style="border:none;" colspan="11"></td><td style="border:none;"></td><td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.yamagata.jp/" target="_blank">山形</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.miyagi.jp/" target="_blank">宮城</a>
</td>
<td style="border:none;"></td>
</tr>
<tr height="35">
<td style="border:none;" colspan="11"></td>
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.ishikawa.jp/" target="_blank">石川</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.toyama.jp/" target="_blank">富山</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="30" nowrap>
<a href="http://www.pref.niigata.jp/" target="_blank">新潟</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="30" nowrap>
<a href="http://www.pref.fukushima.jp/" target="_blank">福島</a>
</td>
<td style="border:none;"></td>
</tr>

<tr height="25">
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.nagasaki.jp/" target="_blank">長崎</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="30" nowrap>
<a href="http://www.pref.saga.jp/" target="_blank">佐賀</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.fukuoka.jp/" target="_blank">福岡</a>
</td>
<td style="border:none;" width="10"></td>
<td style="border:none;" bgcolor="#99ff99" width="22" rowspan="2" nowrap>
<a href="http://www.pref.yamaguchi.jp/" target="_blank">山口</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.shimane.jp/" target="_blank">島根</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.tottori.jp/" target="_blank">鳥取</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" rowspan="2" nowrap>
<a href="http://web.pref.hyogo.jp/" target="_blank">兵庫</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="30" nowrap>
<a href="http://www.pref.kyoto.jp/" target="_blank">京都</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.shiga.jp/" target="_blank">滋賀</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" nowrap>
<a href="http://www.pref.fukui.jp/" target="_blank">福井</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="22" rowspan="2" nowrap>
<a href="http://www.pref.nagano.jp/" target="_blank">長野</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="30" nowrap>
<a href="http://www.pref.gunma.jp/index.html" target="_blank">群馬</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="30" nowrap>
<a href="http://www.pref.tochigi.jp/" target="_blank">栃木</a>
</td>
<td style="border:none;" bgcolor="#99ff99" width="30" nowrap>
<a href="http://www.pref.ibaraki.jp/" target="_blank">茨城</a>
</td>
<td style="border:none;" width="20"></td>
</tr>

<tr height="25">
<td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.kumamoto.jp/" target="_blank">熊本</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.oita.jp/" target="_blank">大分</a>
</td>
<td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.hiroshima.jp/" target="_blank">広島</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.okayama.jp/" target="_blank">岡山</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.osaka.jp/" target="_blank">大阪</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.nara.jp/" target="_blank">奈良</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.gifu.lg.jp/" target="_blank">岐阜</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.yamanashi.jp/pref/index.jsp" target="_blank">山梨</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.saitama.jp/" target="_blank">埼玉</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.chiba.jp/" target="_blank">千葉</a>
</td>
</tr>

<tr height="24">
<td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.kagoshima.jp/" target="_blank">鹿児島</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.miyazaki.jp/" target="_blank">宮崎</a>
</td>
<td style="border:none;"></td><td style="border:none;"></td><td style="border:none;"></td><td style="border:none;"></td><td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.wakayama.lg.jp/" target="_blank">和歌山</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.mie.jp/" target="_blank">三重</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.aichi.jp/" target="_blank">愛知</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.shizuoka.jp/" target="_blank">静岡</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.kanagawa.jp/" target="_blank">神奈川</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.metro.tokyo.jp/" target="_blank">東京</a>
</td>
</tr>

<tr height="20">
<td style="border:none;"></td><td style="border:none;"></td><td style="border:none;"></td><td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" colspan="2" nowrap>
<a href="http://www.pref.ehime.jp/" target="_blank">愛媛</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.kagawa.jp/" target="_blank">香川</a>
</td>
</tr><tr height="20">
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.okinawa.jp/index-j.html" target="_blank">沖縄</a>
</td>
<td style="border:none;"></td><td style="border:none;"></td><td style="border:none;"></td>
<td style="border:none;" bgcolor="#99ff99" colspan="2" nowrap>
<a href="http://www.pref.kochi.jp/" target="_blank">高知</a>
</td>
<td style="border:none;" bgcolor="#99ff99" nowrap>
<a href="http://www.pref.tokushima.jp/" target="_blank">徳島</a>
</td>
</tr>
</table>

</td>
</tr>
</table>
<!--終わり★-->