ホームページに、「道順」を載せたい時があります。

道順を撮影した写真だけでも、わかりやすいですが、

例えば「右に曲がる」などの説明は、矢印があるとさらにわかりやすくなります。

 

そこで、道順の写真を撮影して、classを設定するだけで、矢印が出るようにしてみました。

 

iPhoneなどのスマートフォンでも、崩れずに表示されるはずです。

 

矢印のサンプル

 

 go-straight arrow

---

 go-left arrow

---

go-right arrow

---

turn-right arrow

---

turn-left arrow

---

 

画像にclassを設定する

WordPressに一旦メディアを追加すると、その画像を編集する部分にclassの設定が出てきます。

1. 画像を一旦入れる
2. 画像をクリックして鉛筆マークから編集に移動する

この、画像CSSクラス　という部分に、go-right　などの、上記に書いたclassを設定するだけで、矢印を表示します。

この時に「arrow」を忘れず。

つまり、右斜め前であれば、「go-right arrow」と、両方書かないといけません。

 

MapArrow-Essenceのダウンロード

プラグインは下記リンクからダウンロードできます。

いつものことながら、自己責任でお願いします。

 

 

技術的な解説

画像に対して、自動的に矢印を挿入する処理をしています。

しかし、画像そのものに、::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を追記・・・という処理をしています。

 

まぁ、一応動くからいいか・・。