ワードプレス

iPhone対応!Googleカレンダーをワードプレスへレスポンシブで埋め込むコード

WordPress(ワードプレス)に埋め込んだGoogleカレンダーが、iPhoneで右切れしてしまう現象が起きたので、対応方法をメモ。

iPhoneだとGoogleカレンダーの右側が切れてしまって困っている方、どうぞご利用ください。

iPhoneにも対応しているスタイルシート(style.css)と埋め込みコード、ご紹介しますね。

スポンサードリンク

 

Googleカレンダー埋め込み cssとhtml

 

スタイルシート(style.css)と、Googleカレンダー埋め込み画面へ以下のコードをご利用ください。

 

スタイルシート(style.css)

 

スタイルシート(style.css)に以下を追記します。

css
/* Google カレンダー レスポンシブ */
.googleCalendar iframe {
width: 100%;
height: 600px;
}
@media all and (min-width: 768px) {
.googleCalendar iframe {
height: 600px;
}
}

 

埋め込みコード

 

Googleカレンダーを埋め込むページに、以下のコードを埋め込みます。

html
<div class=”googleCalendar”>
<iframe src=”https://calendar.google.com/calendar/embed?src=〇〇〇〇&ctz=Asia%2F Asia%2FTokyo&showPrint=0&showTabs=0
” style=”border: 0″ width=”800″ height=”600″ frameborder=”0″ scrolling=”no”></iframe> </div>

TOKYOのあとに、&showPrint=0&showTabs=0を加えるのがポイントです。これでiPhoneでもGoogleカレンダーが全表示されるようになります。

 

Window Resizer

 

iPhoneをお持ちでない方は、Google Chrome の拡張機能「Window Resizer」が便利ですよ。ブラウザの画面サイズを PC ・タブレット・スマホ、各デバイスごとのサイズに変更できる便利アプリです。

拡張機能をオンにし、画面右上のアイコンから、表示画面を確かめたいデバイスを選択すると、

選択したデバイス画面が、ブラウザに表示されます。

デバイスは自分で増やすこともできますよ。

https://chrome.google.com/webstore/detail/window-resizer

 

Window Resizerの注意点

 

パソコンブラウザ上でレスポンシブ表示されても、実際のiPhoneでは右が切れてしまう現象がときどき起こります。

最終確認は必ずiPhone本体で行ってください。

 

まとめ

 

Google、WordPress、各SNSのアップデート等により、今まで綺麗に表示されていたものが崩れるって焦りますね。

なにかのときのために、ここにメモとして残しておきます。
 
 

尾道市ランキング

投稿者プロフィール

本谷美穂
本谷美穂
尾道・しまなみ海道のブロガー&サイクリスト。
ソーシャルメディアを活用した販促支援、ワードプレスベースのホームページ・ブログ制作を行っています。

尾道観光大志
SONY イメージング・プロ・サポート会員

Related article

尾道市向島町『ピッツェリア・フェリックス』特別テイクアウトのアレが、驚愕の美味しさ!!前のページ

しまなみ海道 大三島『しまなみコーヒー』、多々羅大橋をのぞむ公園に珈琲カフェオープン!次のページ

ピックアップ記事

  1. 自分の位置情報を知らせる3つの方法:Googleマップ編、Line編、faceb…
  2. 【セキュリティ】今こそ見直したいLineのセキュリティ設定6つ!スクショ流出やの…
  3. 【Google】店舗オーナー必読!Googleマイビジネス登録・MEO対策を行っ…
  4. 【機能廃止】facebookページ運営者必見!ページ「認証」で公式化し、検索結果…
  5. 【Google】新機能「タイムライン」と「現在地の共有」は便利なのか?怖いのか?…

関連記事

  1. ワードプレス

    【ワードプレス】の吹き出し会話プラグイン『Speech Bubble』が面白い!ブログの表現方法が広…

    以前から気になっていた「会話ができる」ワードプレスのプラグイン。…

  2. ワードプレス

    【ワードプレス】著者情報表示プラグイン『VK Post Author Display』、新しい読者さ…

    記事下へ著者情報を表示してくれるプラグイン『VK Post Autho…

  3. ワードプレス

    【ワードプレス】キャッシュ系プラグイン「wp super cache」を入れたら、モバイルフレンドリ…

    ある日突然、当サイト「ミホとめぐる尾道」がモバイルフレンドリーでなくな…

  4. ワードプレス

    【ワードプレス】画像圧縮プラグイン『EWWW Image Optimizer』でサーバー負荷軽減!サ…

    画像アップ時に自動的に圧縮してくれるWordPressの便利なプラグイ…

スポンサードリンク

follow us in feedly

検索


カテゴリー

尾道ホテル・旅館

  1. サイクリング

    大好きな『カペルミュール』がご出店!瀬戸内しまなみ・ゆめしま海道サイクリング大会…
  2. サイクリング

    しまなみ縦走2017!しまなみ海道の赤い彗星、新車DE ROSA SK Red …
  3. サイクリング

    【モニター】手ぶらで楽々「しまなみ海道らくらくサイクリング ガイド同行&バス併走…
  4. サイクリング記録

    天女の羽衣と呼ばれる三千本桜目指して、ゆめしま海道の離島 岩城島 積善山ヒルクラ…
  5. サイクリング

    しまなみ縦走2018 2日目3/25(日)!追い風に乗って、春のしまなみ海道 今…
PAGE TOP