【GRAPHIE トラブル解決】Simple MapプラグインのGoogle Map 地図が表示されない

この記事で紹介しているテーマは、100%GPLではないテーマです。WordPressコミュニティは、100%GPLライセンスを推奨しています。私も、現在は100%GPLライセンスのテーマのみを推奨しています。100%GPLテーマの記事はこちらです。

この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

DigiPressさんのWordPressテーマ「GRAPHIE」を使い始めて気づいたのが、GoogleMapの地図をSimple Mapプラグインを使って埋め込むと、表示されないトラブルでした。

プラグインについてはこちら

トラブルについてはこちらでも紹介されています。

  • DigiPressの有料テーマ「GRAPHIE」の良いところ3つ/イマイチなところ3つ(2014年10月版) | 信州 Snap::Life → http://nnamm.com/?p=63

調べたのですが、自力では解決できず、DigiPressさんのユーザーフォーラムに問い合わせて、解決しました。フォーラムに投稿したトラブル内容を投稿したところ、すぐに回答を頂きました。また、フォーラムでの回答をブログに記載する許可をいただいました。感謝です。

テーマを変える前に使っていた、el plano では、問題なくGoogleMapの地図は表示できていたのですが、GRAPHIEに変更した後にトラブルが起きたのが、ポイントでした。

違うプラグインを使ってのGoogleMapの表示する方法も検討しましたが、逆に、Simple Mapプラグインの使い勝手が優れていることを改めて確認することになりました。

ショートコードで簡単に Google Map を表示できることや、スマートフォンでの表示の時にスクロールを止める点などの機能を持つプラグインが見つけられませんでした。

ユーザーフォーラムにて、受け取った回答はこちらの通りです。

GRAPHIEは画像表示効果として、ページ読み込み後にimgタグの画像をフェードで表示させる仕様となっています。
該当プラグインの場合、ショートコードで埋め込まれるHTML(img)についてはAPIによって動的に挿入され元々のコードにはないため、テーマ側のJavascriptがimgの画像コンテンツのロードを検知できずフェード表示がされないままとなっているようです。

「オリジナルスタイルシート設定」に以下のCSSを追記してください。

[css]
.simplemap img {
-webkit-opacity:1;
-moz-opacity:1;
-o-opacity:1;
filter:alpha(opacity=100);
-ms-filter:alpha(opacity=100);
opacity:1;
}
[/css]

このスタイルートを追記したことで、Google Mapが正常に表示されるようになりました。

スタイルシートで透過処理を行う「opacity」のパラメーターを「1」に、つまり、「透過しない」設定にする必要があった様子です。

  • -webkit-opacity は、webkit系のブラウザー向け
  • -moz-opacity は、Firefox系のブラウザーに
  • -o-opacity は、Operaに
  • filter:alpha は、IE(たぶんIE6と7向け)に
  • -ms-filter は、IE(きっとIE8以降向け)に
  • opacity は、汎用の指定

このように、各ブラウザー対応の表現になっています。

詳しくはこちら

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告