dakkie blog へのコメント

ぴのより Twitter ウィジェットをカスタマイズする。へのコメント

ぴの — Thu, 02 Feb 2012 04:46:14 +0000

はじめまして。

当サイトの左カラムにあるTwitterのウィジェットが気に入り、
こちらの記事から真似してみようと試みたのですが、
なかなかうまく行かないので質問させて下さい。

私のサイトはホームページではなくブログ(fc2)なのですが
これをどのように応用すればカスタマイズできるようになるかご存知ですか？

ブログなのでプラグインを用いることになるのですが、
フォントが変わってくれないことと、下の時間やリツイートなどを
表示しているところに枠がついてしまうなどうまくいきません。

お手数をおかけしますがもしご存知でしたら教えて下さい。

宜しくお願いします。

dakkie より Twitter ウィジェットをカスタマイズする。へのコメント

dakkie — Sat, 28 Jan 2012 05:50:39 +0000

ひろぽんさん

初めまして、dakkie.comのdakkieです。コメントありがとうございます。

CSSは上から順に記述したフォントサイズや色などを読み込んでいくので、同じid名やclass名に対して最初に記述した場所より下に記述してあれば、下に記述したほうが優先されて上書きされます。
なので、Twitterウィジェット独自のCSSを上書きするために、HTML本文の記述が終わるタグの直前に下記のようにCSSを読み込ませています。このページのソースを見てもらえるとわかるかと思います。

common.cssは下記のような記述になっています。

/* ————————————————–
Twitter
————————————————– */
.twtr-widget {
font-family: “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3″, “Meiryo”, “メイリオ”, Verdana, Helvetica, sans-serif !important;
font-size: 93% !important;
-webkit-text-size-adjust: none; /* for iPhone */
line-height: 1.7 !important;
word-break: break-all;
}

.twtr-widget .twtr-tweet-wrap {
padding: 6px 0;
}

.twtr-widget .twtr-tweet {
border-bottom: 1px solid #cccccc;
}

.twtr-widget h3, .twtr-widget h4, .twtr-widget p {
line-height: 1.7 !important;
}

.twtr-hd, .twtr-ft {
display: none;
}

.twtr-doc a:hover {
text-decoration: none !important;
}

ひろぽんより Twitter ウィジェットをカスタマイズする。へのコメント

ひろぽん — Fri, 27 Jan 2012 03:45:14 +0000

css初心者です。グーグル先生に教わりながら
こちらのページを参考にさせてもらってます。

1つ調べてもわからなかったので、教えて下さい。
カスタマイズに挑戦しているところなのですが、
サンプルコードをタグの直前に入れると
ありますがどのように入れたら良いですか？

WordPressにプラグインなしでtwitterウィジェットを表示する | Ateitei.exe より Twitter ウィジェットをカスタマイズする。へのコメント

WordPressにプラグインなしでtwitterウィジェットを表示する | Ateitei.exe — Thu, 26 Jan 2012 05:03:35 +0000

[...] Twitter ウィジェットをカスタマイズする。 – dakkie [...]

dakkie blog へのコメント

ぴの より Twitter ウィジェットをカスタマイズする。 へのコメント

dakkie より Twitter ウィジェットをカスタマイズする。 へのコメント

ひろぽん より Twitter ウィジェットをカスタマイズする。 へのコメント

WordPressにプラグインなしでtwitterウィジェットを表示する | Ateitei.exe より Twitter ウィジェットをカスタマイズする。 へのコメント

ぴのより Twitter ウィジェットをカスタマイズする。へのコメント

dakkie より Twitter ウィジェットをカスタマイズする。へのコメント

ひろぽんより Twitter ウィジェットをカスタマイズする。へのコメント

WordPressにプラグインなしでtwitterウィジェットを表示する | Ateitei.exe より Twitter ウィジェットをカスタマイズする。へのコメント