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

ブログ作成

ども!あき山です。

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

Amazonで買ったMP3ファイルが文字化けするときの対処法
最近、音楽はデジタル版で買うようにしています。一番よく使うのは、Amazonのデジタルミュージックですね。 Amazonのデジタルミュージックで買った音楽はクラウドで再生することも可能ですが、一応データ(MP3ファイル)としても手元にダウン…

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

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

今回は、ブログカードについて少し書いてみようと思います。

スポンサーリンク

初期設定から改善した点

当ブログの場合、すぐに改善したいことが2点ありました。

画面の左下に独自のアイコンを表示させる

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

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

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

スマホ表示でもブログカードが本文の枠内から出ないようにする

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

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

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

[WP]WordPress の埋め込みプレビュー表示の横幅を100%にする方法|WordPress|WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
WordPress4.4から、投稿などの本文にURLを貼付けるだけで、タイトル、抜粋、アイキャッチ画像を埋め込んだプレビュー表示が使えるようになりましたが、今回はこのプレビュー表示の横幅を、ブログのコンテンツ幅に合わせて100%表示にする方法を紹介させてい…

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

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

これはブログカードの枠を設定するiframeタグの幅を本文の幅(100%)で表示するというものです。

ただしこれを設定すると、自サイトのブログカードだけでなく、他サイトのブログカードも全て横幅が100%になります。

まぁでもスマホで見栄えが悪いまま放置するわけにもいかないので、私はこの方法をとらせてもらいました。

現在の私のブログでは、テーマによって適正に表示できるようになっているので、ここに書いたような問題は特に発生してないです。

YouTubeの埋め込み表示が本文の枠内から出ないようにする

ブログカードの場合は、「wp-embedded-content」でブログカードのiframeを捕捉できますが、YouTubeのiframeは捕捉できないようです。

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

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

iframe { max-width:100%; }

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

現在の私のブログでは、YouTubeのURLをそのまま貼り付けるだけで、枠内に表示させるようにしています。

まとめ

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

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

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

ではまた!

タイトルとURLをコピーしました