マップに矢印を乗せる方法

この記事にはこんなことが書かれています
  1. 矢印のサンプル
  2. 画像にclassを設定する
  3. MapArrow-Essenceのダウンロード
  4. 技術的な解説
1656文字なので、およそ3分で読み終わりそうです

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

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

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

 

そこで、道順の写真を撮影して、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のダウンロード

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

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


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を追記・・・という処理をしています。

 

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

このページについてのお問い合わせ

必須お名前
フリガナ
必須メールアドレス
必須確認のためもう一度
メッセージ
こんなサロン開発室も読まれています