はてなブログの埋め込みリンクのカード幅を変更した

 はてなブログでは、記事内に挿入するリンクをカード風に置き換えることができます。

 この埋め込みリンク、デザインが良いのでなかなかに好きなんですけど、前々から少しだけ不満に思っていたことがあります。それは、カード幅が中途半端なことです。

 このブログは2カラムレイアウトで、記事の範囲は720pxで設定しています(デザインテーマのcssを少し弄りました)。はてなのブログカードはデフォルトの幅が500pxなので、中途半端な空間をつくってしまいます。


f:id:pliocene_coast:20171021204021p:plain


 この空間はいらないので、cssを設定して埋め込みリンクの幅を記事目いっぱいに広がるように上書きしてやります。自力ではできないので例のごとく他サイトを参考にします。


www.du-soleil.com


 ここの記事で紹介されているように、埋め込みリンクの内部フレームのクラスがembed-card embed-blogcardで指定されているので、単純に幅を変えれば良いとのこと。

 それで、cssに下記のコードを書き加えました。

.embed-card.embed-blogcard{
max-width: 100% !important;
}


 しかしこの方法では、はてなブログの外部サイトや過去記事の埋め込みリンクは設定が反映されても、はてなブログ以外の外部記事には反映されない。そこで試行錯誤してcssを下のように修正されると上手く表示することができました。

.embed-card{
max-width: 100% !important;
}


 上記のコードではembed-card内のembed-blogcardだけを指定していたので、ブログカードのみが範囲100%で表示されてしまうのに対し、後者は埋め込み記事全てを100%幅で表示しろという命令になります。

 後は埋め込み記事の幅を変えたいなあと思います。幅と同じようにcssでheight指定してもうまくいきませんでした。別のブログでは、高さを短くしてスクロールをつけていた例がありましたが、そこまではやりたくないなあと思う。

Copyright © 2017 pliocene All rights reserved.