人気ブログランキング | 話題のタグを見る
Top

usa*log 晴れ。ときどき、うさぎ王国

twitterのウィジェット(旧タイプ)のh3

サイトにちっちゃい窓でtweetを埋め込むアレの話です。

まず最初にお断りしておきますが、すでにもっと新しいウィジェット「埋め込みタイムライン」が提供されています。
twitter→アカウント→プロフィールを編集→ウィジェットで簡単にタグが作成されます。
が。なんで使わないのかと言うとカラーの自由度が少なくてさびしい。。(白と黒しかないw)


先日、お客様のサイトに埋め込みを頼まれて、旧タイプをサイドバーに設置していました。背景色などを変更できるので、サイトに自然に溶け込む感じにできます。

その時の「へ?」ってなった話。
うちのサイトで再現してみます。(タグの話になっちゃうからつまんないかも...自分用に覚え書きです)

twitterのウィジェット(旧タイプ)のh3_a0026762_11531858.jpg
むむっ?名前の背後のヘンな模様はなにっ!
しかもミョ〜な間があいている。
不審に思ってソースを開いてみると、
twitterのウィジェット(旧タイプ)のh3_a0026762_11542077.jpg

名前の前後が h3 タグで囲まれています。

twitterのウィジェット(旧タイプ)のh3_a0026762_1155537.jpg
サイト内ではすでに h3 タグを使用中。cssは後から指定したもの優先なので、 head 内で指定した背景画像まで、ウィジェットのcssが引っ張ってきちゃったもよう。

h3 {
font-size: 110%;
color: #7E4049;
font-weight: normal;
line-height: 260%;
padding-left: 100px;
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}

文字指定、背景画像指定、さらに写真の回り込みまで解除してるせいで間が空いてしまいます。文字はウィジェットの指定になっているようです。

リンクしているcssをいじってしまうと、他のhtmlファイルまで変更しなくてはなりません。仕方ないのでトップページのみ、 h3 にclass usagi を指定することにします。

h3 {
font-size: 110%;
color: #7E4049;
background-image: none;
line-height: 260%;
padding-left: 100px;
font-weight: normal;
clear: none;
}
一度、背景画像をナシにして回り込み解除もナシ。

.usagi {
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}
あらためて、classで指定し直し。

これで
twitterのウィジェット(旧タイプ)のh3_a0026762_12185253.jpg

きれいになりました!


早く「埋め込みタイムライン」のカスタマイズができるようになるといいですね。


ということを書いていたら、タグに使う< >を使用するとそのままタグとして認識されてしまい、h3という文字を表示したいのに、以後の文章がブログが指定しているh3の太字で表示されてしまってわけわかんないことに。。。(^^;
by usa-log | 2012-11-15 12:25 | デザインやなんかのこと
<< クリスマスうさオク。 イヌクリップ。 >>