ワードプレス

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. 大切なfacebookページとグループをショートカット設定すれば、情報収集・管理…
  2. 【機能廃止】facebookページ運営者必見!ページ「認証」で公式化し、検索結果…
  3. 【Google】店舗オーナー必読!Googleマイビジネス登録・MEO対策を行っ…
  4. スクショ流出やアカウントのっとりにご用心!LINE、facebook、Googl…
  5. 自分の位置情報を知らせる3つの方法:Googleマップ編、Line編、faceb…

関連記事

  1. ワードプレス

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

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

  2. ワードプレス

    【ワードプレス】の吹き出し会話プラグイン『Speech Bubble』が面白い!ブログの表現方法が広…

    以前から気になっていた「会話ができる」ワードプレスのプラグイン。…

  3. ワードプレス

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

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

  4. ワードプレス

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

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

スポンサードリンク

follow us in feedly

検索


カテゴリー

尾道ホテル・旅館

  1. サイクリング

    中国経済産業局「広域ラグジュアリーツーリズム開発に向けたネットワーク構築会~Cy…
  2. サイクリング

    【モニター】手ぶらで楽々「しまなみ海道らくらくサイクリング ガイド同行&バス併走…
  3. サイクリング

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

    しまなみ縦走2016!しまなみ海道の多島美と、サイクリストの人情に感動した一日。…
  5. サイクリング

    しまなみ海道に浮かぶ尾道市因島、自転車の神様「自転車神社 大山神社」へ参拝!
PAGE TOP