ただひたすらに。

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

2017.02.11

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

アニメはできれば一気に見たい

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

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

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

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

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

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

WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」

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

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

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

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

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

[WP]WordPress の埋め込みプレビュー表示の横幅を100%にする方法

手順としてはごくシンプルで私にもできました。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%になりました。
とりあえず当面はこれで行きたいと思います。


スポンサーリンク

関連記事

カテゴリー

アーカイブ

外部リンク

アニメ好きなら、何はともあれ「dアニメストア」

Amazon独占配信のアニメはこちらでチェック

楽器好きなら、購入前に「サウンドハウス」もチェック

サウンドハウス

ブログ村にも登録しています。

にほんブログ村 アニメブログ アニメ感想へにほんブログ村 音楽ブログ アコギへにほんブログ村 ライフスタイルブログ のんびり暮らしへ

スポンサーリンク