スマホやPCで無料で使えるGoogleカレンダーの貼り付け方法。
無料で利用できるうえに、データは自動的にクラウド保存されていて、Gmailと連動していてとっても便利! ご利用になっている方も多く、ホームページに張り付けて活用される方もよく見かけます。
私も!というあなたのために、改めて貼り付け方法を丁寧にご案内したいと思います。
ちなみに、当PC教室のスケジュールカレンダーはこんな感じ
1)カレンダーをカスタマイズする
※この作業はPCまたはタブレットで行わないとできないと思います(2024.5現在)
ブラウザでGoogleカレンダーを開きます。
![](https://wordpress119.com/wp-content/uploads/2024/05/calender01.png)
左側のサイドメニューの下の方にある「他のカレンダー」の「+」をクリックし、「新しいカレンダーを作成」を選択します。
![](https://wordpress119.com/wp-content/uploads/2024/05/calender02.png)
新しいカレンダーを作成します。
名前、説明を記載し「カレンダーを作成」のボタンをクリックします。
![](https://wordpress119.com/wp-content/uploads/2024/05/calender03.png)
今回のカレンダーは「ご予約カレンダー」とします。
左側のリストに、今作成したカレンダーが表示されています。
カレンダーの右側にある縦の・・・をクリックするとメニューが現れます
![](https://wordpress119.com/wp-content/uploads/2024/05/calender04.png)
「設定と共有」を選びます。この時チェックのついている色が、予定を書き込んだときの色になりますので任意で変更をしてもOKです。
(色を変更したい場合は、先に色にチェックを付けてから「設定を共有」を選んでください)
![](https://wordpress119.com/wp-content/uploads/2024/05/calender05-1024x780.png)
「設定と共有」をクリックすると、設定の画面が表示しますが、下方向にスクロールすると「カレンダーの統合」の項目が表示されます。
「埋め込みコード」が見つかったら、コピーします。
2)Wordpressに貼り付け
カレンダーの埋め込みコードをコピーできたら、Wordpressの編集画面を表示します。
「ブロックを追加」ボタンをクリックし、「カスタムHTML」を探します。
![](https://wordpress119.com/wp-content/uploads/2024/05/calender06.png)
![](https://wordpress119.com/wp-content/uploads/2024/05/cc07e677-211d-471c-b00e-8e8a133cdca5.webp)
「ブロックを追加」をクリックしたときに表示する6つの項目は、よく使うものが表示されるので、作成途中でも表示されている項目が入れ替わるの。
ここになかったら「すべてを表示」をクリックしてさがしてね。
![](https://wordpress119.com/wp-content/uploads/2024/05/calender07-1024x304.png)
ここで「公開」または「更新」をクリックし、プレビューで確認してください
カレンダーが表示されていれば完了です
まとめ
Googleカレンダーを張り付ける方法についてご案内しました。
各種予約サービスでは有料プランでしか張り付けることができないカレンダーでも、Googleカレンダーを利用すれば無料で活用ができますね。
ご予約のメニューを変えたり色を変えたりすると、また張り付けなおす必要はありますが、無料で便利なものですので十分活用できると思います。
以前は、Googleからコピーした埋め込みコードをそのまま貼り付けたら、スマホで見たときにレイアウトが崩れていたのですが、なんだか大丈夫?になっていてびっくり。
ご利用になっているテーマで横幅の設定がはみ出ている場合は埋め込みコードの中の
「width=”800″ 」を「width=”100%”」に変更してみてくださいね。