1370754673 twitterウィジェットのデザインを自作画像にカスタマイズしたいのですが、変更方法を教えてください。


(はてなグループで使用します。)

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/06/09 14:11:13
  • 終了:2013/06/16 14:15:04
id:mozomu62

追加しておきました。

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/06/11 11:40:32

まず最初に注意点がありますが、次のような制約がありますので、添付された画像のようにTwitterバードのアイコンの周囲に@アカウント名やハッシュタグ以外の文字列を表示したり、独自に作成したTwitterのロゴを使う事はできません。

https://twitter.com/about/logos

Twitterブランドと登録商標の利用

Twitterのマークに限らず、Twitterの名前、ロゴ、ツイート、Twitter bird、およびTwitterの商品と識別できる任意の単語、フレーズ、画像または名称が含まれます。

マークを改変し、置き換え、または混同するような方法で使用しないでください。Twitterがスポンサーや協賛しているように見せかけたり、Twitterと他のブランドを混同させるようなやり方も含みます。

ご利用に関するガイドライン

すべきこと

  • Twitter公式の、改変されていないTwitter birdを使用する。
  • Twitter birdは必ず右向きにする。
  • Twitter birdの周りには少なくとも150%の余白をとる。

してはいけないこと

  • 吹き出しを使ったり、Twitter Birdの周りに単語をおくこと。
  • Twitter birdの向きを変えたり回転させたりすること。
  • Twitter birdをアニメーション化すること。
  • Twitter birdを複数表示すること。
  • Twitter birdの色を変更すること。
  • Twitterブランドの代わりに他のマークやロゴを使用すること。


アカウントをプロモーションする。

すべきこと

  • あなたのTwitterアカウントへのリンクとしてTwitterボタンから1つ選んでご利用ください。
  • @ユーザー名の近くにTwitter birdのロゴを1つ選んで表示すること。
  • Twitter birdを表示できないときは、@ユーザー名とともにTwitterでフォローするというフレーズを表示してください。

してはいけないこと

  • Twitter birdを改変すること。
  • 当社サイトからその他のアートワーク(例:認証済みバッジ)を使用すること。
  • 当社のロゴを用いてボタンや画像などを作成すること(シグネチャバーのように技術的な必要性がある場合は除く)。作成の際はこちらの縮小版Twitter birdをご利用ください。

※他にも大切な事が書いてありますので、詳しい事は引用元のページ(※上記参考URL)を確認してみてください。
※具体的には、
i.「Honoshin」というロゴにはTwitterバードのアイコンを使用できません。
ii.背景を表示する為にヘッダーを非表示にしますが、次のページに従ってTwitterロゴまたはフォローボタンを表示する必要があります。(※Twitterロゴを表示する場合は、Twitterにリンクする必要があります。)
https://dev.twitter.com/terms/display-requirements

※フォローボタンのコードは、次のページで取得できます。
https://twitter.com/about/resources/buttons#follow


1.用意した背景画像をヘッダー・ツイート表示部分・フッター用に3分割します。
※CSSの指定で使うので、ヘッダーとフッター用の画像の高さを確認してメモして置いてください。
※ツイート表示部分の背景は繰り返し表示しますので、高さは適当に10px程度あれば十分です。


2.Twitterウィジェットに背景を表示する為に次のような構造にします。

	<div id="mytweets">
		<div class="mytweets-header">
			※ 表示したい画像やテキストがある場合はここに記述 ※
			<div class="twitter-follow-me">
				※ ここにフォローボタンのコード ※
			</div>
		</div>
		<div class="mytweets-body">
			※ ここにウィジェットのコード ※
		</div>
	</div>


3.ウィジェットのコードに次のように「width="ウィジェットの幅(※180から520までの間で指定)" data-chrome="noheader"」を追加し、Twitterロゴではなくフォローボタンを追加した場合は、既に同じコードを追加してあるので、<script>から</script>を削除します。

		<a class="twitter-timeline" width="380" data-chrome="noheader" href="https://twitter.com/アカウント名" data-widget-id="ウィジェットのID">Tweets by @アカウント</a>
						<!-- ここから削除 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> ここまで削除 -->

※ウィジェットのヘッダー非表示と幅の指定を追加しています。
※ウィジェットの幅には、背景画像の幅から十数ピクセルから20px程度引いた数値を指定するといいかもしれません。(※5px程度の枠線が画像の大きさギリギリの所にある場合は、画像の幅から10px程度引いた数値でも大丈夫です。)
※ウィジェットの高さを指定しても大丈夫です。(※追加する場合は「height="高さ(最小で200)"」を追加)

https://dev.twitter.com/docs/embedded-timelines


4.ここまでの手順でできたコードを、グループの管理のHTML入力欄(トップページのみに表示する場合は、「トップページのHTML(HTMLタグ利用可)」の欄)の任意の場所に記述します。

スタイルシートの欄に次のCSSを記述します。

	#mytweets {
		width: 400px; /* 画像の幅と同じサイズを指定 */
		background: url('フッター用の画像のURL') bottom left no-repeat;
		padding-bottom: 50px; /* フッター用の画像の高さと同じサイズを指定 */
	}
	.mytweets-header {
		position: relative;
		background: url('ヘッダー用の画像のURL') no-repeat;
		height: 50px; /* ヘッダー用の画像の高さから次の行で「ヘッダー内の上下余白に指定した数値×2」を引いた数値を指定 ※画像の高さが62pxなら50pxと指定します。※ */
		padding: 6px 10px; /* ヘッダー内の上下余白 ヘッダー内の左右余白 ※ここは適当に指定※ */
	}
	.twitter-follow-me {
		/* フォローボタンの表示位置指定 */
		position: absolute;
		right: 15px;
		bottom: 10px;
	}
	.mytweets-body {
		background: url('ツイート表示部分用の画像のURL') repeat-y;
		padding-left: 10px; /* 画像に描いてある枠線が見えるように適当に指定 */
	}


※とりあえず上記の手順で実行してみてください。

id:mozomu62

ありがとうございます!早速試したいと思います!

2013/06/11 18:11:19
id:dorafujico

おお!SUBARASHII!!

2013/06/11 18:30:24

その他の回答(0件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/06/11 11:40:32ここでベストアンサー

まず最初に注意点がありますが、次のような制約がありますので、添付された画像のようにTwitterバードのアイコンの周囲に@アカウント名やハッシュタグ以外の文字列を表示したり、独自に作成したTwitterのロゴを使う事はできません。

https://twitter.com/about/logos

Twitterブランドと登録商標の利用

Twitterのマークに限らず、Twitterの名前、ロゴ、ツイート、Twitter bird、およびTwitterの商品と識別できる任意の単語、フレーズ、画像または名称が含まれます。

マークを改変し、置き換え、または混同するような方法で使用しないでください。Twitterがスポンサーや協賛しているように見せかけたり、Twitterと他のブランドを混同させるようなやり方も含みます。

ご利用に関するガイドライン

すべきこと

  • Twitter公式の、改変されていないTwitter birdを使用する。
  • Twitter birdは必ず右向きにする。
  • Twitter birdの周りには少なくとも150%の余白をとる。

してはいけないこと

  • 吹き出しを使ったり、Twitter Birdの周りに単語をおくこと。
  • Twitter birdの向きを変えたり回転させたりすること。
  • Twitter birdをアニメーション化すること。
  • Twitter birdを複数表示すること。
  • Twitter birdの色を変更すること。
  • Twitterブランドの代わりに他のマークやロゴを使用すること。


アカウントをプロモーションする。

すべきこと

  • あなたのTwitterアカウントへのリンクとしてTwitterボタンから1つ選んでご利用ください。
  • @ユーザー名の近くにTwitter birdのロゴを1つ選んで表示すること。
  • Twitter birdを表示できないときは、@ユーザー名とともにTwitterでフォローするというフレーズを表示してください。

してはいけないこと

  • Twitter birdを改変すること。
  • 当社サイトからその他のアートワーク(例:認証済みバッジ)を使用すること。
  • 当社のロゴを用いてボタンや画像などを作成すること(シグネチャバーのように技術的な必要性がある場合は除く)。作成の際はこちらの縮小版Twitter birdをご利用ください。

※他にも大切な事が書いてありますので、詳しい事は引用元のページ(※上記参考URL)を確認してみてください。
※具体的には、
i.「Honoshin」というロゴにはTwitterバードのアイコンを使用できません。
ii.背景を表示する為にヘッダーを非表示にしますが、次のページに従ってTwitterロゴまたはフォローボタンを表示する必要があります。(※Twitterロゴを表示する場合は、Twitterにリンクする必要があります。)
https://dev.twitter.com/terms/display-requirements

※フォローボタンのコードは、次のページで取得できます。
https://twitter.com/about/resources/buttons#follow


1.用意した背景画像をヘッダー・ツイート表示部分・フッター用に3分割します。
※CSSの指定で使うので、ヘッダーとフッター用の画像の高さを確認してメモして置いてください。
※ツイート表示部分の背景は繰り返し表示しますので、高さは適当に10px程度あれば十分です。


2.Twitterウィジェットに背景を表示する為に次のような構造にします。

	<div id="mytweets">
		<div class="mytweets-header">
			※ 表示したい画像やテキストがある場合はここに記述 ※
			<div class="twitter-follow-me">
				※ ここにフォローボタンのコード ※
			</div>
		</div>
		<div class="mytweets-body">
			※ ここにウィジェットのコード ※
		</div>
	</div>


3.ウィジェットのコードに次のように「width="ウィジェットの幅(※180から520までの間で指定)" data-chrome="noheader"」を追加し、Twitterロゴではなくフォローボタンを追加した場合は、既に同じコードを追加してあるので、<script>から</script>を削除します。

		<a class="twitter-timeline" width="380" data-chrome="noheader" href="https://twitter.com/アカウント名" data-widget-id="ウィジェットのID">Tweets by @アカウント</a>
						<!-- ここから削除 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> ここまで削除 -->

※ウィジェットのヘッダー非表示と幅の指定を追加しています。
※ウィジェットの幅には、背景画像の幅から十数ピクセルから20px程度引いた数値を指定するといいかもしれません。(※5px程度の枠線が画像の大きさギリギリの所にある場合は、画像の幅から10px程度引いた数値でも大丈夫です。)
※ウィジェットの高さを指定しても大丈夫です。(※追加する場合は「height="高さ(最小で200)"」を追加)

https://dev.twitter.com/docs/embedded-timelines


4.ここまでの手順でできたコードを、グループの管理のHTML入力欄(トップページのみに表示する場合は、「トップページのHTML(HTMLタグ利用可)」の欄)の任意の場所に記述します。

スタイルシートの欄に次のCSSを記述します。

	#mytweets {
		width: 400px; /* 画像の幅と同じサイズを指定 */
		background: url('フッター用の画像のURL') bottom left no-repeat;
		padding-bottom: 50px; /* フッター用の画像の高さと同じサイズを指定 */
	}
	.mytweets-header {
		position: relative;
		background: url('ヘッダー用の画像のURL') no-repeat;
		height: 50px; /* ヘッダー用の画像の高さから次の行で「ヘッダー内の上下余白に指定した数値×2」を引いた数値を指定 ※画像の高さが62pxなら50pxと指定します。※ */
		padding: 6px 10px; /* ヘッダー内の上下余白 ヘッダー内の左右余白 ※ここは適当に指定※ */
	}
	.twitter-follow-me {
		/* フォローボタンの表示位置指定 */
		position: absolute;
		right: 15px;
		bottom: 10px;
	}
	.mytweets-body {
		background: url('ツイート表示部分用の画像のURL') repeat-y;
		padding-left: 10px; /* 画像に描いてある枠線が見えるように適当に指定 */
	}


※とりあえず上記の手順で実行してみてください。

id:mozomu62

ありがとうございます!早速試したいと思います!

2013/06/11 18:11:19
id:dorafujico

おお!SUBARASHII!!

2013/06/11 18:30:24

この質問への反応(ブックマークコメント)

トラックバック

  • 本日からほの新グループのリニューアルを行いたいと思います。 リニューアル内容 ・トップページのタイトル画像変更 ・トップページのボタンデザイン変更 ・「ほのぼの新聞 更新情報
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません