アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

CHACO-WEBかんたんマニュアル【WordPressを利用した各種ツールの埋め込み方法】

CHACO-WEBかんたんマニュアル【WordPressを利用した各種ツールの埋め込み方法】

CHACO-WEBかんたんマニュアルとして、今回はWordPressを利用した各種ツールの埋め込み方法をご紹介します。

・Googleマップ(地図の共有)
・YouTube動画(動画の共有)
・Googleカレンダー(予定の共有)

今回は上記3点に埋め込む方法をお伝えします。
基本的な操作方法は全て共通です。

1、埋め込むタグを取得する。
2、埋め込みタグをコピーして控えておく。
3、WordPress管理画面にログインし、埋め込みタグを貼り付ける。

本記事はやや難易度の高いものになりますが、ぜひ習得してお客様に役立つホームページにしましょう。

 

Googleマップ(地図の共有)

Googleマップを埋め込むことで所在地をお客様に正確に伝えられます(特にスマホの場合はGPSなどで目的地と現在地情報がつかめるので便利です)。
また、Googleマップ上に表記されている星評価やコメントなども共有できます。

※Googleアカウントは必要ありません。

 

例として東京都千代田区千代田1-1-1の地図を埋め込む方法をご紹介します。

・Googleマップ https://www.google.com/maps/?hl=ja で住所を検索します。

↓検索窓に住所を入れて検索をかけます。
・検索窓に住所を入れて検索をかけます。

↓赤いポイントマークが正しい場所に立っていることを確認します。
赤いポイントマークが正しい場所に立っていることを確認します。

↓共有ボタンをクリックします。
共有ボタンをクリックします。

↓地図を埋め込むをクリックします。
地図を埋め込むをクリックします。

↓「+−」ボタンで縮図を変更し、HTMLをコピーをクリックして埋め込みタグをコピーします。
+−ボタンで縮図を変更し、HTMLをコピーをクリックして埋め込みタグをコピーします。

↓WordPress管理画面へアクセスし、テキストモードの上、コピーしたタグを貼り付けます。

↓一度ビジュアルモードに変更し、反映されているか確認をします。

最後に公開をして完了です。

 

 

YouTube動画(動画の共有)

動画をホームページに埋め込みたい場合は、動画データをそのままホームページに入れるのではなく、YouTubeに動画をアップロードして、そのYouTubeをホームページに埋め込むという方法がおすすめです。

動画データというのはとても重いため、動画データをそのままホームページに入れると、ホームページの操作性が鈍くなるためです。

動画は、文字や写真とは比較にならないほどお客様にたくさんの情報を伝えることができますので、とてもおすすめです。

※Googleアカウントが必要です。

 

YouTubeに動画をアップロード方法はこちらをご覧下さい。
https://support.google.com/youtube/answer/57407?co=GENIE.Platform%3DDesktop&hl=ja

例として https://www.youtube.com/watch?v=sk9u_iFEue0 の動画を埋め込む方法をご紹介します。

↓共有ボタンをクリックします。
共有ボタンをクリックします。

↓埋め込むボタンをクリックします。
埋め込むボタンをクリックします。

↓コピーを押します。
開始位置を調整したい方は、開始位置にチェックを入れ、秒単位で調整ができます。
コピーを押します。

↓WordPress管理画面へアクセスし、テキストモードの上、コピーしたタグを貼り付けます。

↓一度ビジュアルモードに変更し、反映されているか確認をします。

最後に公開をして完了です。

 

 

Googleカレンダー(予定の共有)

Googleカレンダーを活用し、ホームページにスケジュールカレンダーを表示させることができます。
お店の営業カレンダーや、予約状況の確認カレンダーなど多種多様なカレンダー表示が可能です。

また、独自にカスタマイズすることで予約システムと連動させることもでき、夢は膨らみます。

※Googleアカウントが必要です。

 

・Googleカレンダー https://calendar.google.com/calendar/u/0/r にアクセスします。

↓新しいカレンダーを作成します。
新しいカレンダーを作成します。

↓カレンダーの名前と説明を記入します。
カレンダーの名前と説明を記入します。

↓Googleカレンダーに戻り、マイカレンダーをクリックし、先ほど作成したカレンダーが入っていることを確認します。
マイカレンダーをクリックし、先ほど作成したカレンダーが入っていることを確認します。

↓カレンダーの名前の左横にチェックを入れて、カレンダーに実際の予定を書き込みましょう。
カレンダーの名前の左横にチェックを入れて、カレンダーに実際の予定を書き込みましょう。

↓カレンダーに予定が保存されていることを確認します。
カレンダーに予約が保存されていることを確認します。

↓カレンダーの名前の右横の設定ボタンをクリックし、設定と共有ボタンをクリックします。
カレンダーの名前の右横の設定ボタンをクリックし、設定と共有ボタンをクリックします。

↓アクセス権限にチェックを入れ、埋め込みコードをコピーします。
アクセス権限にチェックを入れ、埋め込みコードをコピーします。

アクセス権限にチェックを入れ、埋め込みコードをコピーします。

↓WordPress管理画面へアクセスし、テキストモードの上、コピーしたタグを貼り付けます。

↓一度ビジュアルモードに変更し、反映されているか確認をします。

最後に公開をして完了です。

 

 

まとめ

今回の記事では、Googleマップ、YouTube動画、Googleカレンダーの3つのサービスのホームページ埋め込み方法をご紹介しました。

この3つのサービスに限らず、ホームページへの埋め込みタグを用意しているサービスは山のようにあります。

埋め込みサービスのメリットは、埋め込み作業さえしてしまえば、あとはホームページを編集しなくても、埋め込み元のサービスを編集するだけでホームページが自動に更新される点です。

忙しくてホームページの更新ができない、という方にもメリットがあるのではないでしょうか?

便利なサービスを有効活用し、お客様に役立つ有益なホームページにしていきましょう。


          この記事を書いた人        
タク制作部長
株式会社Cyber Cats 制作部長。2011年よりWebサイト制作業界に入り、日々デザインとにらめっこしています。 美しい文字組みに関心があり、どうしたら相手に伝わるデザインができるか切磋琢磨する日々です。 奇抜な料理とロック好き。
詳しいプロフィールはこちらから
SNSでフォローする