Web制作 レンタルスペース

【Googleカレンダーの埋め込み】スマホに反映されないを解決する方法

悩んでいる人
ホームページにGoogleカレンダーを埋め込んだけど、スマホで見ると途中で切れてしまう!誰か解決方法を教えて!

 

こんな方におすすめ

  • WebサイトにGoogleカレンダーを埋め込みたい
  • プログラミングの知識がゼロ
  • レンタルスペースの予約ページを作りたい

 

 

本記事では、WebサイトでGoogleカレンダーをスマホで表示させる方法について紹介します。

Webサイトを自分で作成している方は、ぜひ参考にしてくださいね。

 

すぎにい
ぼくはフリーランスのWebエンジニアです。また、レンタルスペースを運営しており、自社サイトにGoogleカレンダーを導入しています。

 

Googleカレンダーがスマホに反映されない原因

Googleカレンダーがスマホでちゃんと表示されない理由は、レスポンシブ用にプログラムを修正していないからです。

レスポンシブとは、パソコン・タブレット・スマホで閲覧したときに適正なサイズで表示させる方法を指します。

 

たとえば、一昔前のホームページであればレスポンシブに対応していませんでした。

そのため、スマホでWebサイトを見たときに小さく表示される現象が起こります。

最近のWebサイトはレスポンシブ対応が標準のため、どの媒体でも適正なサイズで閲覧できるのです。

 

 

Googleカレンダーで埋め込めるコードは、初期状態だとパソコンでしか閲覧することはできません。

そのため、コードを修正してレスポンシブに対応させる必要があります。

 

Googleカレンダーをレスポンシブにする二つの方法

Googleカレンダーをレスポンシブ表示させる方法は、大きく分けて2つの方法があります。

1つ目はHTMLを修正、2つ目はCSSを修正でHTMLとCSSはプログラミングの一種ですね。

 

HTMLはサイトを作成するための言語、CSSはHTMLで作成したサイトのデザインを整える役割です。

今回は初心者でも分かりやすいようにHTMLを修正して、Googleカレンダーをレスポンシブ対応させます。

 

【初心者向け】Googleカレンダーの埋め込みコードを修正する

Webサイトに埋め込みたいGoogleカレンダーのページを表示させます。

右上の『歯車』ボタンをクリックして、『設定』を押しましょう。

歯車ボタンをクリック

 

つぎに左側に『マイカレンダーの設定』という表記があるので、サイトに埋め込みたいカレンダーを選択。

下にスクロールすると、『カレンダーの統合』という表示があります。

『このカレンダーの公開URL』というコードをコピーして、メモ帳などに保存しておきましょう。

コードをコピーする

 

そして、以下の赤字部分にコピーしたコードを追加します。

 

<iframe style="border-width: 0;" src="コピーしたコード" width="100%" height="600" frameborder="0" scrolling="no"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

 

あとは、修正したコードをワードプレスのページに貼りつけましょう!

ここで注意するべきはページにコードを貼りつけるときは、テキストモードで入力してください、

ビジュアルモードで入力すると、コードが認識されないからです。

コードを貼りつける

 

あとはページを『公開』すれば、Googleカレンダーの埋め込みは完成です。

スマホで表示すると、こんな感じに最適化されます。

スマホで表示

 

まとめ

Googleカレンダーをスマホで表示させる方法について紹介しました。

今回紹介した内容を実践すれば、初心者でもカンタンにレスポンシブ対応させることができます。

Googleカレンダーのサイト表示に困っている方はぜひ参考にしてくださいね。

 

 

それでは、また!

  • この記事を書いた人

すぎにい

フリーランスのWebエンジニア / レンタルスペースを3店舗運営 / 4年前まで元工場勤務の作業員→貯金ゼロで嫁から借金→ワードプレスでWeb制作→30社以上のサイトを制作→レンスペ用のマイクロ法人設立→11月からパーティースペース開始→2ヶ月で収益を5倍にする→12月はトータルで約18万円の収益

-Web制作, レンタルスペース