GoogleカレンダーをWordPressに埋め込む時のカスタム

WordPressにGoogleカレンダーを埋め込むときに知っておくと便利なカスタマイズをまとめました。

Googleカレンダーでの操作

まずはGoogleカレンダーの中で操作をします。

掲示したいイベントを入力しているマイカレンダーの右にある「・・・」をクリック

「設定と共有」をクリック。

下にスクロールしていきます。

「カレンダーの統合」欄にある「カスタマイズ」をクリック。

すると、別ウインドウが開きます。

まずは「表示」から、必要ない項目を消してすっきりさせます。

このままHTMLを埋め込んでもいいのですが、デフォルトのままだと
スマホで表示した時にこのように入ります。

下が見切れてしまってちょっとバランス悪いですね。

そこで、「表示」の下にある「幅」と「高さ」を調整しましょう。

ここでは、「高さ」を400に変えてみました。

すると、このようにスマホで表示されてもすっきりと収まりました！

埋め込むときには、必ず「カスタムHTML」を使いましょう。

このようなHTML入力用のボックスが表示されます。

Googleカレンダーで埋め込みコードをコピーし、カスタムHTMLのボックスにペーストします。

これで、カレンダーの埋め込みは完了です。

カレンダー形式ではなく、最初から「予定リスト」として表示させたい場合は、

「デフォルトビュー」を「予定リスト」に変更し、その埋め込みコードをコピペします。

すると、サイト上でも予定リストが最初に表示されるようになります。

カレンダーではなく、イベントのみを見せたいという時はこの状態で埋め込むといいですね。

スマホでグローバルナビを開いたときの、スマホ用サイドバーにも予定を表示することができます。

WordPressダッシュボードの「外観」→「ウィジェット」を開き、

「カスタムHTML」の項目を「スマホ開閉メニュー下」にドラッグ＆ドロップします。

「タイトル」に表示したいタイトルを記入し、

「内容」欄に埋め込みコードをペーストし、「Save」をクリックすると完了です。

同様のやりかたで、フッター等好きなところに埋め込むことができます。

もちろん、どの場所であって、応用１で示した「予定リスト」の形式でも可能です。

ちなみに、スマホメニューに埋め込むときは私は「幅」280「高さ」300で、小さめに作りました。

PCではちゃんと全体が見えても、スマホでみると右端が切れてしまっている場合があります。

考えられる原因としては、おそらく

①「カスタムHTML」を使わずに埋め込みコードをそのまま本文にペーストしてしまった

②何かしらのプラグインの機能を使ったもののバグが起きた

ことではないかと思われます。

そんなときは「カスタムHTML」を使ってペーストすると、ちゃんとスマホ対応して表示されるようになります。

いかがでしたか。

Googleカレンダーはビジネスで非常に活躍するツールだと思います。

WordPressでも様々な使い方ができるので、ぜひ参考にしてみてください。