以前も同様の投稿をしましたが、最新版としてまとめました。
Googleカレンダーをブログに埋め込む
Googleカレンダーには共有カレンダー機能もあり、カレンダーを他の人に開示する事ができます。
更にそのカレンダーのコードを取得してブログのHTMLに追加する事でブログにGoogleカレンダーを掲載する事が可能です。
Googleカレンダーの設定
Googleアカウントにて、PC版Googleカレンダーにログインします。
共有するカレンダーを新規作成
他のユーザーと共有するカレンダーを新規に作成します。
既に使用しているカレンダーを他のユーザーと共有する場合は、カレンダーの新規作成は不要。
その場合、既存のカレンダーのアクセス権限を一般公開します。
設定>カレンダーを追加>新しいカレンダーを作成 を開きます。
カレンダーの名前と説明を入力して"カレンダーを作成"ボタンをクリックすると新規カレンダーが作成されます。
アクセス権限を付与してカレンダーを一般公開する
新規作成したカレンダーに対してアクセス権限を付与して一般公開します。
設定から対象のカレンダーの "アクセス権限"を開き、"一般公開して誰でも利用できるようにする"をチェック。
"予定の表示"2つから選択する旨表示されるので、どちらかを選択。
当方は、すべての予定の詳細を選択しています。
カレンダーの表示設定
対象のカレンダーの”カレンダーの統合”を開き、埋め込みコード用カレンダーのカスタマイズをクリックして以下の画面で実際に表示されるカレンダーを設定します。
表示する項目やサイズ(幅と高さ)をカスタマイズ可能なのでお好みで設定します。
サイズ入力に関しては、予め表示させたい箇所の幅や高さを確認しておくと良いでしょう。
カスタマイズが完了したら、同画面の上部の表示されている埋め込みコードのコピーボタンをクリックしてメモ帳などに一旦コピーしておきます。
自身のブログにコードを貼付け
あとは、先程コピーしたコードを自身サイトHTMLの適所に貼付けすれば完了。
Bloggerに追加
作業の前に使用しているテーマのバックアップは必ず取りましょう。
コピーしたコードを直接HTMLの適所に貼付けても良いのですが、レイアウトからガジェットの追加でコードを追加する方法が1番簡単です。
今回はサイドバーに追加してみます。
ダッシュボードからレイアウトを開き、サイドバーセクションの"ガジェットを追加"をクリックします。
追加するガジェットのリストが表示されるので、"HTML/JavaScript"をクリック。
"HTML/JavaScript"の設定が表示されるので、タイトルを入力して、コードを入力する欄に先程メモ帳にコピーしたGoogleカレンダーのコードを貼り付け完成。
デモページのサイドバーセクションに追加してあります。
ブログにカレンダーって必要?
まぁそのブログのテーマによるのではないでしょうか?
Googleカレンダーのコードはifreamを使っている為、ブログの読込速度には悪影響があるかも知れません。読込速度重視のブログ運営を目指しているブログには少し不向きかも知れません。
以上
コメント