*

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

公開日: : 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

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


クリームパン足?足のむくみには名前があった・・対処方法は

なんだか最近足のむくみ方がかわってきました。 今まではふくら

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

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

Stinger8トップへ戻るボタンのアイコン変更&自作画像に変更

前回はStinger8のデフォルトの「ページトップへ戻る」ボタンの背景

Stinger8カスタマイズ トップへ戻るボタンの背景色変更

Stinger8のカスタマイズをしていて、下の方にスクロールした時に「

Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー

Stinger8のヘッダー画像を変えてみましたが、タイトルを画像にいれ

→もっと見る

  • こんにちは。波空です

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

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

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

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

PAGE TOP ↑