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

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

詳しくはこちら

シェア大歓迎

この記事が役に立ったり、参考になったり、読んで嬉しいと感じていただけたら、ぜひ下のボタンからシェアしてください。シェア・ツィートしていただけると、飛び跳ねるほど嬉しく、今後の記事作成の原動力になります。

大歓迎です!ぜひシェアしてください。


広告

この記事を書いた人

ものくろ(Webコーチ)

株式会社あみだす 代表取締役 / 博士課程中退(農学) / ブロガー / Web&Blogコーチ / 親指シフト orzレイアウト開発者 / 講師 / フリーランス / 旅人 / 民事裁判経験者 / 毎月どこかに出張

ブログは月間65万PVを記録(2016年1月)。 これまでに250回を超えるワークショップ開催・のべ1,200名のブログサポートに携わる。

WordPressが得意 / 好きなもの(無刻印キーボード・十割蕎麦・湯葉)/ あまり好みでないもの(ブロッコリー・値切り)

開催している講座に参加する

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

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

あわせて読みたい

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

広告

Facebookを使うノウハウ公開中

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

無料 メルマガ発行中

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

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

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

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

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

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

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

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

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

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

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

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

広告