インスタやtiktokをサイトに埋め込むと、デザインが崩れる時の回避方法

2020年5月11日

インスタグラムや、tiktok(ティックトック)の投稿をサイトに埋め込みたい時、それぞれのSNSの埋込コードに引用タグ「blockquote」が使われているので、

自分のサイトの引用タグのCSS(スタイルシート)で設定しているデザインと干渉してしまい、デザインが崩れることがあります。最初は、まぁ見れないこともないからいいか...と思っていましたが、

インスタやtiktokをサイトに埋め込むと、デザインが崩れる時の回避方法

デザインが干渉するせいか、インスタグラムやtiktok(ティックトック)の読み込みに時間がかかり、ページ表示速度に影響して重たくなることも。

これはまずいということで、デザイン崩れを回避する方法を調べました。

埋込みコードでデザイン崩れが起きる状態

サイトのCSSに、tiktokの埋込コードにある引用タグ「blockquote」が干渉してしまった状態が以下。

インスタやtiktokをサイト埋め込みでデザイン崩れする時のCSS修正方法

埋込のまわりに、サイトの引用枠が付いてしまいます。これを解決する方法をいろいろ探してみましたが、一番てっとり早いのが以下の方法でした。

自サイトの引用タグに、クラス名を割り当てる

SNSの埋込がデザイン崩れを起こしてしまうのを回避するには、自分のサイトのblockquoteのCSSに、クラス名を割り当てればOK。そうすれば、各SNSなどの埋込コードに使われているblockquoteと干渉することなく両方のデザインを維持できます。設定方法は以下。

▼CSSのこの部分に、
blockquote { もともとの指定内容 }

▼赤字の部分(クラス名は任意)を追加する。
blockquote.mycite { もともとの指定内容 }

▼使用時のHTML記述
<blockquote class="mycite">●●●</blockquote>


すると、以下のような表示になり、デザイン崩れが治ります。

@dj_yogig1022

ごま団子熱い##tiktokに春が来た ##おうちで過ごし隊

棺桶ーロナウド - ロナウド

過去記事の引用タグにも、クラス名を追加をお忘れなく

この方法を使うと、自分のサイトの過去記事に引用タグを使っていたページに、すべて

class="mycite"
 を追加しなくてはならないですが、

各SNSの仕様が変わるたびに対応しなければならない...という手間を省くことが出来るので、結果的にこの対応方法が一番良いのではないかなと思います。

Prev > パンくずリスト問題の警告 data-vocabulary.org schema deprecatedの対処法

Next >

関連記事

ページの先頭へ戻る

>