Google Mapを一つのページに2つ以上表示させる(レスポンシブ対応)

2017/08/0404:13
どうもWebデザイナーのあさみです♪ 今回はとあるクライアント様の制作で店舗が2つある為、マップを一つのページに2つ配置した際にエラーが起こりマップが表示されなかったりと不具合があったので以前記載した、Googlemapカスタマイズ方法【JavaScript編】とは異なるコードを使用したのでご紹介致します。 HTML <div id="google-map_1"></div> <div id="google-map_2"></div> CSS..

続きを読む

JQueryを使用したRSS取得方法

2017/01/1701:52
どうもWEBデザイナーのあさみです! サイト制作でRSSを用いた構成をした際に忘れてしまっていたので復習と覚書の為に… 以前はGoogle Feed APIを使用して構成する事が多かったのですが、Google Feed APIが2015年4月20日にサポート終了で廃止になりました。 そこで、JQUERYを使用してRSSを取得する方法に変更 下記サイトに分かりやすく記載されています。 jQuery + PHP】クロスドメイン対応版:Google Feed ..

続きを読む

シンプルなシンタックスハイライト「google-code-prettify」

2016/12/1410:47
こんにちはWebデザイナーのあさみです。 今回は以前、覚書した ブログ内でコードの表示を綺麗に表示してくれる「Syntaxhighlighter」 よりシンプルで見やすく、コードが少ないので採用した 「google-code-prettify」のご紹介です。 と言うのも、「Syntaxhighlighter」ではちょくちょく不具合が(・・;) 私の環境では、他のJQueryやプラグインの関係で競合してしまいERRORが連発する事が何度かありました。..

続きを読む

GoogleMapをレスポンシブ対応で埋め込む【API Key取得編】

2016/10/2616:08
お客様のサイトのイメージにあった配色でオリジナルのGoogleMapをレスポンシブサイトに! まずは、Google Maps API Keyを取得する事から始めましょう。 Google Maps API Keyを取得する手順 ※2016年6月からGoogle Maps API Keyが必須! 2016年6月22日から、Google Map APIの利用に開発者向けAPIキーが必ず必要になりました。 そのために、APIキーを使わずに新しくGoogle Mapを..

続きを読む

ブログ内でコードの表示を綺麗に表示してくれる「syntaxhighlighter」

2016/10/1219:09
覚書を記録する中でコードの表示は必須! という事でコードの表示を綺麗にしてくるプラグインを導入しようと考えまして… 【syntaxhighlighter】を使用する事にしたのですが、まぁ〜、ハマってしまったので記録として 下準備から まずは、SyntaxHighlighter本家サイトからダウンロード バージョンはSyntaxHighlighter3.0.83 Google先生で検索した結果下記サイトを参考に導入 http://honttoni.bl..

続きを読む

もっと見る