SANGOのカスタマイズイメージ

SANGO
カスタマイズガイド

テーマの更新情報

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

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

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

目次 非表示

ツイートを埋め込む

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

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

注意

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

Instagramを埋め込む

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

https://www.instagram.com/p/BYBFJn-jg5g/?taken-by=natgeo

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

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

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

YouTube動画を埋め込む

YouTube動画についても、URLをエディタ上にペーストするだけで埋め込むことができます。ただし、クラシックエディター（WordPressの旧エディター）の場合、このままだとスマホで見たときに左右が切り取られてしまいます。

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

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

使い方例

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

これでスマホ表示でも動画の縦横比が保たれるようになります。Gutenbergエディターを使っている場合には、自動でサイズ調整されるため、このショートコードは不要です。

MEMO

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

地図を埋め込む

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

50 COMMENTS

アバター
N 2022/07/08

InstagramのURLを貼り付けても埋め込めない

今月、WordPressそしてSANGOを使い始めた初心者です。お世話になっています。 Instagramを埋め込みたいのですが、リンクをコピーしてエディタに貼り付けても「このコンテンツを埋め込めませんでした。」と表示されてしまいます。適切なURLの取得方法など、うまくいくはずのやり方を教えていただきたいです。 埋め込めない理由として、プラグインが関係していたりするものなのでしょうか。 原因を特定…

回答を見る
アバター
m 2022/04/27

地図の埋め込みをしたい

いつもサイト上で有益な情報をありがとうございます。 サンゴ、ポリプを使っています。 地図とインスタの埋め込みができないのですが、どうしたらできるでしょうか？ Youtubeの埋め込みはできます。 Gutenbergを使用しており、Google mapの埋め込み用HTMLをコピーしましたが、「このコンテンツを埋め込めませんでした。」が出ます。 お手数おかけしますが、よろしくお願いいたします。

回答を見る
アバター
堀田崚介 2021/09/29

スマホでうまく動画が反映されない

お世話になっております 投稿記事でメディアの動画を挿入しているのですがPCではうまく動画が反映されているのですがスマホ画面になると動画のサイズが大きくなってしまい生地がうまく反映されません。どのように対処したら良いのかわかりません。 ご教授のほどよろしくお願い致します。

回答を見る
アバター
沖田侑樹 2021/06/21

Twitter埋め込みでの画像表示について

お世話になっております。 いつもSANGOを利用させていただいております。 Twitter埋め込みでの画像表示について不明な点があります。 当記事で説明されているInstagramのようにタイムライン上で流れている投稿のまま、URLリンクではなく画像を表示することは難しいでしょうか？ もしくはレスポンシブに表示させたいので、引用タグ？を取り除く方法がございましたらご教授お願いいたします。

回答を見る
アバター
ながの 2020/09/12

こんにちは。YouTubeを埋め込んださい、キャプションの表示がエディタ画面と異なります。具体的には、エディタ画面では中央下に小さく表示されていても、サイトでは通常の段落のような形で表示されてしまいます。理由はわかりますでしょうか？

回答を見る
アバター
なかえ 2020/07/03

[youtube]タグで囲まれた動画の最大幅を小さくしたい

[youtube] 動画URL [/youtube] で囲ったタグについて、CSSにカスタマイズを行いたいです。具体的には ・marginを取り、横幅いっぱいになっている動画に余白を作る ※スマホで見る場合には、余白はいらないため、その点も考慮したCSSをご提示いただけますと幸いです。

回答を見る
アバター
ayanogoto 2020/04/15

Twitterの埋め込みを中央寄せにしたい

お世話になっております。 タイトルの通り、[center][/center]で囲ってもTwitterの埋め込みが中央寄せになってくれません。 ツイートの「ツイートを埋め込む」画面で遷移するページからコードを張り付けるパターン、ガイドで紹介されているURLをそのまま貼り付けるパターン、どちらでも変化がないので解決方法を教えていただきたいです。よろしくお願いいたします。

回答を見る
アバター
ペンギン 2020/03/15

Twitter埋め込みでスマホのみ横スクロールバーが表示される

お世話になっております。 Twitterを埋め込んだ記事をiPhoneで確認すると、最下部に横スクロールバーが表示されます。 埋め込んだTwitterの横幅は、記事内に収まっており、はみ出しているわけではありません。 Twitterの埋め込みを削除すると、横スクロールバーは表示されなくなります。 この現象は、ドラマの公式サイトのTwitterを埋め込んだ時に発生するようです。 公式サイト以外のTw…

回答を見る
アバター
コトリ 2019/06/06

※解決しました※Youtube埋め込みショートコードを使用すると冗談に大きな余白ができる

サルワカさん、お世話になっております。 [youtube]〜[/youtube]を使ってYoutube動画を埋め込んでいたのですが、直近動画の上に大きな余白が出るようになりました。 [youtube]〜[/youtube]をはずせば余白は無くなるのですが対処方法ありますでしょうか？ ========================= 先ほど質問した件ですが、解決しましたので回答不要です。 お騒がせ…

回答を見る
アバター
大地 2019/01/27

Instagramの埋め込みができない

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

回答を見る
アバター
ぴよねこ 2018/10/11

Twitterの埋め込みが一部の端末でうまく動かない

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

回答を見る
アバター
たむら 2018/09/02

インスタグラムの埋め込みが崩れる

【スマホ閲覧時のインスタレイアウト崩れについて】 【現象】 ・1回目の読み込み時、インスタグラムのレイアウトが崩れる。下部が切れる（"instagramでもっと見る"の部分で中途半端に切れます） ・正確に言えばキャッシュをクリアーしたときの1回目の読み込み時です ・2回目に読み込時はOK 【その他】 ・パソコン閲覧時はOK。スマホで起こる現象 1回目の読み込み時にレイアウトが正しく表示されない現象…

回答を見る
アバター
チャンカワイ 2018/05/17

Facebook動画を埋め込んだ際にスマホで確認すると動画下に空白ができる

こんにちは。SANGOを愛用しています。 初めて質問させて頂きます。 記事にFacebook動画を埋め込んだ場合、PCだと綺麗に表示されますがスマホで確認すると動画下に謎の空白が出てしまいます。 コードはFacebook側が埋め込み用に提供している以下のようなコードです。 ★以外は改変していません。 複数の動画で試しましたが全てスマホ表示のみ動画下に空白が出てしまいます。 ちなみにストークを使って…

回答を見る
アバター
もんもん 2018/02/09

ツイートを埋め込んでもURLしか表示されない

こんにちわ。質問させてください。 ツイッターの埋め込みですが、何も修正していないのに、ある日突然URLだけが表示されていることがあります。 前後の改行等もないことは確認しています。 試しに新規ページにURLを貼り付けると正常に表示されます。 同様の事象等、何か原因は考えられますでしょうか？

回答を見る
アバター
オクサン 2017/12/09

クラシックエディターでYouTubeの埋め込みがうまくできない

サルワカ様、お世話になります。 Youtube動画の埋め込みがうまく表示されません。 [youtube] https://動画のURL [/youtube] をWordpressのビジュアルではなく、テキストのほうに入力しましたが、動画表示部分は空白スペースになり、下にyoutubeのURLのみ表示されている状態です。 https://kininaruetc.com/kousodrink-deme…

回答を見る
アバター
Coco 2017/10/26

YouTubeの埋め込みを一括でレスポンシブにしたい

素晴らしいテーマをありがとうございますm(_ _)m YouTubeのショートコードについてです。 私のサイトではもともとYouTubeを多く貼り付けており、ひとつひとつにYouTubeショートコードを入れていくのは大変です(^_^;) 以上のことから、2つの質問がございます。 1, 簡単にショートコードを設置できる方法はないか → 例えば、search regex的なプラグインを使用して一括でY…

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。