Ver1.8 Released!

記事にツイートやInstagram、YouTube動画を埋め込む

ツイートや動画を埋め込む

WordPressでは、YouTube動画やツイートを簡単に埋め込むことができます。これはSANGOの機能ではなく、WordPressの標準機能です(どのテーマであっても共通して使用することができます)。

ツイートを埋め込む

ツイートを埋め込みたいときは、そのツイートのURLをエディタに貼り付けるだけでOKです。何かのタグで囲う必要はありません。

これで下のようにツイートが埋め込まれます。

注意
ただし、URLが貼られる行の前後には改行をはさむようにしてください。WordPressの仕様上、URLと同じ行に文字などが含まれているとURLがそのまま表示されてしまうようです。

Instagramを埋め込む

Instagramの写真を埋め込みたいときも、その写真のURLをエディタに貼り付けるだけでOKです。

Instagramのレイアウト崩れについて

2018年2月追記:Instagramを1記事に複数箇所に貼り付けるとレイアウトが崩れることがあるようです(重なって表示されてしまう)。こちらはテーマのバグではなく、WordPressの新バージョンのバグだと思われます(他のテーマでも同様の現象がおこっているようです:参照)。
以下のCSSをstyle.cssに追記すれば修正されるかと思います。

.instagram-media {
    position: static!important;
}

YouTube動画を埋め込む

YouTube動画についても、URLをエディタ上にペーストするだけで埋め込むことができます。ただし、注意したいのがこのままだとスマホで見たときに左右が切り取られてしまいます(高さが保たれてしまうのですね)。

動画の縦横比をレスポンシブに固定する方法

SANGOでYouTubeのレスポンシブ対応用のショートコードを用意しておきました。使い方は簡単。動画のURLを[youtube]〜[/youtube]ではさむだけです。

使い方例
[youtube]
https://動画のURL
[/youtube]

これでスマホ表示でも動画の縦横比が保たれるようになります。

MEMO

ショートコードの中に入れるのはiframeタグ(YouTubeで埋め込み共有を選んだときに表示されるコード)でもOKです。


地図を埋め込む

以下のように地図を埋め込むこともできます。Google Mapのメニューの「地図を共有または埋め込む」⇒「地図を埋め込む」からコードを取得できます。これを「テキスト」エディタの方へとコピペすればOKです。


53 COMMENTS

大地 2019/01/27

Instagramの埋め込みがうまくいきません。
エディタにはGutenbergを使用していて、エディタ画面では綺麗に表示されていますが、本番ページでは文字列になってしまいます。解決策など教えて頂きたいです。

回答を見る
ハッシュ 2019/01/15

質問させてさせて下さい。
サイドバーへ動画ウイジェットを使ってYouTubeの埋め込みを行いました。この場合、動画アイコン、タイトルのリンクが無効なのは仕様でしょうか?可能であればクリックでYouTubeへ遷移させたいのですが。サイト上での再生は問題ないです。

回答を見る
ぴよねこ 2018/10/11

sango愛用しております。

ツイートの埋込みについて質問です。
ツイートを埋め込むとPCではtwitterカードの形で正常に表示されるのですが、スマホでは引用文で文章のみ表示されます。
前後に改行は入れています。
スマホでもiPhoneでは正常に表示されています。確認できているのはAndroidで引用文になることです。
スマホ自体の問題かもしれませんが、解決方法があれば助かります。

回答を見る
たむら 2018/09/02

【スマホ閲覧時のインスタレイアウト崩れについて】

【現象】
・1回目の読み込み時、インスタグラムのレイアウトが崩れる。下部が切れる(”instagramでもっと見る”の部分で中途半端に切れます)
・正確に言えばキャッシュをクリアーしたときの1回目の読み込み時です
・2回目に読み込時はOK

【その他】
・パソコン閲覧時はOK。スマホで起こる現象

1回目の読み込み時にレイアウトが正しく表示されない現象はインスタの仕様でしょうか?

お手数ですがアドバイスをお願いできますしょうか。

関係ないかもしれませんが、こちらのCSSは試し済みです。
.instagram-media {
position: static!important;
}

回答を見る
ゆりこ 2018/08/14

初めまして。素晴らしいテーマをありがとうございます。
インスタグラムの埋め込みについてですが、埋め込みコードを書き換えてサイズ変更したら、写真部分が表示されません。あと、横に2つ並べたいのですが、どのようにすればよろしいのでしょうか??
ご返信いただけると幸いです。

回答を見る
松岡 2018/08/01

はじめまして。
数日前までは、インスタの埋め込みがうまく表示されていましたが、表示されなくなってしまいました。

https://spomani-mty.com/mie/
上記のURLのようになっています。

プラグインなどの追加はしていないのですが、プラグインなど以外に表示されなくなる原因として何かありますか?

ご返信いただけると幸いです。

回答を見る
今井 ゆいと 2018/07/17

インスタグラムの写真を横並び2列とかにしたいのですが、もともとショートコードにあった横並び2列ではうまくできませんでした。

回答を見る
てふてふ 2018/06/25

初めまして。
SANGOを使っております。

埋め込みについて質問なのですが、
ここでも紹介されているインスタグラムやツイッターなどの埋め込みは問題なく表示されるのですが、
「ピンタレスト」の画像を埋め込もうとすると表示されません。

全く同じ方法でほかのテーマのブログで埋め込むと問題なく表示されます。

SANGO独自の埋め込み方法となるのでしょうか。
ピンタレストの埋め込みツールはこちらです。
https://developers.pinterest.com/tools/widget-builder/?type=pin

他のサイトでは、下に表示される2つのコードをどちらもwordpressのテキストに貼り付けると問題なく表示されます。

もしSANGOで貼り付け方法がある場合は教えていただけると助かります。
よろしくお願いいたします。

回答を見る
チャンカワイ 2018/05/17

こんにちは。SANGOを愛用しています。
初めて質問させて頂きます。

記事にFacebook動画を埋め込んだ場合、PCだと綺麗に表示されますがスマホで確認すると動画下に謎の空白が出てしまいます。

コードはFacebook側が埋め込み用に提供している以下のようなコードです。
★以外は改変していません。

複数の動画で試しましたが全てスマホ表示のみ動画下に空白が出てしまいます。
ちなみにストークを使っているサイトで試した所、スマホでも空白は出てきませんでした。

こちら側の問題なのか、ワードプレス側の仕様なのか、他に原因があるのかがわからな買ったのでご質問させて頂きました。

もし宜しければ教えて頂けると大変助かります。

回答を見る
18番 2018/03/16

こんにちは。
外部MAでフォームを作成し、埋め込みコードをテキストモードで貼り付けましたがうまく表示されません。対処法を教えていただけますでしょうか。
埋め込みコードは以下のようになっています。

~

回答を見る
hiroa 2018/03/11

YouTube動画をレスポンシブ対応用のショートコードで貼り付けると、
改行しても文字が動画にくっついてしまうのですが、
動画の後に改行を入れることは可能でしょうか?

回答を見る
もんもん 2018/02/09

こんにちわ。質問させてください。
ツイッターの埋め込みですが、何も修正していないのに、ある日突然URLだけが表示されていることがあります。
前後の改行等もないことは確認しています。

試しに新規ページにURLを貼り付けると正常に表示されます。
同様の事象等、何か原因は考えられますでしょうか?

回答を見る
まこ 2018/02/05

SANGO使用させていただいているものでございます。

インスタグラムの埋め込みにおいてレスポンシブになるものとならないものがあるようです。下記を埋め込むとレスポンシブにならないようですが、原因はどのような可能性がありますでしょうか。

https://www.instagram.com/p/BdHdkJXhKfD/

もしわかれば、ご教示いただけると幸いです。

回答を見る
ぽっきー 2017/12/10

先日、サンゴ を購入させていただいのですが、バージョンは全てアップデートしないといけないのでしょうか?
それとも最新バージョンだけでいいんですか?

回答を見る
オクサン 2017/12/09

サルワカ様、お世話になります。

Youtube動画の埋め込みがうまく表示されません。

[youtube]
https://動画のURL
[/youtube]

をWordpressのビジュアルではなく、テキストのほうに入力しましたが、動画表示部分は空白スペースになり、下にyoutubeのURLのみ表示されている状態です。
https://kininaruetc.com/kousodrink-demerit/
何卒、ご教授ください。

[追伸]
SANGOのテーマを入れて、wordpressが楽しくなってきました。ありがとうございます。

回答を見る
Coco 2017/10/26

素晴らしいテーマをありがとうございますm(_ _)m

YouTubeのショートコードについてです。

私のサイトではもともとYouTubeを多く貼り付けており、ひとつひとつにYouTubeショートコードを入れていくのは大変です(^_^;)

以上のことから、2つの質問がございます。

1, 簡単にショートコードを設置できる方法はないか
→ 例えば、search regex的なプラグインを使用して一括でYouTube動画のURLをショートコードで囲えないか。

一応こんな記事も見つけたのですが、あまりファイルをいじりたくないもので・・・。

>> WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法 – WordPressサイトの制作ならOffise Kondo http://takayakondo.com/wordpress-youtube-responsive/

2, YouTube動画をショートコードなしで縦横比に対応していただけないか(次回のアップデートで)

ご多忙かと存じますが、よろしくお願いいたします。

回答を見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です