ども！あき山です。
記事の作成画面で直接URLを書くと、下のように表示される機能があります。
これは「ブログカード」「Embed」などと呼ばれる機能らしいですね。
こういう記事表示が存在するのは知っていました。はてなブログなどでよく見かけますね。はてなブログでは、URLを貼り付けようとすると自動的にカードを表示するかどうかの画面が開きますよね。
ただ、自分のブログ（レンタルサーバ＋WordPress）でも簡単に使えるというのは知りませんでした。この機能はWordPressの最近のバージョンから初期設定で使えるようになったらしいですね。
今回は、ブログカードについて少し書いてみようと思います。
初期設定から改善した点
当ブログの場合、すぐに改善したいことが２点ありました。
画面の左下に独自のアイコンを表示させる
デフォルトのブログカードでは、左下のWordPressのアイコンが表示されてしまいます。
これを自分で用意したものに変えるにはどうしたらいいか。私はこのページで変更の仕方を知りました。
このページの「サイトタイトル・サイトロゴ」という項目にやり方が載っています。手順は簡単で、WordPressのカスタマイズ画面からアイコンを設定するだけです。
スマホ表示でもブログカードが本文の枠内から出ないようにする
パソコン表示しているうちは気付かなかったんですが、スマホで表示してみると、ブログカードが右側にはみ出していることに気付きました。これを本文の枠内に収めるにはどうしたらいいか。
これは本格的にやり出すと相当難しい話のようで、PHPいじり回す必要が出てくるようです。私も色々調べましたが、PHPとWordPressに関する知識がないので、さっぱりわからない。
しかし、このページを見ると簡単な方法が書いてありました。
手順としてはごくシンプルで私にもできました。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%になりました。
とりあえず当面はこれで行きたいと思います。
まとめ
WordPressの根本的な動作を理解しておらず、しかもPHPとCSSの文法も分かってない私のような初心者にとっては、なかなか厳しかったです。
特に、上で書いた２つ目の調整は、検索エンジンで調べるともっと本格的な調整をするサイトがヒットするんですよね。最初はそういうのを読んで、サイトのファイル構成を見ながら色々調整しようとしてたんですが、さすがに挫折してしまいました。
まぁでも気になる点を２つとも解決できたのでよしとしましょう。
ではまた！