絶景@日本

素人写真で紹介する日本の絶景スポット

テーブルタグで日本地図を作りました


スポンサーリンク

f:id:zekkei-japan:20180513031528j:plain

もはや旅行記?日記?雑記?と化している当ブログ「絶景@日本」ですが、、、
日本各地の絶景を紹介するに当たり、日本地図の該当する都道府県からリンクで飛べるように
視覚化したいとずっと思っていました

カテゴリで分けるのもアリかもしれませんが、
それだけで47個もカテゴリが増えるのはゴチャゴチャしそうですし(>_<)

実は以前やっていた別のブログでもテーブルタグを使って下のような日本地図で表記して
リンクで各都道府県の記事に飛べるようにしていました

f:id:zekkei-japan:20180513193710j:plain

ところが、、、

ブログによって同じテーブルタグでも表示のされ方(読み込まれ方)が違うんですかね(>人<;)
当ブログで同じようにタグを書き込んだ所、こんな風に表示されました

f:id:zekkei-japan:20180513194517j:plain

日本が分断されました(笑)

そこで貧しい知識をあ~でもない、こ~でもないと
修正を繰り返しながら何とか作りました!!

それがこちらです!

f:id:zekkei-japan:20180513031528j:plain

簡単に言うと、横21マス×縦18マスのマス目状の表を作って該当する表の所に
各都道府県を表記するようにしました

都道府県以外は背景と罫線の色を背景の白にして何もないように見せています
罫線に関しては太さは0pxにすれば見えなくなると思ったんですが、、、
都道府県を表記している所に引っ張られるのか罫線が表記されてしまう部分があったので
罫線に色を背景の白と同じにしました

厳密に言えば、都道府県の位置関係や大きさが変だと思いますが、それは御勘弁下さい!

参考までにこの地図では面積の大きさが
北海道 > 新潟 = 長野 = 兵庫 > 青森 = 沖縄
となっていますが、
実際は
北海道 > 岩手 > 福島
の順です(笑)

更にパソコン画面ではキチンと記事の枠内に収まっていますが、
スマホ(iPhone7)で見ると下図左のようになっていて、右のように少しズラさないと見れない結果に、、、
まだまだ改善が必要ですね(>人<;)

f:id:zekkei-japan:20180513202159p:plain
f:id:zekkei-japan:20180513202204p:plain

その代り(?)、各都道府県ごとにリンクも貼れるし、背景の色を変えられるので白地図に行った所のある
都道府県だけに色を付けると言うのも可能です♪

ちなみに彼女さんとは死ぬまでに47都道府県制覇を目指していますが、
お付き合いする前からも含めてこれまで2人で行った都道府県はこんな感じです
(当初はHTMLで日本地図を載せてましたが、画像に変更しました)

f:id:zekkei-japan:20180514013255j:plain

まだまだ制覇までの道のりは険しいですね

せっかく作ったので活用していきたいと思います(^ ^)

誰か、これを使いたい!って人は、、、いないかな?(笑)