ワードプレス

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. 【Google】店舗オーナー必読!Googleマイビジネス登録・MEO対策を行っ…
  4. 自分の位置情報を知らせる3つの方法:Googleマップ編、Line編、faceb…
  5. 【セキュリティ】今こそ見直したいLineのセキュリティ設定6つ!スクショ流出やの…

関連記事

  1. ワードプレス

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

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

  2. ワードプレス

    【ワードプレス】一括置換プラグイン『Search Regex』は、サイトSSL化(https化)に必…

    タグやテキスト(文字)を一括置換・変換できるWordPressの便利な…

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

スポンサードリンク

follow us in feedly

検索


カテゴリー

尾道ホテル・旅館

  1. サイクリング

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

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

    とびしま海道サイクリング 復路編:呉市川尻~大崎下島南部周遊~岡村島 約40km…
  4. サイクリング

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

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