>>アフィリエイトで毎月20万円の報酬が発生する仕組みを作る方法はこちら

WordPressにGoogleカレンダーを埋め込む方法ー基本からレスポンシブ対応までを詳しく丁寧に解説

普段、ワードプレスの構築方法について相談を受けることがあるのです。

その時に、ご自身のサロンとか飲食店などを経営する方から、「ワードプレスにカレンダーを埋め込みしたい」とご相談されることがあります。

最初にお伝えすると、簡単にワードプレス内にカレンダーを設置するなら「Googleカレンダー」がオススメです。

Googleカレンダーは、Googleが無料で提供するスケジュール管理のサービスです。

Googleカレンダーは、個人の予定とは別で、共有できるスケジュールを作ることができるのが便利です。

今回は、ワードプレスの記事内に簡単に埋め込みする方法を解説します♪

Googleカレンダーを利用するには、Googleアカウントの登録が必要になります。
Googleアカウントをお持ちではない方は、こちらの記事を参考に作ってみてください。
> Gmailアドレスの作成方法を解説!ネットビジネスには専用メールアドレスが必須!

YouTube動画でも解説しました

Googleカレンダーの作成方法

Googleカレンダーの作成手順は以下の通りです。

  • 公開用のカレンダー「スケジュール」を作成
  • カレンダーに予定を書き込む
  • ワードプレスにGoogleカレンダーを埋め込みする

まずは、Googleカレンダーを開いてください。

こちらからアクセスするとGoogleカレンダーが開きます。

ちなみに、普段、Googleカレンダーを開くならこちら。

Google検索画面を開き、右上にある9個の点をクリックして、その中から「カレンダー」を見つけます。

これでGoogleカレンダーが開きました♪

では、カレンダーを開いた状態からやっていきましょう!!

公開用のカレンダー「スケジュール」を作成

左側の「マイカレンダー」の下にある「他のカレンダー」の「+(他のカレンダー追加)」を開きます。

新しいカレンダーを作成」をクリックします。

新しいカレンダーを作成が開くので、名前の欄に「❶タイトルを入力」して、カレンダーを作成を「❷クリック」します。

カレンダーを作ったら、「マイカレンダー」に追加されています。

カレンダーに予定を書き込む

カレンダーに予定を入れる時は、予定を入れたいところを選んでクリックします。

すると、下図のようなポップアップが開きますので、こちらに予定を入れます。

上から

  • タイトルを入力します
  • 日付、時間を入力します
  • (毎週繰り返す場合は「繰り返さない」をクリックして、毎週とか選択します)
  • (場所がある場合は追加します)
  • 作ったスケジュール(この画像の場合は、予約状況)を選択します

全ての入力が完了したら、右下の「保存」をクリックします。

ちなみに、ワードプレスにカレンダーを埋め込みした後にスケジュールに入れ込みしても、ちゃんとスケジュールは反映されますので安心してくださいね!

ワードプレスにGoogleカレンダーを埋め込みする

カレンダーに予定を書き込んだら、ワードプレスにGoogleカレンダーを埋め込みしてみましょう。

Googleカレンダーの左側にある「マイカレンダー」から公開用のカレンダー名を見つけます。

公開用のカレンダーにマウスを持っていくと、3つの点をクリックします。

その後に「設定と共有」をクリックします。

カレンダー設定が開きますので、【アクセス権限】の項目の「一般公開して誰でも利用できるようにする」にチェックを入れます。

チェックを入れると、警告が表示されますので「OK」をクリックします。

次に、カレンダー設定の下の方にスクロールして【カレンダーの統合】という項目を見つけて、「カスタマイズ」をクリックします。

カスタマイズをクリックすると、表示するカレンダーの設定ができるので、細かな設定を行います。

カスタマイズで調整するときに、注意が必要なのが、カスタマイズ項目の下の方にスクロールして「表示するカレンダー」のチェックを確認してください。

※公開したいスケジュール以外はチェックを外しましょう。

レイアウトが決まったら、カレンダーの上にある「埋め込みコード」をコピーします。

ワードプレスにGoogleカレンダーを埋め込みする

埋め込みコードを取得したら、ワードプレスの埋め込みしたい場所に埋め込みコードを貼り付けしていきます。

埋め込む場所によって、埋め込みコードの貼り方が変わるので、今回は、ウィジェットで貼るときと、固定ページなどの編集エディターで貼るときとお伝えします。

ウィジェットを使って、Googleカレンダーを埋め込む

トップページの下の方に埋め込む場合にウィジェットを使います。

テーマによって、ウィジェットの場所が変わるのですが、基本的にトップページの下の方だったら「トップページ下部」「インデックスリストボトム」とかになります。

そのウィジェットにカスタムHTMLでコードを貼り付けします。

❶まずは、ワードプレスのダッシュボードから「外観」→「ウィジェット」をクリックします。

❷ウィジェットのページが開きますので、左側から「カスタムHTML」を見つけたらクリックして、「インデックスリストボトム」(テーマによってはトップページ下部ウィジェット)を選択して「ウィジェット追加」をクリックします。

❸カスタムHTML内にコピーしたコードを貼り付けし、「保存」をクリックします。

埋め込みするとこんな感じになります。

以上がウィジェットで、Googleカレンダーの埋め込みをする方法になります。

投稿内に埋め込む方法

お問い合わせページなどの中に、Googleカレンダーを埋め込む方法をお伝えします。

埋め込みしたいページの投稿編集画面を開きます。

編集ページを開いたら、埋め込みしたい場所にカーソルを一度合わせて、左上の「+(ブロックの追加)」をクリックします。

ブロックの一覧から「カスタムHTML」を見つけて、クリックします。

HTMLを入れ込む欄が入りますので、コピーしたコードを貼り付けてください。

コードを貼り付けしたら、「プレビュー」で確認ができますので、確認をしてみてください。

これで、投稿内にも入れ込みができるようになりました♪

Googleカレンダーをレスポンシブ対応させたいとき

Googleカレンダーの埋め込みができてテンションが上がるところではあるのですが・・・

スマホで Googleカレンダーを表示させてみると、表示が縦長になってしまっているのです。

別にそんなにおかしいわけではないけど、もうちょっとスッキリサイズにならないかなぁ・・・ってことで、スマホ表示を調整したいと思います(^O^)/

まず、スマホ表示させるには、以下のコードが必要になるので、こちらをコピーします。

/* Googleカレンダー(スマホ表示) */

.googleCalender iframe {
width:100%;
max-width:800px;
height:400px;
}

/* Googleカレンダー(PC表示) */

@media (min-width: 960px) {

.googleCalender iframe {
height:600px;
}

}

ワードプレスのダッシュボードから「外観」→「カスタマイズ」をクリックしてカスタマイズを開きます。

カスタマイズが開きますので、「追加CSS」をクリックします。

追加CSSにコピーしたコードを貼り付けします。

コードを貼り付けしたら、右上にある「公開」をクリックします。

これで、追加CSSの入れ込みが終わりました。

次に、先ほど、ウィジェットや投稿ページに埋め込みしたGoogleカレンダーのコードに追加するHTMLを入れ込みします。

<div class="googleCalender">
Google カレンダー埋め込みコード
</div>

Googleカレンダーのコードの前後にHTMLのコードを入れてください。

これで、保存(更新)したら完成です。

コードの埋め込みが終わったら、実際の表示を確認してみてください。

すっきりした表示になりました(^O^)/

以上で、Googleカレンダーのレスポンシブ対応は完了です♪

まとめ

今回は、 Googleカレンダーをワードプレスに埋め込みする方法を解説しました。

おさらいをすると以下の通りです。

  • 公開用のカレンダー「スケジュール」を作成
  • カレンダーに予定を書き込む
  • ワードプレスにGoogleカレンダーを埋め込みする

この流れで埋め込みをすると、簡単に誰でもスケジュールをワードプレスで表示させることができます。

ぜひチャレンジしてみてください。

有料WordPressコミュニティのお知らせ

ワードプレスの構築を1人で頑張るのが不安な方に、有料ワードプレス専門のコミュニティ「マスタープレス」をメルマガ登録者さん限定にご案内しています。

メルマガの登録は無料!
配信解除は自由!

シェアしてね♪


お子さんとの時間を優先させながら
自分の力で稼げるママになって欲しい

アフィリエイトメール講座では、パソコン知識も何もないノースキルの主婦がブログで稼ぐために知っておきたい基本的なことがメルマガで届きます。

今、「ブログで稼ぐってどういうことなんだろう?」とか、「ブログ記事を書いててもイマイチ反応がない、伸びない・・・」とか

このように思っている方は、アフィリエイトメール講座にご登録ください。

メール講座の登録は無料!配信解除はいつでもOK! 登録はこちらです↓


ABOUT US

ゆかアフィリエイター兼WEB制作マーケター
ご訪問ありがとうございます!
当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。

パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。

毎月1から2件のサイト代行をし、WordPressのコミュニティを運営したりアフィリエイトサイトを運営したりしております。

当ブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

詳しいプロフィールはこちら>>