*

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

公開日: : 最終更新日: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月3日じゃなかった?!2021年の節分は2月2日!そのわけは

節分は2月3日!と、もう、ずっと思い込んでいたのに・・ なんと2

狭い部屋にも違和感のないミニ仏壇でお位牌に仮の家を!

前回の記事てお仏壇や位牌のことを調べて書きましたが、迷った末にやっ

無宗教のお仏壇の飾り方 仏壇やお位牌とは?

  あなたのところにはお仏壇とかありますか? 私のと

オンライン初詣とは?ネット参拝のできる神社を一部ピックアップ!

  年末年始のいつもの行事も、コロナ禍が続きさまざまに

パソコンの処分!2003年~のPCは費用がかからないって知ってる?

最近よく知人などからパソコンの捨て方を聞かれます。 ずっとWin

→もっと見る

  • こんにちは。波空です

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

  • BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール

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

PAGE TOP ↑