*

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

公開日: : 最終更新日:2019/10/28 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のインストールと有効化

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

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

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

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

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

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

書き加えたもの

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

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

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

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

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

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

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

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

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

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

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

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

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

波空
他のページでもイメージマップはいろいろ使っています。
猫にゃん
イメージマップのあるページ全部に記述するんかにゃ?
波空
 最初は全部のページに記述するのか
( ̄Д ̄;) なんて思っていたけど・・・
1つのページに書くだけでいいようです。
猫にゃん
よかったにゃん。無精な波空には大変なことだからにゃ(^o^)
波空
一応試しにスマホとタブレットで、クリッカブルマップを使っているページをみてみましたよ
(^^)
全部OKです!


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

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


自転車の違反て意外と知らないことが多い?つい、でも罰金は5万円!

  身近でもみかける自転車事故や違反。 自分は大

自転車保険加入が2020年4月から東京都でも義務化って知ってた?

自転車保険の義務化?日頃自転車利用の多いので気になる話題です。

お正月に関する記事一覧

日本の伝統的な行事、慣習としてお正月があります。 12月

普通のSuicaをMySuica(記名式)にするには?変更のしかたから登録まで

2019年10月1日からSuicaが鉄道利用でもポイントがつくよう

OneDriveでWindows7から10にデータ移行を簡単に

  クラウドを利用したONEドライブというサービスを利

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑