2.0 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をエディタ上にペーストするだけで埋め込むことができます。ただし、クラシックエディター(WordPressの旧エディター)の場合、このままだとスマホで見たときに左右が切り取られてしまいます

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

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

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

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

MEMO

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


地図を埋め込む

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


60 COMMENTS

headcocoro 2019/07/26

youtubeのショートコードがGutenbergの

バグ連絡です。 youtubeのショートコードが機能していません。 ・プラグインを全停止した状態と ・プラグインをSanga Gutenbergのみアクティブにした状態と そのどちらもです。

回答を見る
コトリ 2019/06/06

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

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

回答を見る
大地 2019/01/27

Instagramの埋め込みができない

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

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

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

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

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

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

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

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

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

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

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

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

はじめまして。 数日前までは、インスタの埋め込みがうまく表示されていましたが、表示されなくなってしまいました。 https://spomani-mty.com/mie/ 上記のURLのようになっています。 プラグインなどの追加はしていないのですが、プラグインなど以外に表示されなくなる原因として何かありますか? ご返信いただけると幸いです。

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

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

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

初めまして。 SANGOを使っております。 埋め込みについて質問なのですが、 ここでも紹介されているインスタグラムやツイッターなどの埋め込みは問題なく表示されるのですが、 「ピンタレスト」の画像を埋め込もうとすると表示されません。 全く同じ方法でほかのテーマのブログで埋め込むと問題なく表示されます。 SANGO独自の埋め込み方法となるのでしょうか。 ピンタレストの埋め込みツールはこちらです。 ht…

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

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

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

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

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

回答を見る
hiroa 2018/03/11

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

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

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

こんにちわ。質問させてください。 ツイッターの埋め込みですが、何も修正していないのに、ある日突然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-deme…

回答を見る
Coco 2017/10/26

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

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

回答を見る

コメントを残す

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