WordPressのブログカードを調整してみた

記事の作成画面で直接URLを書くと、下のように表示される機能があります。
これは「ブログカード」「Embed」などと呼ばれる機能らしいですね。

昨年からdアニメストアやAmazonプライムビデオでアニメをよく見てますが、やっぱりアニメは一気に見る方が面白いと思うんですよね。 た...

こういう記事表示が存在するのは知っていました。はてなブログなどでよく見かけますね。はてなブログでは、URLを貼り付けようとすると自動的にカードを表示するかどうかの画面が開きますよね。

ただ、自分のブログ(レンタルサーバ+WordPress)でも簡単に使えるというのは知りませんでした。この機能はWordPressの最近のバージョンから初期設定で使えるようになったらしいですね。

スポンサーリンク
最高峰336×280

初期設定からどうしても改善したい点を2つ調整してみた

しかし、初期設定のままだと色々と不都合があります。
当ブログの場合、すぐに改善したいことが2点ありました。

1つ目:画面の左下にWordPressのアイコンが出てしまう

デフォルトのブログカードでは、左下のWordPressのアイコンが表示されてしまいます。
これを自分で用意したものに変えるにはどうしたらいいか。私はこのページで変更の仕方を知りました。

WordPress4.4 からは、他のブログ (oEmbed対応) の記事を埋め込み表示できるようになりました。もちろん WordPress4.4どうしでしたら 記事のURLを貼るだけで簡単に引用表示できます。という事で WordPress4.4のoEmbed機能を調べてみました。EmbedEmbedを使うのは簡単です...

このページの「サイトタイトル・サイトロゴ」という項目にやり方が載っています。手順は簡単で、WordPressのカスタマイズ画面からアイコンを設定するだけです。

2つ目:スマホ表示にするとブログカードが本文の枠内から右側に出てしまう

パソコン表示しているうちは気付かなかったんですが、スマホで表示してみると、ブログカードが右側にはみ出していることに気付きました。これを本文の枠内に収めるにはどうしたらいいか。

これは本格的にやり出すと相当難しい話のようで、PHPいじり回す必要が出てくるようです。私も色々調べましたが、PHPとWordPressに関する知識がないので、さっぱりわからない。

しかし、このページを見ると簡単な方法が書いてありました。

WordPress4.4から、投稿などの本文にURLを貼付けるだけで、タイトル、抜粋、アイキャッチ画像を埋め込…

手順としてはごくシンプルで私にもできました。style.cssの適当な場所に、以下のコードを入れるだけです。

iframe.wp-embedded-content {width:100%;}

これはブログカードの枠を設定するiframeタグの幅を本文の幅(100%)で表示するというものです。
ただしこれを設定すると、自サイトのブログカードだけでなく、他サイトのブログカードも全て横幅が100%になります。
まぁでもスマホで見栄えが悪いまま放置するわけにもいかないので、私はこの方法をとらせてもらいました。

おわりに

WordPressの根本的な動作を理解しておらず、しかもPHPとCSSの文法も分かってない私のような初心者にとっては、なかなか厳しかったです。

特に、上で書いた2つ目の調整は、検索エンジンで調べるともっと本格的な調整をするサイトがヒットするんですよね。最初はそういうのを読んで、サイトのファイル構成を見ながら色々調整しようとしてたんですが、さすがに挫折してしまいました。

まぁでも気になる点を2つとも解決できたのでよしとしましょう。

2017/02/19追記

上記のブログカード以外にも、YouTubeの埋め込み表示も同様の問題を抱えていることに気付きました。

ブログカードの場合は、「wp-embedded-content」でブログカードのiframeを捕捉できますが、YouTubeのiframeは捕捉できないようです。初心者の私が調べたところ、ページを読み込み前にYouTubeのような埋め込みがあると、その部分のタグを書き換えて、それに対してスタイルシートを適用するというのが一般的なようですが、ページの読み込みが遅くなりそうというのと、何やら難しそうというので諦めました。

そこで、もういっそのことiframeタグ全てを横幅100%にしてしまったらいいのでは?ということで、style.cssで上記の設定をいったん破棄して、以下のような設定を新たに加えました。

iframe { max-width:100%; }

これで全てのブログカードやYouTubeなどの全てのiframeにおいて横幅が100%になりました。
とりあえず当面はこれで行きたいと思います。