【WordPress】googleカレンダーのスマホ表示がうまくいかないときの対処法！

こんにちは、ナカニシキョウ(@KMystage)です^^

この記事では、WordPressでサイト作成中にgoogleカレンダーを埋め込んだ際にスマホで見ると画面の右端が切れてしまう時の対処法をまとめておきます。

googleカレンダーの埋め込みコードをそのまま貼り付けると、PCではきちんと表示されますが、スマホでは関連ダーの右端が切れて全体が見られなくなることがあります。

これではせっかくお客様に予定をお伝えしたいのに、伝わらないですよね^^;

対処法としては

CSSを追加。HTMLで埋め込みコードを囲む

をやってみましょう！

CSSを追加する際の注意点

WordPressサイトにCSSを追加する場合は、テーマの【追加CSS】という機能を使うのが便利です。

こちらはテーマによってあるもの・ないものがありますので、あなたがお使いのテーマにはあるかな？？というのを確認してください。

大抵のテーマは【外観】＞【カスタマイズ】に【追加CSS】という項目があると思います。

TCDやisotypeのテーマを使っている場合は、【テーマオプション】に【追加CSS】や【カスタムCSS】という項目が用意されている場合はありますので、確認してみてください。

追加CSSの項目がない場合

もし、お使いのテーマに【追加CSS】の項目がない場合は、【外観】＞【テーマエディター】の【style.css】を編集していかないといけません。が、こちらは初心者さんにはお勧めしません。

なぜなら、【テーマエディター】はWordPressの根幹であるプログラムが集まっているところ。少しでも編集を間違えてしまうと、サイトが表示されなくなってしまう可能性があるからです。

なので、こちらを使う場合は

ことを徹底してください。

なお、私もCSSの追加に関しては無料でのサポートはおこなっていませんので、ご了承ください。

googleカレンダーのスマホ表示がうまくいかないときのCSSコード

【追加CSS】の項目に、下記のコードを貼り付けてください。

/* googlecalendar-responsive */
.googleCal iframe {
  width: 100%;
  height: 400px;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media all and (min-width: 768px) {
  .googleCal iframe {
	height: 600px;
  }
}

貼り付けたら【公開】【保存】などを押して、反映させましょう。

次に、CSSを適応させるHTMLを該当箇所に追記していきます。

カレンダー埋め込みコードにHTMLを追加

グーグルカレンダーを埋め込んでいる箇所に、HTMLを追記します。

<div class=”googlecal”>
<Googleカレンダーの埋め込みコード>
</div>

googleカレンダーの埋め込みコードを挟む形で追記すればOKです。

こちらで確認してみましょう。

まとめ

今回はWordPressでサイト作成中にgoogleカレンダーを埋め込んだ際にスマホで見ると画面の右端が切れてしまう時の対処法をまとめました。

CSSを追加。HTMLで埋め込みコードを囲む

お使いのWordPressのバージョンやテーマ、入れているプラグインによってはうまくいかないこともあるかもしれません。

その場合は、バージョンアップやどのプラグインが原因なのかを探ってみてくださいね。

あくまでも自己責任での作業となりますのでバックアップは必ずしておいてください。

（お問い合わせいただいても対応できかねますので悪しからず。。。）