WordPressではてなブログなどのブログカード埋め込みを簡単に貼る方法

2019年6月5日

WordPressにはYoutubeなどのメディアやサイトコンテンツを埋め込む機能が標準であります。基本的にはどのテーマでも使えるはずです。（余程古いテーマでなければ）

はてなブログの埋め込みブログカードもこのoEmbed機能に対応したものです。はてなブログはoEmbedの規格を採用して、ブログ記事の埋め込み用コードを取得するAPIを公開しています。
はてなブログoEmbed API

oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています。
https://syncer.jp/oembed-api-matome

埋め込み方法

埋め込み方法はとても簡単。投稿エディターで記事内に埋め込みたいURLをペースト（貼り付け）するだけ。

↓こんな感じではてなブログやWordPressの記事をブログカードで表示することが出来ます。

とても便利な埋め込み機能ですが、現状どんなサイトのURLでも埋め込める訳ではありません。oEmbed APIに対応したサイト・サービスのみ使えます。

デフォルトでは限られたサイトからの URL のみに有効です。安全対策のため、WordPress は内部のホワイトリストに一致する URL のみを埋め込みます。
https://wpdocs.osdn.jp/oEmbed

埋め込めないサイトの場合は↓のように表示されます。デイリーポータルZはoEmbed APIに未対応のようです。

アメブロも試してみましたが、埋め込み出来ませんでした。でも埋め込めなくても普通のリンクに変換してくれるので便利ですね。

よく使われるoEmbed対応のサイト・サービスをまとめました。

oEmbed埋め込みに対応しているサイト一覧

抜粋でこれが全てではありません。

はてなブログのoEmbedの埋め込みはデフォルトでは少しデザインが崩れます。
以下のCSSをstyle.cssに追加して調整してみて下さい。

style.css


/* はてなブログ用ブログカードカスタマイズ */
.is-provider-hatena-blog iframe.wp-embedded-content{
  width:500px !important;
  height:200px !important;
}

このoEmbed埋め込みの表示は独自にカスタマイズすることも出来ます。

便利なoEmbed機能ですが、WordPressでは表示が不安定だと言う評判もあります。実際WordPressのブログカードは表示が崩れることが多く（はてなブログの埋め込みブログカードは崩れていないのですが）、私もこのブログでは外部リンクとしてはあまり使っていません。

またiframeをたくさん読み込むのは負荷がかかり、ページ速度が遅くなる可能性もありますので、あまり多用はしない方がいいです。

はてなブログの見たままモードでもURLを貼り付けるだけで「リンクを挿入」ウィンドウが自動的に出てきてたのですが、現在はツールバーの「リンクボタン」をクリックしないと出来なくなっています。

地味に便利な機能だったので残念ですね。
はてな記法モード、Markdownモードでは従来通りURLペーストだけでリンク挿入出来ます。

既にご存知の方も多いかもしれませんが、WordPressを始めたばかりの方は意外に知らない機能かもしれません。是非使ってみてください。

参考リンク：

この記事はTwitterでねこ仙人さんのブログ記事がきっかけで書いてみました。oEmbed検証の参考にさせていただき、ありがとうございました。

はてなブログに投稿しました #はてなブログ
はてなブックマークの記事をワードプレスに貼り付ける方法はないけど、似た方法がある – 年収200万で節約投資生活 in Tokyohttps://t.co/Zo6unckPKT
— ねこせんFANG+ (@nekosencat) June 4, 2019

よかったらシェアしてね！