2018年9月25日の内容『Youtube, Google Map, Instagram, Twitter さまざまな埋め込み』

            9月25日は、Wordpressの記事内にSNSなど、さまざまな外部コンテンツを埋め込んでみました。

冒頭では、楽天アフィリエイト貼り付けの練習を行いました。

Youtubeの貼り付け

動画再生サイトのYoutubeで、見たい動画の画面を開きます。

動画の下にある『共有』と書いてある部分をクリックします。

『コピー』をクリックすると、URL(動画のアドレス)がコピーされます。

WordPressの投稿画面で、貼り付けたい場所にURLをペースト(Ctrl & V)します。

↓ ブログ画面で見るとこのようになります。
https://youtu.be/z-ffKF6kE_E

Youtube埋め込みの注意

Youtubeには、ドラマやアニメ、音楽など、著作権のある動画が違法にアップロードされている場合が多々あります。
このような違法動画をご自身のブログで紹介してしまうと、著作権侵害の同罪に問われる場合がありますのでご注意ください。

Googleマップの貼り付け

Google Map 目的地を検索などで表示します。

左側に『共有』というリンクがあるのでそこをクリック。

Googleマップは、URLを貼るだけではWordpressで表示されないので、『地図を埋め込む』をクリックします。

『HTMLをコピー』という部分をクリックします。すると、埋め込み用のコードがコピーされます。

ブログの貼り付けたい部分にペーストします。
このとき、必ず『テキストモード』で行ってください。

↓実際にブログに表示させるとこのようになります。

マウスで地図を動かすことが可能です。

名前のない目的地にピンをたてる方法

検索しても出てこない場所、名前のない場所にピンをたてた地図を作る方法についてご質問をいただきました。

調べたところ、方法がありましたので掲載します。

マップで、目的地を見つけ、マウスクリックして、小さな目印をつけます。

すると、下にその場所を示すカードが表示されます。

カードの下の数字(緯度経度です)をクリックします。

すると、『共有』リンクが出てくるので、あとは前述したものと同じです。

※思った通りに埋め込みが出来ない場合は、一度グーグルマップの画面を閉じて、再度目的地を探してみてください。
前の検索結果が残っていたりすると、上手く表示されないことがあります。

画像で地図を貼り付ける方法も

Googleマップには原則書き込みができないので、画像キャプチャをとって、それに矢印などを書き込む方法もあります。

このやり方については次回以降お伝えしてまいります。

Instagramの埋め込み

Instagramをやっていない方は無理に出来るようになる必要はありません。

パソコンでインスタグラムを開き、埋め込みたい記事の画像をクリックします

右下の点三つ『…』をクリックします。

『埋め込み』をクリックし

『埋め込みコードをコピー』をクリックします。

WordPressの投稿画面、テキストモードに貼り付けます。

インスタグラムのコードは非常に長いので、崩さないように気をつけましょう。

↓実際にはりつけたものです

ビジュアルモードにするとコードが壊れてしまいますので、表示の確認は別タブで『プレビュー』を開いて確認しましょう。

Instagramの検索

Instagram(インスタグラム)は、以下のアドレスのあとに探したいキーワードを入れてEnterをすると、アカウントにログインしていなくても検索ができます

↓このアドレスを開いても何も出ませんが
https://www.instagram.com/explore/tags/

↓以下のように、tags/の後に単語を入れると検索できます
https://www.instagram.com/explore/tags/猫

このように表示されます。

Twitterの埋め込み

Twitterは個別記事のURLを貼り付けるだけでWordpressに埋め込まれます。

言及したい記事(ツイート)をクリックし、画面に浮き上がらせ、

右上の『ツイートへのリンクをコピー』を選択してもいいですし
アドレスバーからアドレスをコピーしても良いです。

↓実際に貼り付けたものはこうなります
https://twitter.com/CatotDay/status/906085790291255297

地図の縮尺は、共有ボタンを押す前に調整してみてください。

埋め込みのまとめ

埋め込み可能なサービスは

  • URL(アドレス)を貼るだけで埋め込める
  • 埋め込みコード(HTML)がどこかを押すと取得できる

どちらかで埋め込むことが可能です。

埋め込みコード(HTML)を貼り付ける場合は、

  • 『テキストモード』で行うこと
  • コードが壊れないように気を付けること

の2点を気をつければ大丈夫です。

埋め込みのできるサービスは他にもいろいろあります。

いろいろご紹介していますが、必要なものだけできるようになれば大丈夫ですので、全部やれるようになろうと構えず、楽しんで取り組んでみてください。

次回のお知らせ

10月9日 火曜日 13:30~
場所が変わりますのでご注意ください。

内容は

  • 文字入れ画像作成サービスのご紹介
  • 画面キャプチャの方法

を予定しております。

タイトルとURLをコピーしました