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

【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のバージョンやテーマ、入れているプラグインによってはうまくいかないこともあるかもしれません。

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

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

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

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

この記事が気に入ったら
いいね または フォローしてね!

参考になりましたら是非シェアしてください!
  • URLをコピーしました!
  • URLをコピーしました!

―あなたに合わせたワードプレスホームページをつくりましょう!―

MY STAGE B3つのプラン

MY STAGE Bでは

  • ワードプレスでホームページを作ってほしい!
  • ワードプレスでホームページを自分で作りたい!
  • ワードプレスホームページの継続的なスキルアップをサポートしてほしい!

といったご希望にお答えできる3つのプランをご用意しています。

WEBを活用してあなたのサービスをもっと想い通りに発信できるスキルを手に入れませんか?

この記事を書いた人

WEB活用アドバイザー
劇場プロデューサー⇒ECサイトのWEBディレクターを経て、ワードプレスの立ち上げサポートや使い方のマンツーマンレッスン、WEBを活用したビジネスのサポートをしています。「サービスを自分の手で発信する力を」身に付けてビジネスをわくわくするものにしていきましょう^^

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次