人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

1370754673
●拡大する

●質問者: もっちもち
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

追加しておきました。


1 ● rouge_2008
ベストアンサー

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

https://twitter.com/about/logos

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

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

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

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

すべきこと

してはいけないこと

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

すべきこと

してはいけないこと

※他にも大切な事が書いてありますので、詳しい事は引用元のページ(※上記参考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; /* 画像に描いてある枠線が見えるように適当に指定 */
}


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


もっちもちさんのコメント
ありがとうございます!早速試したいと思います!

_さんのコメント
おお!SUBARASHII!!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ