*

イメージマップがスマホでずれる!プラグインで簡単解決

公開日: : 最終更新日:2020/08/11 WordPress, プラグイン

イメージマップがスマホでは位置がずれてしまい、予期せぬところにリンクしているという現象が起きました。

コメントをいただきjQuery RWD Image Mapsプラグインの導入でずれを解消できたので備忘録として書きました。

スポンサーリンク

 

対処

レスポンシブ対応にするための方法をリサーチするとjQuery RWDイメージマップ

を使用するという記事がいろいろ出ていました。

ページ内にjQueryとダウンロードしたファイルを読込むというものです。

プラグインだというので、なにぶんにも無精者の私としては、

そんな面倒をしないでも、いつものプラグイン導入手順

ダッシュボード⇒プラグイン⇒新規追加⇒プラグインを検索⇒インストール⇒有効化。

ができるんじゃないのかな?と、

とにかく試しに、プラグインを検索してみました(^^;)

出てきたのはResponsive Image Mapsが一つだけ。

(日にちが経ってからは数が増えていましたが・・・)

う~ん、どうなんだろうと、開発者のページを覗くと、説明に

(引用)

「このプラグインはWordPressで使用するためのRWD Image Maps jQueryプラグインを単にパッケージ化し、WordPressテーマに対応したイメージマップを作成する簡単な方法を提供します。」

とありました。

ふむ、では、これをインストールして有効化すればOK?
それだけではダメなようなので更に

「JAVASCRIPT警告
言うまでもないことですが、RWD Image MapsのjQueryプラグインでは、ユーザーのブラウザでjavascriptを有効にして魔法を働かせる必要があります。」

「RWDイメージマップjQueryプラグイン自体(WordPressラッパーではない)に関する質問や問題がある場合は、GitHubのjQuery RWD Image Mapsプラグインページを参照してください。」

・・・とにかく試してみました(^o^;)

 

Responsive Image Mapsのインストールと有効化

通常のプラグインの導入手順でWordPressのダッシュボードから

「プラグイン」⇒「新規追加」⇒「RWD Image Maps」と入れて検索

 

 

インストールしたら「有効化」をクリックします。

プラグインに追加されました。

 

実行コードを記述する必要があるようです。

クリッカブルマップを使っているページの最後に以下を記述。

書き加えたもの

<script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
</script>

クリッカブルマップ(イメージマップ)を作る際には、画像を原寸大に対して設定されている必要があります。

座標をとった画像のサイズでメディアライブラリにアップロードします。

大きすぎる画像は縮小されると、座標がずれてしまいます。

使っているテーマなどで違うと思いますが、私の場合はStinger3です。

元画像が少し大きかったようです。

メディアにアップした画像を確認すると、フルサイズにしたのに、少し縮小されていました。

なので、元画像を小さくして、座標を取り直してアップすると改善されました。

スマホでずれるのは確認していなかったのでしばらく気づかずにいましたが、

コメントをいただきズレを確認(><)

このプラグインを導入で解決しました(^^; ご指摘ありがとうございました。

これでスマホでもちゃんと指定したところにリンクされました(^^)

 

イメージマップがスマホでずれる さいごに

波空
他のページでもイメージマップはいろいろ使っています。

猫にゃん
イメージマップのあるページ全部に記述するんかにゃ?

波空
 最初は全部のページに記述するのか
( ̄Д ̄;) なんて思っていたけど・・・
1つのページに書くだけでいいようです。

猫にゃん
よかったにゃん。無精な波空には大変なことだからにゃ(^o^)

波空
一応試しにスマホとタブレットで、クリッカブルマップを使っているページをみてみましたよ
(^^)
全部OKです!

 


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


霧と雲は同じもの?! 霧と靄と霞とは?それってなにが違うの?特徴と違い

少し前、朝の天気予報の時「霧(きり)と靄(もや)と霞(かすみ)の違

気象や天気に関する記事一覧

お天気や気象に関してはニュースで聞いてもよく解らないことがあります

ガラケーとスマホ2台持ちをデュアルSIMで1台のスマホに!

  今までガラケーとスマホの2台持ちでもSIMフリーを

マスクを外した場合は?食事やお茶飲みでの外したマスクを置くには

  外出の時にはマスク。 人混みでもマスク。 でも

レジ袋有料化 レジ袋の種類とサイズと特徴 買うならどれがいい?

レジ袋有料化が2020年7月から実施されてからエコバッグを持参で買

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中
    好きなものは・・・アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    やりたいことは・・いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。日々どうしたらできるか考えながらリアル仕事に追われています。

  • 手軽に雑誌が読める!
    楽天マガジン

PAGE TOP ↑