ワードプレス

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 イメージング・プロ・サポート会員

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

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

ピックアップ記事

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

関連記事

  1. ワードプレス

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

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

  2. ワードプレス

    【ワードプレス】サイトテンプレートをTCDのブロガー用テーマ『MAG』へ変更しました。

    2017年8月、当サイト『ミホとめぐる尾道』のSSL化とともに、テーマ…

  3. ワードプレス

    2015年4月21日からGoogleモバイルフレンドリー実装!対応はお済みですか?

    Googleさんから最終確認メールが届きましたね。ホームページ…

  4. ワードプレス

    スマホ機種変時に注意!2段階認証アプリ「Google Authenticator」の引継ぎ方!

    2019年11月5日(火)、3年ぶりにスマホを機種変更いたしました。…

<景品表示法に基づく表記>
本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

スポンサードリンク

follow us in feedly

検索


カテゴリー

尾道ホテル・旅館

  1. サイクリング

    中国経済産業局「未来のサイクリングツーリズム」サクラ・ハッカソン広島尾道ステージ…
  2. サイクリング

    しまなみ海道『ちゃりん娘ファンライド』!キュートなアイドル、大久野島の可愛いウサ…
  3. サイクリング

    2018年初詣&初ライド☆しまなみ海道に浮かぶ尾道因島、自転車の神様「大山神社」…
  4. サイクリング記録

    2019年初詣&初ライド約40km☆しまなみ海道に浮かぶ尾道因島、自転車の神様「…
  5. 国内旅行・グルメ

    ロードバイクがそのまま乗せられる出雲路の一畑電車!中国経済産業局“Leaders…
PAGE TOP