*

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

公開日: : 最終更新日: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

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


ベランダとバルコニーは意味が違う?どっちがいいの

  マンションやアパートに住んでいると外に張出した部分

フォームローラーで筋膜リリース! 自宅で楽々セルフケア!

フォームローラーとかダイエットローラーを使っている人が増えているの

ローリングストックにも最適!コンビーフのおいしさにはまってます

普段の生活の食事の中で缶詰を使う事って少なくありせんか。 買い置

浴室扉の掃除 ドア下にこびりついたカリカリ汚れに挑戦!

お風呂に入る時もお風呂掃除の時でも、なんとなくスルーしてしまってい

Windows11がでるって!Windows10が最後というのは嘘だった?!

Windows10が嫌いでいまだにWindows7を使っているけど

→もっと見る

  • こんにちは。波空です

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

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

PAGE TOP ↑