タイムラインやカレンダーの埋め込み方法

こんな感じになります。

「plugin containerの幅に合わせる」の注意点

これにチェックを入れるとタイムラインの幅が親要素の幅に収まるように調整してくれるのですが、リアルタイムにウィンドウサイズの伸縮に合わせてタイムラインの幅を調整してくれるわけではありません。

というのも、タイムラインの幅は読み込まれた時点で決定されるからです。

ですので読み込んだ後でブラウザ幅を伸縮させたり、スマホを回転させて幅が変わってもタイムラインの幅は読み込み時と変わりません。

あくまでも読み込み時の幅が維持されます。

iframeによる方法

iframeを選択し、表示されたコードをコピーして表示させたい場所に貼り付けるだけです。

WordPressの場合は「カスタムHTML」に貼り付けます。

Googleカレンダー

Googleカレンダーにアクセスします。

画面右上の「歯車のアイコン」をクリックし、現れた項目の中から「設定」をクリックします。

設定画面で「マイカレンダーの設定」の中からサイトに埋め込むカレンダー名をクリック。

するとそのカレンダーの設定画面になります。

まずはアクセス権限を設定します。

「アクセス権限」をクリックし、「 一般公開して誰でも利用できるようにする 」にチェックを入れます。

アクセス権限の設定が終わったら、下にスクロールして「カレンダーの統合」に行きます。

カレンダーは何もカスタマイズしない場合はこのような見た目になります。

カスタマイズが必要ない場合は、「埋め込みコード」欄に記載されているコードをコピーして、サイトの好きな場所に貼り付けたら完了です。

カレンダーの見た目やサイズを自分好みにカスタマイズしたい場合は「カスタマイズ」ボタンをクリックします。

カスタマイズ画面ではカレンダーのタイトルや表示させる項目、背景色やカレンダーのサイズ等、様々な設定が出来ます。

自分の好きなようにカスタマイズを行い、カスタマイズが完了したら画面上部に表示されている埋め込みコードをコピーボタンをクリックしてコピーします。

あとは表示したい場所やウィジェットにコードを貼りつけるだけです。

試しにここにカスタマイズしたコードを貼り付けると

以上のような感じになります。

注意すること

Googleカレンダーは、ただコードを貼りつけただけでは、いわゆるレスポンシブへの対応ができません。

ですので、レスポンシブ対応をしようとする場合にはCSSを設定する必要があります。

以下にレスポンシブ対応の一例を示しておきます。

Googleカレンダーでコピーしたiframeを適当なクラス名を付けたdiv要素で囲んでおきます（今回はdiv要素にg-calendarというクラスを付けました）。

<div class="g-calendar">
Googleカレンダーからコピーしてきたiframe
</div>

そしてCSSを以下のように設定します。

.g-calendar {
  margin-top: 15px;
  position: relative;
  width: 100%;
  padding-top: 75%;
}

.g-calendar iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

先ほど貼り付けたカレンダーはこの方法でレスポンシブ対応させています。

このCSSはYouTubeやGoogle Mapなどを縦横の比率を保ったままレスポンシブ対応させるときの定型的なCSSなのですが、 Googleカレンダーにも使えます。

縦横の比率を保ったままでレスポンシブにiframeを表示させるCSSの詳細な仕組みについては、優しく解説してくれるサイトが沢山あるのでググってみてください。

埋め込みだけなら簡単です

以上がTwitter、Facebookのタイムライン、Googleカレンダーの埋め込みでした。

埋め込みだけなら、どの方法でも

埋め込みコードをコピー　→　表示したい場所に貼り付け

だけで簡単にできます。

ただし、貼り付けるだけではレスポンシブ対応が出来ないものについては、CSSにひと工夫必要となります。

上手にWEBサイトに埋め込んで、必要な情報を発信していきましょう。