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

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

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

• Simple Map – 超簡単＆スマフォ対応のGoogle Map | Firegoby → https://firegoby.jp/wp/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 は、汎用の指定

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

詳しくはこちら

• CSS liefde – CSSの使える!と思えるテクニックを紹介。 » 半透明ボックス(CSS3/CSS) → http://css.colopixie.com/css3/67
• 佐祐理ブログ: -ms-filterは無意味 → http://sayurin.blogspot.jp/2012/12/ms-filter.html