スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

シンプルなTwitterのCSSレイアウトを考えてみる。

こんにちは。

皆さんお元気ですか?


今日は私の愛用してるTwitterの
ブログパーツ(ウィジット)を装飾してみました。

現在のサイトだとカウンターの上辺りにいますね。

これはHTML埋め込みコードをTwitterで入手できるんですが、

本当にシンプルな物で…。(ブログなどのCSSの影響も受けますが。)

今回はそのCSSを紹介します。

まず最初にバックアップを取っておきます。

そして必ず成功するわけではないと言う事を肝に銘じますw


HTMLソースはTwitterにログインして設定を選び、

"(あなたのWEBサイトにもTwitterを表示させよう)"を選び

Otherを選択すれば表示されます。

プラグインでもどこでもいいので、ソースを貼り付けておきます。


下にはインラインフレームを使っています。

フレーム対応ブラウザを。

Firefoxユーザーの方でNoScriptを使ってらっしゃる方は

設定を許可にしてください。

実際はブログなどではサイドバーでの使用が多いと思ったので

サイズは自動可変のままです。

大きめの場合はこんな感じで。




小さい場合はこんな感じ。




極端に小さすぎなければ問題は無いと思います。

他のCSSの影響をかなり受けるので
必ずこうなるとは限りません。


ではソースです。

まず読み込む画像ファイルをアップロードします。

twitter_logo_list_img.gif - twitter_logo_list_img.gif

右クリック保存でお持ち帰りください。

各自でアップロードお願いします。

(画像はTwitterのhomeのロゴを改変しました。)


さて、CSSの記述です。

FC2の場合は使ってるテンプレートに追加すればすぐですし、

知識のある方は直接プラグインなどに記述しても大丈夫です。

今回はCSSに直接記述すると考えてソースを書いておきます。


#twitter_div {
margin : 0;
padding : 0;
border : 1px solid #cccccc;
background-color : #ffffff;
text-align : left;
color : #666666;
font-size : 11px;
}

#twitter_div h2 {
margin : 10px 0 10px 0px;
text-align : center;
padding-left : 10px;
color : #33ccff;
font-size : 12px;
}

#twitter_div li {
margin-left : 0px;
padding-top : 5px;
padding-left : 5px;
padding-bottom : 5px;
border-left : 2px solid #33ccff;
border-bottom : 1px dashed #cccccc;
list-style-image : url("http://アップロードした画像のファイルパス/twitter_logo_list_img.gif");
}

#twitter_div a:link {
color : #088253;
}

#twitter_div a:active {
color : #088253;
}

#twitter_div a:visited {
color : #088253;
}

#twitter_div a:hover {
color : #28a273;
}

#twitter_update_list {
margin-left: 19px;
padding-left : 0px;
padding-top : 2px;
border-top : 1px dashed #cccccc;
}

※ IE6向けに修正。

ちょっと長いですね、しっかり記述しないと他の干渉が大きいので…^^;

IE6、Firefox3.5.1でほぼ同等の表示が確認できました。
(CSS2、XHTML1.0 Strictでパス。)

フォント等は指定していないのでテンプレートのデザインを継承します。

"アップロードした画像のファイルパス"は各自書き換えてください。

そしてテンプレートのCSSに書き加えます。

あとは実際に確認してみてください、多分大丈夫…なはずです。

サイトによっては

#twitter_update_list にある margin-left: 19px; はサイトによって要調整。

ここからさらにカスタマイズもなんでも自由にどうぞ。

作者の私は権利とか一切主張しません。
(厳密には日本の法律だと権利は捨てられないとかなんとか。)

ただ、込み入ったサポートもしませんし、
バグったぜこの野郎!と言われても困りますw

こういうときの為のバックアップなんですw


最後になんでFlashじゃなくてHTMLを使ったのか。

なぜか真っ黒になって表示されてなかったからです。

それにiPhoneからでも読めるじゃんっ!w


では今日はこの辺で。

アデュ!

さらばだ^^
TAG :
Twitter
CSS

コメントの投稿

Private :

NO TITLE

シンプルで(・∀・)イイ!!ですね。
HTMLだから軽くてちょうど良いです。

ありがたく使わせてもらいますm(_ _)m

Re:

wobiwanさん
いえいえ、どういたしまして!
上手く導入できたようで安心ですw
自分はこういうことしか出来ないので、
喜んでいただけて本当に嬉しいですw

遣わさせていただきます

はじめまして。
確かに、Flashだと重いし表示が遅いですorz
HTMLは使ってなかったので、feelmysoulさんのTwitterHTMLを遣わさせていただきます!!
(変な文章でサーセン)

Re:

>黒龍騎士αβさん
レスが遅くなってしまいました。
どうぞ、ご自由に使ってやってください。
サイトによって他のスタイルを受け継いじゃっておかしくなるかもしれません。
Flashの表示の遅さは結構大きいですね、Twitter自体がレスポンス悪いとFlashはいつまでたっても描画が出来ないみたいです。
HTMLの方がそういう意味ではいいかな~と思いますね!

使わせていただいてます

丁寧に説明していただき、設定することができました。
しかし、twitter.comの日本語ページからは「あなたのブログにつぶやきを表示させましょう」がなくなってました。
リンクも見つけられずにちょっと苦労してしまいました(汗)

HTML+CSSなのでカスタマイズも自在だし、いい感じです。
ありがとうございました!

Re:

>上泉さん
わざわざコメント頂き、ありがとうございます。
そういっていただけると足りないながらも嬉しく思います!
今気づいたんですが、白背景でのサイトしかチェックしてませんでした…(^_^;
背景色が白以外で綺麗に見えるレイアウトも後日考えて見ます。
ココログでも今回のカスタマイズが可能というのも私には発見でした。
本当にありがとうございました!

使わせて頂きました。

はじめまして。Twitterブログパーツのカスタマイズを
検索していて辿り着きました。
自分のblogに表示するためだけにTwitterを始めたのですが、
TwitterのHTMLを持ってきてはみたものの、不勉強でCSSがわからず、
無粋な設置しかできずにいましたので、大変助かりました。
ありがとうございました。
blogイメージに合わせて、色などカスタムさせて頂きました。

ちなみに、「さくらのブログ(SeeSaa)」に設置しています。

Re:

>胡桃さん
初めまして、コメント頂き有難うございます!
このCSSレイアウトは私が趣味でササッと作った物なんですが、
意外に好評を頂いてるようでちょっとびっくりしています。
必要最低限の水準のレイアウトに留めてあるので、ご自由にカスタマイズしてもらっても構わないですよ~。
Seesaaさんの方でもこの方法の応用で利用が可能なのですね~。
ありがとうございます、私も一つ勉強になりました。
インフォメーション
- 新着 -

- カテゴリー -

- アーカイブ -

- RSSフィード -

- サイト内検索 -

当サイトはLink Freeなので、Linkは どちらでもどなたでも自由にどうぞ。 feel my soul
Utility
Xbox360/PS3 GamerTag

ALMEIDA216


Twitter

Counter

ユニークアクセス :
オンライン :
PVアクセス :
リンク
このページのトップへ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。