三男パパのHP更新奮闘記

スポンサーサイト

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

Twitterプロフィールウィジェットのカスタマイズ

エントリイメージ438

ブログエントリのトップイメージを如何にすべきなのか、いろいろと試行錯誤している三男パパ(@knob_papa)です。
とりあえず今回は、エントリの題材に合わせて、実際にカスタマイズしたウィジェットを設置したホームページをキャプチャしてみました。

さてさて、なかなか便利なTwitterプロフィールウィジェットですが、サイトデザイン・ブログデザインによっては、そのままではしっくりこないことも多々あることでしょう。
そこで今回はTwitterプロフィールウィジェットのカスタマイズ方法に関して、詳細に解説していきたいと思います。

Twitterウィジェットのダウンロード

まずは公式サイトからプロフィールウィジェットをダウンロードしましょう。
下記リンクから、「自分のサイト」→「プロフィールウィジェット」の順にクリック。
あとは好きなようにカスタマイズ!(どうせあとから自由にいじれますw)

色と幅のみ調整したウィジェット

右は、設置するサイトのメインカラーと設置場所に合わせて、色と横幅のみ調整したウィジェットです。まあ、ほぼデフォルト状態ってことですね。

まあ、この時点で自分のサイトイメージにしっくりくるなら、何の問題もありません。さっさとコードを貼り付けて終了です。
…… と上手くいけばよかったのですが、今回は個人的にどうしても納得のいかない点がいくつかあり、カスタマイズしてみました。

不満点(あくまで個人の感想ですw)
  • とにかく目立ちすぎwww たぶんページ内でいちばん目立つ。これが最大の問題点。
  • 外枠はまだしも、内枠の角丸がめっちゃダサい。ここを丸くするセンスを疑う。
  • サイト全体のフォントはメイリオ+Verdanaなのに、ウィジェットはMS Pゴシック+Tahomaになっている。
  • 全ツイートの冒頭に表示される自分のプロフィール名が不要。くどい。
  • 最下部(投稿日時・reply・retweet・favoriteが表示される部分)って右寄せの方が良くね?

ということで、これらの大問題を解決すべく、カスタマイズしていきますよ。

コードを貼り付ける

公式サイトで手に入れたコードを、HTMLのウィジェットを表示したい部分(ブログならサイドプラグイン)に貼り付けます。このとき、あとでCSSをいじるときに便利なので、コード全体を<div>で囲んで、任意のid名をつけておきます。私はまんま"twitter_widget"というid名にしましたw

なお、後述するCSSは外部CSSファイルとして保存してサーバーにアップします。そのリンクをコードの直後(下記CSSの31行目)に記述します。
<div id="twitter_widget"> <!-- id名を指定 -->
<p><a href="https://twitter.com/mains_info" target="_blank">@mains_info on Twitter</a></p>
	<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
	<script>
	new TWTR.Widget({
		version: 2,
		type: 'profile',
		rpp: 1, // ウィジェットに表示するツイート数
		interval: 30000,
		width: 276, // ウィジェットの横幅
		height: 100, // ウィジェットの高さ(自動調整される/minimum heightか!?)
		theme: {
			shell: { // ヘッダ・フッタ・外枠の背景色・文字色/transparent=透明
				background: 'transparent',
				color: '#ffffff'
			},
			tweets: { // ツイート表示部分の背景色・文字色/transparent=透明
				background: 'transparent',
				color: '#333333',
				links: '#999999'
			}
		},
		features: {
			scrollbar: false,
			loop: false,
			live: false,
			behavior: 'all'
		}
	}).render().setUser('mains_info').start();
	</script>
	<link rel="stylesheet" type="text/css" href="twitter_widget.css">
</div>
上記の横幅・高さ・背景色・文字色は最終的に完成したウィジェットのものです。自分のサイト・ブログに合わせて変更してください。
また、2行目の<p>タグは、ヘッダ・フッタを非表示にしたあとに、新たにプロフィール名を表示するために付け加えたものです。

<h3><h4>タグのCSSをリセット

きっと最初にはまるのがこれです。
最後に示したTwitterウィジェットのHTML構造をご覧になっていただければお分かりになるかと思いますが、実はヘッダ部分のプロフィール名(mains_info)の表示に<h4>タグが、ユーザー名(マインズ)の表示に<h3>タグが使われています。

もしサイトやブログのCSSで<h3>や<h4>タグのスタイルが定義されている場合、この部分にも反映されてしまいますので、これをリセットしてあげるCSSを記述しなければなりません。
HTMLやCSSに詳しくない場合、この点に気付かずにはまる可能性があります。私も初心者の頃どつぼにはまりましたw で、結局ウィジェットの設置をあきらめた苦い思い出がありますw

CSSのリセットは、サイトやブログによって異なりますので自力で解決するのがベストだとは思いますが、一応例をあげておきます。ここでさっそく、先ほど設定した<div>のid名が役立ちます。

なお、CSSは必ず外部CSSファイルに記述して、任意の名前をつけて保存しておきましょう。
#twitter_widget h3, #twitter_widget h4 {
	border: none;
	background-image: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-size: 100%;
	font: inherit;
}
ここで確認のために外部CSSファイルをサーバーにアップし、先ほどのHTMLにリンクを記述します。もちろん "twitter_widget.css" の部分は自分のCSSファイルのURLに変更してください。

CSSでウィジェットをカスタマイズ

最終的には右の形に持っていきます。

まずはウィジェットを囲んでいる<div>タグのCSSから。
前述のscriptコードを見れば分かるとおり、ウィジェット自体の色は背景色透過(transparent)にしてありますので、この<div>タグの枠線・背景色がそのまま反映されるようになっています。
/*----- widget外部ボックス(の部分) -----*/
#twitter_widget {
	border: 2px solid #ddd;
	background-color: #f9f9f9;
	margin: 10px 0;
}
#twitter_widget > p { /*"@mains_info on Twitter"表示部分の修飾*/
	font-weight: bold;
	text-align: center;
	background-color: #ddd;
	padding: 0;
	margin: .5em .5em .2em .5em;
}
#twitter_widget > p a:link, #twitter_widget > p a:visited, #twitter_widget > p a:active {  /*"@mains_info on Twitter"表示部分のリンク色*/
	color: #333 !important;
}
#twitter_widget > p a:hover { /*"@mains_info on Twitter"部分のhover色*/
	color: #e00 !important;
}

次にウィジェット本体のカスタマイズです。まずは、センスのない角丸を無効にし、ヘッダとフッタを非表示にします。
/*----- widget内部カスタマイズ -----*/
.twtr-doc { /*外枠角丸を解除*/
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0
}
.twtr-timeline { /*内枠角丸を解除*/
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.twtr-hd {
	display: none; /*ヘッダーを非表示に*/
}
.twtr-ft{
	display: none; /*フッターを非表示に*/
}

次に、ツイートを複数表示する場合のツイート間の区切り線のCSSを変更します。結局私は、ツイートを1つしか表示しないようにしましたので、最終的にはこのCSSは使いませんでした。
なお、デフォルトCSSに優先させるために、"!important"をつける必要のあるプロパティもあります。デフォルトCSS(エントリ最下部に記載)と比べながら作業していくことになりますが、面倒な場合は、全部つけちゃうのが手っ取り早いですw
.twtr-tweet{
	border-bottom: 2px solid #ddd !important; /*ツイート間の区切り線*/
	border-top: none !important; /*border-topは消去*/
}
#tweet-id-1 {
	border-bottom: none !important; /*最下段ツイートの区切り線消去*/
}

最後に、フォントの変更、ツイート冒頭のプロフィール名の消去、hover色変更、最下部(投稿日時・reply・retweet・favoriteが表示される部分)のカスタマイズです。
.twtr-tweet-text, .twtr-hd, .twtr-ft { /*フォント変更*/
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Verdana,'メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
}
a.twtr-user {
	display: none !important; /*プロフィール名を消去*/
}
#twitter_widget a:hover {
	color: #ee0000 !important; /*hoverフォント色*/
	text-decoration: none !important; /*下線を消去*/
	border: none !important;
}
em { /*最下部のカスタマイズ*/
	text-align: right !important;
	padding-top: .3em !important;
	padding-right: .2em !important;
	margin-top: .8em !important;
	border-top: 1px dotted #ddd;
}
これで完成です!
もちろん最後に外部CSSファイルをサーバーにアップロードするのを忘れないでください。

まとめ

今回のまとめです。
  • ホームページにTwitterプロフィールウィジェットを設置する場合、ツイート数は1つにした方が、告知板のように使えてすっきりする気がする。
  • <h3><h4>タグのCSSリセットに気づいた自分に、成長を感じたw
  • Chromeのデベロッパーツール(F12キー)はかなり便利

おまけ - TwitterプロフィールウィジェットのHTML構造とデフォルトCSS

自分の好きなようにカスタマイズする場合、HTML構造とデフォルトCSSがわかっていると非常に楽ですので、参考までに以下に示しておきます。カスタマイズ好きな人にとっては、これがあるとないとでは大違いですよね。

HTMLは、Chromeの場合、ウィジェットを貼り付けたサイトでデベロッパーツールを起動して(F12キー押下)HTML階層を降りていけば見つかります。なお、下記のHTMLはこちらのツイートを1つのみウィジェットに表示している場合の構造です。

CSSはこちらのものをProCCSorで整形しました。

それにしてもHTML構造の深いことといったら!w
<div class="twtr-widget twtr-widget-profile" id="twtr-widget-1">
    <div class="twtr-doc" style="width: 276px;">
        <div class="twtr-hd">
            <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info" class="twtr-profile-img-anchor">
            <img alt="profile" class="twtr-profile-img" src="http://a0.twimg.com/profile_images/1041776946/mains_logo_02_normal.png">
            </a>
            <h3>マインズ</h3>
            <h4>
                <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info">mains_info</a>
            </h4>
        </div>
        <div class="twtr-bd">
            <div class="twtr-timeline" style="height: auto;">
                <div class="twtr-tweets">
                    <div class="twtr-reference-tweet"></div>
                    <div id="tweet-id-1" class="twtr-tweet">
                        <div class="twtr-tweet-wrap">
                            <div class="twtr-avatar">
                                <div class="twtr-img">
                                    <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info">
                                    <img alt="mains_info profile" src="http://a0.twimg.com/profile_images/1041776946/mains_logo_02_normal.png">
                                    </a>
                                </div>
                            </div>
                            <div class="twtr-tweet-text">
                                <p>
                                    <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info" class="twtr-user">mains_info</a>マインズスタディルーム(<a href="http://t.co/Vcs3uupf" target="_blank" urlentities="[object Object]" rel="nofollow">goo.gl/Zuy0P</a>)では、来週月曜日(23日)から始まる夏期講習受講生を募集しています。当日申し込みも受け付けておりますので、ご遠慮なくお問い合わせください。
                                    <a href="http://twitter.com/search?q=%23塾" title="#塾" class="tweet-url hashtag" target="_blank">#塾</a>
                                    <a href="http://twitter.com/search?q=%23個別指導" title="#個別指導" class="tweet-url hashtag" target="_blank">#個別指導</a>
                                    <a href="http://twitter.com/search?q=%23越谷" title="#越谷" class="tweet-url hashtag" target="_blank">#越谷</a>
                                    <a href="http://twitter.com/search?q=%23草加" title="#草加" class="tweet-url hashtag" target="_blank">#草加</a>
                                    <a href="http://twitter.com/search?q=%23東川口" title="#東川口" class="tweet-url hashtag" target="_blank">#東川口</a>
                                    <a href="http://twitter.com/search?q=%23せんげん台" title="#せんげん台" class="tweet-url hashtag" target="_blank">#せんげん台</a>
                                        <em>
                                            <a target="_blank" class="twtr-timestamp" time="Sat Jul 21 12:51:14 +0000 2012" href="https://twitter.com/mains_info/status/226660606961414144">yesterday</a>&#183;
                                            <a target="_blank" class="twtr-reply" href="https://twitter.com/intent/tweet?in_reply_to=226660606961414144">reply</a>&#183;
                                            <a target="_blank" class="twtr-rt" href="https://twitter.com/intent/retweet?tweet_id=226660606961414144">retweet</a>&#183;
                                            <a target="_blank" class="twtr-fav" href="https://twitter.com/intent/favorite?tweet_id=226660606961414144">favorite</a>
                                        </em>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- tweets show here -->
                </div>
            </div>
        </div>
        <div class="twtr-ft">
            <div>
                <a target="_blank" href="https://twitter.com"><img alt="" src="http://widgets.twimg.com/i/widget-bird.png"></a>
                <span>
                    <a target="_blank" class="twtr-join-conv" style="color:#ffffff" href="https://twitter.com/mains_info">Join the conversation</a>
                </span>
            </div>
        </div>
    </div>
</div>
.twtr-widget {
    position: relative;
    font-size: 12px!important;
    font-family: "lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;
    zoom: 1;
}
.twtr-fullscreen { font-size: 220%!important }
.twtr-fullscreen .twtr-new-results { _display: none!important }
.twtr-inactive { display: none }
.twtr-widget a img { border: 0!important }
.twtr-doc {
    overflow: hidden;
    width: 100%;
    text-align: left;
    font-weight: normal;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.twtr-bd { padding: 0 1px }
.twtr-widget .twtr-tweet-wrap {
    padding: 6px 8px;
    overflow: hidden;
    zoom: 1;
}
.twtr-fullscreen .twtr-tweet-wrap { padding: 20px }
.twtr-widget .twtr-tweet {
    border-bottom: 1px dotted #ddd;
    overflow: hidden;
    zoom: 1;
}
.twtr-widget-profile img.twtr-profile-img {
    display: block;
    float: left;
    width: 31px;
    height: 31px;
    border: 0!important;
}
.twtr-widget h3,
.twtr-widget h4,
.twtr-widget p {
    margin: 0!important;
    padding: 0!important;
    line-height: 1.2!important;
    width: auto!important;
}
.twtr-widget-profile h3,
.twtr-widget-profile h4 { margin: 0 0 0 40px!important }
.twtr-widget h3 {
    font-size: 11px!important;
    font-weight: normal!important;
}
.twtr-widget h4 { font-size: 16px!important }
.twtr-widget em,
.twtr-widget .twtr-new-results {
    font-size: 9px;
    font-style: normal;
    display: block;
    margin-top: 2px;
    zoom: 1;
}
.twtr-widget .twtr-new-results {
    text-align: center;
    padding: 3px;
    margin: 0 auto -10px auto!important;
    display: block;
    position: relative;
    bottom: 5px;
    line-height: .9;
}
.twtr-results-inner {
    line-height: 1;
    font-size: 100%;
    padding: 4px 0;
    position: relative;
    bottom: -2px;
    width: 40%;
    margin: 0 auto;
    z-index: 2;
    text-align: center;
}
.twtr-results-hr {
    width: 100%;
    position: relative;
    z-index: 1;
    height: 1px;
    border-bottom: 1px dotted #ddd;
    bottom: 7px;
    background: none;
    overflow: hidden;
}
.twtr-new-results span {
    position: relative;
    z-index: 3;
    top: -14px;
    display: block;
    font-size: 9px!important;
}
.twtr-fullscreen .twtr-new-results span { font-size: 24px!important }
.twtr-hd {
    padding: 10px;
    position: relative;
    zoom: 1;
    overflow: hidden;
}
.twtr-fullscreen .twtr-hd {
    height: 0;
    padding: 0;
}
.twtr-timeline {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    height: 225px;
}
.twtr-scroll .twtr-timeline {
    overflow-x: hidden;
    overflow-y: auto;
}
.twtr-widget .twtr-tweet:last-child { border-bottom-width: 0 }
.twtr-ft { position: relative }
.twtr-ft div {
    overflow: hidden;
    padding: 10px;
    zoom: 1;
}
.twtr-ft span {
    float: right;
    text-align: right;
}
.twtr-ft a {
    float: left;
    display: block;
}
.twtr-ft span a { float: none }
.twtr-avatar {
    width: 40px;
    height: 40px;
    float: left;
    overflow: hidden;
    display: block;
}
.twtr-fullscreen .twtr-avatar {
    width: 80px;
    height: 80px;
}
.twtr-img {
    height: 25px;
    width: 25px;
}
.twtr-img img {
    width: 30px;
    height: 30px;
}
.twtr-fullscreen .twtr-img img {
    width: 72px;
    height: 72px;
}
.twtr-fullscreen a.twtr-join-conv { display: none }
.twtr-tweet-text { margin-left: 40px }
.twtr-fullscreen .twtr-tweet-text { margin-left: 90px }
.twtr-doc a { text-decoration: none!important }
.twtr-doc a:hover { text-decoration: underline!important }

参考エントリ

多謝。

関連記事
08:08 | Trackback : 0 | Comment : 0 | EDIT | TOP
Comment







(編集・削除用)


管理者にだけ表示を許可
Trackback
http://mains1011.blog24.fc2.com/tb.php/457-26b43e16
検索フォーム
スポンサーリンク
なかのひと

三男パパ

Author三男パパ

Twitter@knob_papa
FacebookNobuyasu Kamata
Instagramknobpapa
生まれ東京都
住み処埼玉県

独学で自社関連のWebサイトを作っています。こんなサイトとか、あんなサイトとか。お暇ならどうぞ。

on-line:/total:

カテゴリ

openclose

最新記事
メールフォーム
ご意見・ご感想をお寄せください

お名前:

メアド:

件名:

本文:

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