loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【Wordpress】oEmbedとかいうブログカード標準作成機能がスマホ対応っぽくないのでその対策を
この記事は約4分で読めます。

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

投稿日:2016.8.27

イメージ画像

 

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

SIRIUSレビューイメージ画像

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

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

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

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

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

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

こんな↓感じで。
(キャプチャ画像です)

キャプチャ画像

あれれ、何これ?

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

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

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

キャプチャ画像

雰囲気が似てますね。

「ブログカード」っていうのは、記事タイトルや概要やアイキャッチ画像などを読みやすいレイアウトで表示する埋め込み形式のことです。

ワードプレスを4.4以上(?)にバージョンアップすると自動でこのブログカード機能が搭載されるようです。

正確には「oEmbed」機能の実装だそうで、バージョンアップしたワードプレスの投稿記事内にurlをそのまま”裸”で書くだけでブログカードが表示されるって仕組みです。(なんて読むんだ?オーエンベッド?)

oEmbedというのは埋め込み用コードを取得するための統一規格だそうですね。

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

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

(テキスト)

http://webtrace-cuisine.com/xxx/

(テキスト)

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

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

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

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

私、さっきまで知りませんでした(笑)。

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

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

(クリックすると記事に飛んじゃいます)

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

場合によっては引用形式で表示されることもあります。

その場合はリロード(再読み込み)するとうまく表示されるようです。

まだまだ完璧な機能じゃないってことなんでしょうか。

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

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

 

スポンサーリンク

スマホで見ると…

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

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

キャプチャ画像

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

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

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

 

解決策

ソースを見てみました。

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

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

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

キャプチャ画像

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

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「IZM(TCD034)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ