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

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

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

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

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

 go-straight arrow

 go-left arrow

go-right arrow

turn-right arrow

turn-left arrow

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

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

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

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

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

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

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

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

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

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