マップに矢印を乗せる方法
ホームページに、「道順」を載せたい時があります。
道順を撮影した写真だけでも、わかりやすいですが、
例えば「右に曲がる」などの説明は、矢印があるとさらにわかりやすくなります。
そこで、道順の写真を撮影して、classを設定するだけで、矢印が出るようにしてみました。
iPhoneなどのスマートフォンでも、崩れずに表示されるはずです。
矢印のサンプル
go-straight arrow
go-left arrow
go-right arrow
turn-right arrow
turn-left arrow
画像にclassを設定する
WordPressに一旦メディアを追加すると、その画像を編集する部分にclassの設定が出てきます。
- 画像を一旦入れる
- 画像をクリックして鉛筆マークから編集に移動する
この、画像CSSクラス という部分に、go-right などの、上記に書いたclassを設定するだけで、矢印を表示します。
この時に「arrow」を忘れず。
つまり、右斜め前であれば、「go-right arrow」と、両方書かないといけません。
MapArrow-Essenceのダウンロード
プラグインは下記リンクからダウンロードできます。
いつものことながら、自己責任でお願いします。
WordPress のテンプレートが崩れたり、脆弱性が発生した場合など
このプラグインを使った場合のいかなるトラブルも責任を負いかねます。
大変恐れ入りますが、自己責任のもとでご利用ください。
技術的な解説
画像に対して、自動的に矢印を挿入する処理をしています。
しかし、画像そのものに、::before ::after などの擬似クラスを使うことができないので、jQueryで画像のclassを判別して、外側にdivを追加しています。
jQuery( "img.arrow" ).wrap(function() {
var arrow_class = $( this ).attr("class");
var classVals = arrow_class.split(' '); // 取得した値を分割
var arrow_class = 'arrow-essence ';
// 配列になっているのでforで一つずつ取得できる
for (var i = 0; i < classVals.length; i++) {
if ( classVals[i].indexOf("go-") != -1 || classVals[i].indexOf("turn-") != -1 ) {
arrow_class += classVals[i];
};
};
var arrow_width = $( this ).width();
var arrow_height = $( this ).height();
return "
＜div class=”” + arrow_class + “” style=”height: ‘ + arrow_height + ‘px; width: ‘ + arrow_width + ‘px;”>
“;
});
うーん、もっとスマートなやり方がありそうだけれど・・
画像に設定したarrowというclassから、
さらに「go-」や「turn-」が含まれたclassを抽出して、
外側を囲ったdivに、classを追記・・・という処理をしています。
まぁ、一応動くからいいか・・。
