ワードプレス

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. 大切なfacebookページとグループをショートカット設定すれば、情報収集・管理…
  2. 自分の位置情報を知らせる3つの方法:Googleマップ編、Line編、faceb…
  3. 【Google】新機能「タイムライン」と「現在地の共有」は便利なのか?怖いのか?…
  4. 【セキュリティ】今こそ見直したいLineのセキュリティ設定6つ!スクショ流出やの…
  5. facebookページ運営者必見!ページ「認証」で公式化し、検索結果表示・信頼度…

関連記事

  1. ワードプレス

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

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

  2. ワードプレス

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

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

  3. ワードプレス

    【ワードプレス】サイトテンプレートをTCDのブロガー用テーマ『MAG』へ変更しました。

    2017年8月、当サイト『ミホとめぐる尾道』のSSL化とともに、テーマ…

  4. ワードプレス

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

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

スポンサードリンク

follow us in feedly

検索


カテゴリー

カレンダー

   1234
19202122232425
262728293031 
       
15161718192021
293031    
       
    123
25262728   
       
 123456
28293031   
       
     12
17181920212223
24252627282930
31      
   1234
2627282930  
       
      1
3031     
    123
252627282930 
       
   1234
567891011
       
   1234
262728    
       
      1
9101112131415
3031     
     12
31      
  12345
2728     
       
   1234
       
      1
       
1234567
891011121314
22232425262728
2930     
       
    123
45678910
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
31      
     12
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       

尾道ホテル・旅館

  1. サイクリング

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

    2017年初詣&初ライド☆しまなみ海道に浮かぶ尾道因島、自転車の神様「大山神社」…
  3. サイクリング

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

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

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