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

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 は、汎用の指定

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

詳しくはこちら


この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

広告

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

新着記事

著者プロフィール

ものくろ(大東 信仁)

ブロガー/Web&Blogコーチ/親指シフト orzレイアウト開発者/ものくろキャンプ運営。のべ1,000名のブログサポートに携わる。WordPressが得意。

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告