日別アーカイブ: 2014-07-06

地図を目次にするウィジェットの作り方

概要

多くの情報の中から欲しいものを素早く入手するには、事前に仕掛けを作っておかなければなりません。病院のカルテを氏名で50音に整理し、あ行、か行…と10分割するだけでも検索が楽になります。

本などでも、部、章、節、項と階層化して目次を作り、ページと対応づけをすることはオーソドックスな手法です。ここでは地図を目次にするページの作り方を示します。

今回の仕様

各都道府県のジャンプアドレスは都道府県の地域ニュースにしています。このリンク先は最後にローマ字で県名が付くという約束事になっているので参照させてもらっていますが、実際には所望するリンク先のアドレスを指定します。

例に使ったサイトはサイドバーがないので、全画面表示でありメイン記事と県別目次を同一画面上に併用表示はできませんが、次の県の情報を表示するには前画面に戻ればサイドバーに全国地図が現れるので次の県をクリックします。

リンク先をここだけの耳よりな話のように同一サイトの特定箇所にすれば、地図の目次は常にサイドバーに表示されています。地図から次々に県の情報を表示させる場合に便利な機能です。

作り方は少し複雑です。以下に順を追って説明します。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 作り方はここから ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

作り方の手順

➊準備

目次をウィジェットに表示して、他とのかかわり、全体と個の関連を理解しやすいように表現するにはWordPressのカスタマイズから始めます。WordPressのカスタマイズ実践編により準備します。

➋地図データの入手

無料地図素材.netからjapan06.gifと制御コードをダウンロードします。デザイン的にはhttp://www.abysse.co.jp/のmap14-2.jpgを好みますが、japan06.gifには制御コードが付いているのでこちらを選びました。説明のため、ダウンロードした制御コード(テキストイメージ)のファイル名をjapan06.TXTとします。

ここで1枚の画像に複数リンクを貼る技術を習得しなければなりません。クリッカブルマップ、HTML Import2など様々なリポートがリリースされていますが、ここで入手した2つのファイルだけでもWordPressで立派に動作しました。無料地図素材.net様に感謝申し上げます。

japan06

制御コード(japan06.txt)を以下に示します。

japan06-gif

➌地図と制御コードを編集

上の図を修正します。ここだけの耳よりな話ボタンを追加します。このボタンデータを作成するにはフリーアプリC-MAP.exeが便利ですが、佐賀県、石川県、北海道、青森県のデータから作成する方が近道です。ペイントで関連する県から位置決めして文字を入れて完成です。新しくできた画像ファイル名をjapan06X.gifとします。

japan06X

➍地図画像をロード

japan06X.gifをアップロードしURLアドレスを確保します。

➎リンク設定と制御コード作成

japan06.TXTのリンク先(http://www.yahoo.co.jp)を都道府県の地域ニュース(http://www.47news.jp/localnews/)に一律変更します。/の後に県名をnagasakiのように追加すれば、県のニュース先のアドレスになります。

ここだけの耳よりな話ボタンの制御コードを長崎県データの前に挿入しjapan06.TXTを編集します。ボタンは四角形であり、佐賀県のデータが参考になります。

➏クリッカブルマップに組込む

さらにjapan06.TXTテキストファイルの先頭にアップロードしたjapan06X.gifの情報を加えます。作成には以下の2画像が参考になります。

jump-3

上の図からクリッカブルマップのareaタグにマッチするように修正を加えたのが下図です。ファイル名を修整しここだけの耳よりな話ボタン情報を加えています。

jump-4

➐ウィジェット記事を登録

ダッシュボード-Content Blocks-ADD Content Blockと進み、タイトルと記事を作成します。ガイドメッセージの下に3項でアップロードした画像を配置:なし、フルサイズ-450X300で挿入します。次に画面モードをHTMLにしてjapan06.txtのテキストを挿入します。最後は公開(更新)をクリックします。ウィジェットの画面はメインエリアよりも小さいですが、img内のwidth、hightの値を変更しないことがミソです。

自分で作成した47都道府県のページにリンクする場合は、areaタグ内のhref URLアドレスを変更します。同一ページ、同一ブログ、他のサイトへリンクできます。また、ページの途中にジャンプさせる場合は、あらかじめアンカーを作っておきます。

➑ウィジェットを条件付き表示

ウィジェットはすべての記事で、サイドに表示されます。目次は対象となるページの時だけに表示されるように条件を付けます。ダッシュボード-TS Custom Widgetsと進んで地図を目次にする方法地図を目次にするウィジェットの作り方の専用ウィジェットであることを関連づけます。WordPressのカスタマイズ実践編の「サイドバーの記事掲載を条件付き」、「ウィジェットエリアに目次を作成」を参照ください。

 まとめ

1画像に48(47+1)個のリンクを貼って地図を目次にするウィジェットの作り方をひととおり眺めてまいりました。技術が多岐にわたり、複雑に感じるかもしれません。そのような場合は四国4県だけの目次を作るなど、ハードルを下げてみるのもよいでしょう。

➐ウィジェット記事を登録ではウィジェットに記事を載せる方法を述べましたが、メインエリアで動作を確認してからウィジェットに持っていく方法がやさしいかも知れません。

ウィジェットに移動したとき、画像が表示されるのにクリックが利かない場合は、画面サイズが小さくなったのに、レスポンシブ機能が働いていないことが原因になっていることが多いです。jquery.jsやプラグインツールについて確認するとよいでしょう。

47県は数が多いので、文字列を一律に他の文字列に置き換える機能のあるテキストエディタがあると効率的でしょう。

 感想

地図から指定した箇所の情報を引き出すウィジェットページの作り方をマスターできました。WP Pic Taggerが使えなくなってがっかりしましたが無料地図素材.net様の日本地図と制御コードが見つかり、それからはスラスラ進展しました。

リンクを貼る画像エリアは閉じた多角形、円などであればどんな形にも対応できます。おかげで引き出しの中に宝物が1つ増えました。