ワードプレス

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. 【Google】新機能「タイムライン」と「現在地の共有」は便利なのか?怖いのか?…
  2. 【Google】店舗オーナー必読!Googleマイビジネス登録・MEO対策を行っ…
  3. 【機能廃止】facebookページ運営者必見!ページ「認証」で公式化し、検索結果…
  4. 大切なfacebookページとグループをショートカット設定すれば、情報収集・管理…
  5. 【セキュリティ】今こそ見直したいLineのセキュリティ設定6つ!スクショ流出やの…

関連記事

  1. ワードプレス

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

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

  2. ワードプレス

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

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

  3. ワードプレス

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

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

  4. ワードプレス

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

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

  5. ワードプレス

    【ワードプレス】写真に署名を入れて著作権を守るプラグイン『Easy WaterMark』と、画像一括…

    自分が撮影した写真が、自分で制作した画像が、知らないサイトで勝手に使わ…

スポンサードリンク

follow us in feedly

検索


カテゴリー

尾道ホテル・旅館

  1. サイクリング

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

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

    しまなみ縦走2018 2日目3/25(日)!追い風に乗って、春のしまなみ海道 今…
  4. サイクリング

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

    しまなみ縦走2018 1日目3/24(土)!快晴のしまなみブルーに包まれて、春の…
PAGE TOP