コーポレートサイトにおすすめのWordPressテーマ!!詳細はこちら▶▶

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

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

oEmbed – WordPress Codex 日本語版

はてなブログの埋め込みブログカードもこの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埋め込みに対応しているサイト一覧
  • Facebook
  • Flickr
  • Hulu
  • Imgur
  • Instagram
  • Twitter
  • Tumblr
  • Spotify
  • Youtube
  • はてなブログ

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

デフォルトではデザインが崩れるのでCSSで調整

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

style.css

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

独自にカスタマイズ

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

URLを貼り付けるだけで埋め込まれるWordPress内部リンク(oEmbed)をカスタマイズする方法

表示が不安定?

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

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

不安定と言われているWordPressのコンテンツ埋め込み(oEmbed)についてのメモ

余談:はてなブログではペーストだけで埋め込みが出来なくなった?

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

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

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

参考リンク:

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