[CSS]ブログに埋め込んだツイートのデザインをCSSで変更する方法

CSS

2014.04.062024.08.30

Twitter のツイートをブログに埋め込んで表示させる場合に、幅を100% に変更したり、デフォルトの引用デザインではなく自分のブログに合ったオリジナルデザインへと変更する方法のご紹介です。

Twitter 引用部分のデザインの構成を確認
CSS の記述例
Twitter をブログに引用してみる

Twitter 引用部分のデザインの構成を確認

ブログに埋め込んだツイート以下のような構成になっていますので、.twitter-tweetクラスのiframe タグに対して、スタイルを上書きしてしまえば良さそうです。

<iframe id="twitter-widget-2" scrolling="no" frameborder="0" 
allowtransparency="true" class="twitter-tweet twitter-tweet-rendered" 
title="Embedded Tweet" width="500" height="181" 
style="display: block; max-width: 99%; min-width: 220px; padding: 0px; 
border-top-left-radius: 5px; border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; 
margin: 10px 0px; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187); 
border-width: 1px; border-style: solid; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px; 
position: static; visibility: visible;"></iframe>

allowtransparency="true" class="twitter-tweet twitter-tweet-rendered"

title="Embedded Tweet" width="500" height="181"

style="display: block; max-width: 99%; min-width: 220px; padding: 0px;

border-top-left-radius: 5px; border-top-right-radius: 5px;

border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;

margin: 10px 0px; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187);

border-width: 1px; border-style: solid; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px;

position: static; visibility: visible;"></iframe>

CSS の記述例

.twitter-tweet 要素に対してCSS でデザイン変更を施してみます。

iframe.twitter-tweet	{
    width: 100% !important;
    border-radius:0 !important;
	box-shadow:none !important;
    border:1px solid #ccc !important;
    padding:10px;
    backgrounf:#fff
}

iframe.twitter-tweet {

width: 100% !important;

border-radius:0 !important;

box-shadow:none !important;

border:1px solid #ccc !important;

padding:10px;

backgrounf:#fff

}

多少無理矢理な感じはありますが…!importantで強制的にデザインを補正しました。

今回は幅を100% にして、ドロップシャドウと角丸をなくすというシンプルなデザインへと変更しようと思います。

Twitter をブログに引用してみる

試しに、当ブログのツイートを引用しています。
ブログやWordPress にツイートを埋め込んで表示する方法は、Twitter のツイートをブログに埋め込む方法の記事も合わせて参考にしてみてください。

Twitter のサイトから埋め込みコードを発行した後、プレビュー画面では↓このようなデザインになっていますが、