今このブログで使っているaffingerには各ブロックパーツのCSSデザインがついてるけど、オリジナルテーマだと自らデザインをつけなくちゃいけない。
CSSデザイン自体は色々なサイトでサンプルが公開されていて、コピペもOKだったりするのでそちらを拝借。
https://kt-life.net/blockquote-design/
で、ちょっと苦戦したのが「埋め込みブロック」にもCSSデザインが適用されてしまったこと。
ググってみたところ、ドンピシャな解決策を発見。
Twitter に限らないのですが、blockquote に希望のCSSスタイルを直接指定すると SNS の埋め込み投稿とバッティングすることがあります。
例えばTwitterの場合は twitter-tweet というクラスが指定されているので、これを除外すれば各CSSの独立性が保てるという考え方。他のSNS埋め込みにも対応したいときは、それぞれカンマ区切りなどで対応して下さい。
http://www.02320.net/tech/blockquote-css-design/
指定したClassのタグは適用したCSSデザインを除外できるらしい。CSS内に下記コードをコピペすればOK。
【CSS】
<style>
blockquote:not([class=”twitter-tweet”]) {
// お好みの装飾
}
</style>
例えばWordPressの場合、同一サイト内のリンクを貼ると埋め込みブロックとしてサムネイル表示されるけど、これにはコピペしたCSSデザインを適用したくない場合は下記のようにする。
blockquote:not([class=”wp-embedded-content”]) {
}
「//お好みの装飾」のところに何も指定しなければOK。