ブログ運営

blockquote(引用)タグにCSSデザインをつける方法と埋め込みブロックへの適用をキャンセルする方法

スポンサーリンク

今このブログで使っているaffingerには各ブロックパーツのCSSデザインがついてるけど、オリジナルテーマだと自らデザインをつけなくちゃいけない。

テーマによってはブロックにデザインがついている

CSSデザイン自体は色々なサイトでサンプルが公開されていて、コピペもOKだったりするのでそちらを拝借。

で、ちょっと苦戦したのが「埋め込みブロック」にも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。

  • この記事を書いた人
pieceke

pieceke

東京都荒川区在住 / 41歳男 / IoTデバイスメーカーのフリーランス役員 / 家族構成:妻、長女、長男の4人暮らし / 好きなもの:よく晴れた日に昼間から飲むビールとおつまみ作り、家族や友人が楽しそうにしている様子を写真に撮ること(SONY α7ⅲ)、子どもたちと一緒に時間を過ごすこと。

-ブログ運営
-