ワードプレス

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. 【Google】新機能「タイムライン」と「現在地の共有」は便利なのか?怖いのか?…
  2. 【Google】店舗オーナー必読!Googleマイビジネス登録を行って、新規・既…
  3. スクショ流出やアカウントのっとりにご用心!LINE、facebook、Googl…
  4. 【機能廃止】facebookページ運営者必見!ページ「認証」で公式化し、検索結果…
  5. 自分の位置情報を知らせる3つの方法:Googleマップ編、Line編、faceb…

関連記事

  1. ワードプレス

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

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

  2. ワードプレス

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

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

  3. ワードプレス

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

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

スポンサードリンク

follow us in feedly

検索


カテゴリー

カレンダー

     12
17181920212223
242526272829 
       
  12345
6789101112
       
      1
3031     
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. サイクリング記録

    2019年初詣&初ライド約40km☆しまなみ海道に浮かぶ尾道因島、自転車の神様「…
  2. サイクリング

    しまなみ海道『ちゃりん娘ファンライド』!キュートなアイドル、大久野島の可愛いウサ…
  3. サイクリング

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

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

    2017年初詣&初ライド☆しまなみ海道に浮かぶ尾道因島、自転車の神様「大山神社」…
PAGE TOP