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

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

詳しくはこちら

無料メルマガ

  • ブログに書けないココだけの裏話
  • お得なご案内
  • バックナンバーは非公開
  • 不定期発行
ものくろキャンプ メルマガ
購読登録フォーム
Eメール必須
お名前(姓)必須
お名前(名)必須

講座・ワークショップ に参加する

2023-06-08
19:00 - 22:00
2023-06-17
11:00 - 12:30
2023-06-21
19:00 - 21:00
2023-06-23
19:00 - 22:00
2023-06-25
10:00 - 12:00
2023-07-01
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

1976年大阪生まれ。鳥取大学大学院博士課程(専門は乾燥地農業)を中退後、零細企業の立ち上げに関わり、スタッフ育成・社内ITならびにWEBシステム開発を担当。6億円の受注プロジェクト案件をまとめる。2011年に過労にて就労禁止(双極性障害)の診断を受け、生き方を見つめなおす。双極性障害を克服し、2014年からフリーランスにてWEB・ITコンサルにてWordPressを得意とした活動を行い、1,200名を超えるコンサル実績を持つ。その中で2009年から書き続けているブログは、4,100記事を超え、2016年には月間65万PVを達成した。2018年に法人化し”株式会社あみだす”となる。現在は、コンサルタントに加えて、自己受容と自己理解を広げ、誰もがそのままで命を輝かせるトランスパーソナル心理学をベースとしたカウンセラーとして”心が通う組織づくり”の支援(企業内コミュニケーション改善コンサルティング)を中心に活躍中。


株式会社 あみだす 代表取締役/岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年)/ ブロガー / WordPress & Woocommerceが得意 / 親指シフト歴11年/ orz レイアウト開発者

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


カテゴリー 一覧