ワードプレス

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のアップデート等により、今まで綺麗に表示されていたものが崩れるって焦りますね。

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

尾道市ランキング

Related article

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

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

ピックアップ記事

  1. 【セキュリティ】今こそ見直したいLineのセキュリティ設定6つ!スクショ流出やの…
  2. 自分の位置情報を知らせる3つの方法:Googleマップ編、Line編、faceb…
  3. 【Google】店舗オーナー必読!Googleマイビジネス登録・MEO対策を行っ…
  4. スクショ流出やアカウントのっとりにご用心!LINE、facebook、Googl…
  5. 【機能廃止】facebookページ運営者必見!ページ「認証」で公式化し、検索結果…

関連記事

  1. ワードプレス

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

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

  2. ワードプレス

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

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

  3. ワードプレス

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

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

スポンサードリンク

follow us in feedly

検索


カテゴリー

尾道ホテル・旅館

  1. サイクリング

    しまなみ海道・生口島『ちいさなお宿Link 輪空』kara来島海峡往復サイクリン…
  2. サイクリング

    東福山~倉敷 約100kmサイクリング!晩秋の備後路を、鰻とスウィーツ目指してレ…
  3. サイクリング

    RED BULL HOLY RIDE 2016 大迫力のマウンテンバイクダウンヒ…
  4. サイクリング記録

    「美しい離島7選」しまなみ海道・岩城島一周サイクリングde奇跡の出会い♪さらに積…
  5. サイクリング

    しまなみ縦走2017!しまなみ海道の赤い彗星、新車DE ROSA SK Red …
PAGE TOP