【Wordpress】oEmbedとかいうブログカード標準作成機能がスマホ対応っぽくないのでその対策を

ワードプレス4.4から「oEmbed」というブログカード機能が実装されてたようですが、
スマホで見たらちょっとおかしな表示になっていたのでその対策記事です。

それは急に表示されるようになった

私、ブログ記事を書くときは、
少しずつ書きためておいた”下書き記事”をリライトして書くことが多いんです。

その記事中には参考となる記事urlもペタペタ貼り付けてあります。

これまでプレビュー時にはそれらのurlはそのまま”文字列”として表示されてました。

もちろん記事アップ時は削除する予定のものですよ。

ところが先日下書きしておいた記事をリライトしようとしてプレビューボタンをクリックしたら、url文字列が表示されるはずのところになんか見たことのないような表示が出ちゃいましてね。

こんな↓感じで。
（キャプチャ画像です）

あれれ、何これ？

すぐさま調べたら、
世間では「ブログカード」と呼ばれてる機能でした。

（知るのが遅すぎっていうツッコミはご遠慮くださいナ）

ちなみにこちらがブログカードを流行らせた（？）”はてなブログ”のブログカード表示例です。

雰囲気が似てますね。

ただしこのブログカードで表示されるのは
1行に同サイト内のurlのみが書かれている時のみです。

たとえばこんな感じですね。

外部サイトのurlだとブログカード化されません。

そのため自サイト内の別の記事へのリンクurlだけがブログカード化されていたんです。

参考記事としてメモっといた外部リンク記事は
そのまま文字列として表示されていました。

この機能（ブログカード）、だいぶ前から実装されていたみたいですね。

私、さっきまで知りませんでした（笑）。

もちろんたとえば普通にリンク形式<a href="（url）">（url）</a>で書けば
いつものリンクテキストで表示されます。

そして実際にこの記事の１個前の記事urlをそのまま裸で書いたものがこちら↓です。

（クリックすると記事に飛んじゃいます）

【WordPress】ASPのアフィリエイトリンクがPC用とスマホ用の2種類あった場合、投稿内に1個の広告リンクで表示させる方法

urlを書くだけでこんなブログカードが作れちゃうんですから便利になったもんです。

ただですね、このままだとスマホで見た時に全体が見れないんですよ。

スマホで見ると…

ワードプレスのブログカード機能は便利なんですが、
どうもレスポンシブ対応ではないみたいなんですよね。

こちら↓、左がPCでの表示で右がスマホでの表示例です。

スマホでは横幅の半分くらいしか表示されてませんでしょう。

もっともワードプレスインストール時についてるデフォルトテーマなら
レスポンシブ対応されてるのかもしれません。

でも普通は別のテーマに変えちゃう人がほとんどでしょうから、
そうなると新たにレスポンシブ対応の設定を加えてやらないとダメみたいです。

解決策

ソースを見てみました。

するとブログカードの該当HTMLのところに
「wp-embedded-content」というクラス名が割り振ってあります。

そこでこのクラスに「max-width: 100%;」を指定してやります。

これでスマホで見た時にも
きちんと横幅いっぱいで表示されるようになりました。

スマホでのブログカード表示がおかしいなと思った時はお試しください。