ワードプレス

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. スクショ流出やアカウントのっとりにご用心!LINE、facebook、Googl…

  2. 【Google】新機能「タイムライン」と「現在地の共有」は便利なのか?怖いのか?…

  3. 大切なfacebookページとグループをショートカット設定すれば、情報収集・管理…

  4. 【セキュリティ】今こそ見直したいLineのセキュリティ設定6つ!スクショ流出やの…

  5. 自分の位置情報を知らせる3つの方法:Googleマップ編、Line編、faceb…

関連記事

  1. ワードプレス

    【ワードプレス】サムネイル画像のサイズを一括変更できるプラグイン『Regenerate Thumbn…

    ワードプレスサイトのテーマを変更したら、トップページやアーカイブページ…

  2. ワードプレス

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

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

  3. ワードプレス

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

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

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

follow us in feedly

検索


カテゴリー
  1. サイクリング

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

    RED BULL HOLY RIDE 2017 大迫力のマウンテンバイクダウンヒ…
  3. サイクリング

    尾道市向島町歌~浦崎町・境ガ浜サイクリング♪水陸両用機試験運転に遭遇!
  4. サイクリング

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

    2020年初詣&初ライド約40km☆尾道因島、自転車の神様『大山神社』&初カレー…
PAGE TOP