Googleカレンダーをスマホでみると途中で切れている問題を解決
自社サイト運用していると、イベント予定や予約状況などを掲載が必要になることがよくあります。
そんな時によく利用されているのがGoogleカレンダー。
Googleカレンダーは使い方も簡単ということもあり、多くのユーザが利用しています。
しかし、このGoogleカレンダー、自社サイトに掲載することが出来る「埋め込みコード」を提供しているのですが、パソコン表示用なので、スマホでみると一部表示できていないという問題を抱えています。
Googleカレンダーをスマホでみれるようにする方法（レスポンシブ対応）については、いろいろな方が既に情報を提供しています。
しかし、わたしの場合、提供されている情報だけでは、どうしてもうまく出来ませんでした。
カレンダーの右端の部分が切れて表示されます。
いろいろ試した結果、Googleカレンダーのパラメーター設定を使うことで、スマホでも全画面表示ができるようになりました。
おそらく同じような状況で困っている人がいると思います。
簡単に対処できる方法なので、紹介しておきます。
ちなみに私のサイトは
- WordPress
- テーマは「BizVektor」
- 表示カスタマイズは一切していない
という環境で対応した結果です。
他のテーマや環境では適用されない可能性もあるので注意してください。
レスポンシブ対応する方法
Googleカレンダーをスマホでレスポンシブ表示させる工程は2つです。
1.cssを使ってdiv設定する
cssとdivタグを利用して、画面幅に合わせてカレンダーを表示するよう設定を行います。
この部分については既に他サイトで提供されているものを使えば問題ありません。
上記サイトを参考にしました。
スタイルシートに下記cssコードを追記↓
.cal_wrapper {
max-width: 960px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}
.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}
スタイルシートCSSファイルに上記コードの追記後、次はGoogleカレンダーの埋め込みコードの前後に下記のようにdivタグを追記します。
<div class="cal_wrapper"> <div class="googlecal"> <Googleカレンダーの埋め込みコード（<iframe>～</iframe>まで> </div> </div>
ほとんどの方は、ここまで対応した段階で、スマホでGoogleカレンダーが綺麗に表示されている可能性が高いです。
しかし、ここまで対応してもまだカレンダーの右端が中途半端な表示になっているといった場合、これから紹介する下記対応を追加で行ってください。
2.埋め込みコードにパラメータ設定を追記する
googleカレンダーには、印刷ボタンをつけたり、週の開始曜日を変更することができるパラメーター設定というものが存在します。
このパラメーター設定を行うことで、スマホでGoogleカレンダーの全体が完全に表示されるようになります。
設定するのは「カレンダー表示切替ナビ」
このナビの為に表示されているボタンが、Googleカレンダーの右端が切れてみえてしまう原因になっていることがあるからです。
パラメーターの設定方法は簡単。
Googleカレンダーの埋め込みコードに「&showCalendars=0」を追記してください。
https://calendar.google.com/calendar/embed?src=xxxxxxx&showCalendars=0
上記のように埋め込みコードの最後尾に追記するだけで構いません。
- cssを使ってdiv設定する
- 埋め込みコードにパラメータ設定を追記する
ここまで紹介した上記2つの手順を正しく設定することが出来れば、おそらくスマホでもGoogleカレンダーが綺麗に表示されているはずです。
もし、カレンダーの端が切れてしまう表示が直らない場合は、対応した内容を一度、見直してください。
それでも直らない場合は、テーマやWordpress本体やプラグインの影響を受けている場合があります。
残念ながら、他の方法をみつけるしかありません。
しかし、ほとんどの場合は、ここまでやれば解決しているという声が多いので手順を見直すことをおすすめします。
まとめ
WordPressでサイト制作をしている場合、Googleカレンダーの埋め込みコードをそのまま張り付けてもほとんどの場合、カレンダーが途中できれてしまい、カレンダーの一部が確認することが出来ません。
今回のようにcssやパラメーターを追加して対応することも出来ますが、Wordpressにはカレンダー管理するプラグインもたくさん存在するので、プラグインを使ってカレンダー表示を行う方法もあることを覚えておくと便利です。