スポンサード

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

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>

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
}

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

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

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

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

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


上記CSS の記述を行うと↓このような見え方に変わります。

[CSS]無料で使えるWEBフォント「Google Web Fonts」の使い方 http://t.co/CM59Mtfdn4

— WEBアンテナ (@webantena) 2013, 11月 10

スポンサード