もっと機能を追加

地図の埋め込みや、FacebookやTwitterのタイムラインなどを表示する方法を見ていきましょう。

Googleマップの埋め込み

  1. Google マップ を開きます。
  2. 埋め込みたい地図やストリートビュー画像を地図上に表示します。
  3. 左上のメインメニュー  をクリックします。
  4. [地図を共有または埋め込む] をクリックします。
  5. 表示されるボックスの上部で [地図を埋め込む] タブを選択します。
  6. ご希望の埋め込みサイズを選択し、そのコードをコピーしてウェブサイトのソースコードに貼り付けます。

YouTube動画の埋め込み

  1. You Tube を開きます。
  2. 埋め込みたい動画を表示します。
  3. 動画の下にある [共有] をクリックします。
  4. [埋め込みコード] をクリックします。
  5. その下に表示されるボックス内のコードをコピーします。
  6. ウェブサイトのHTMLファイルをエディタで開き、動画を表示したい場所にコードを貼り付けます。

Xタイムラインの埋め込み

  1. https://publish.twitter.com/に移動します。
  2. 埋め込みたいタイムラインのリンクを入力します。
  3. ウェブサイトに合った高さや テーマ（明るいか暗いか） を指定して、デザインをカスタマイズします。 
  4. コードをコピーし、自分のウェブサイトのHTML上で、タイムラインを表示したい場所にペーストします。
  5. これで完了です。

Facebookタイムラインの埋め込み

  1. Page Plugin を開きます。
  2. 埋め込みたいFacebookページを[Facebook Page URL]に入力します。
  3. 希望の埋め込みサイズとオプションを選択し、[Get Code] をクリックします。
  4. 2つのコードが表示され、1つ目のコードを <body>開始タグのすぐ下 に貼り付けます。
  5. 2つ目のコードは表示したい場所に貼り付けます。

※注意点として、サーバ上でないとFacebookのタイムラインは表示されません。

Facebook

Googleカレンダーの埋め込み

  1. パソコンで Google カレンダー を開きます。
  2. 右上にある設定アイコン  > [設定] をクリックします。
  3. [カレンダー] タブを開きます。
  4. 埋め込むカレンダーの名前をクリックします。
  5. [このカレンダーを埋め込む] セクションに表示される iframe コード をコピーします。
  6. ウェブサイトのHTMLファイルをエディタを開き、カレンダーを表示したい場所にコードを貼り付けます。
  7. 埋め込まれたカレンダーは、あなたがカレンダーを共有したユーザーにのみ表示されます。
    すべての訪問者がカレンダーを閲覧できるようにするには、カレンダーを一般公開する必要があります。
« ブログ個別ページの作成
サーバへのアップロード »