Twitterウィジェット(埋め込みタイムライン)のデザインをカスタマイズする方法

カテゴリー:Services    |    タグ:

Twitterウィジェット(埋め込みタイムライン)のデザインをカスタマイズする方法

ブログにTwitterウィジェットを設置されている方、多いと思います。このブログでも最初の頃設置しておりました。
ただ、わたしはデザインはデフォルトのままで設置していたのですが、今回このデザインを自分なりにアレンジしたい方向けのお話です。

1. Twitterウィジェット(埋め込みタイムライン)を設置する

まずは、Twitterウィジェットを作成していきます。

公式のTwitterページの右上、歯車アイコンから → 設定を選択。
左下のウィジェットをクリック

T-widgget

新規作成ボタンを押すと、下記のような画面に行きます。

T-widgget1

今回は、デザインをカスタマイズするので詳細な設定はせずにこのまま左下のウィジェット作成ボタンを押します。

T-widgget2

ボタンを押すとコードが表示されるので

T-widgget3

このコードをブログに貼り付けます。

ここまでで設置は完了です。
あとはデザインをカスタマイズしていきます。

2. Twitterウィジェット(埋め込みタイムライン)のデザインをカスタマイズする

先ほど取得したコード(下記の状態)に、

カスタマイズしたい属性を書き加えていきます。class="twitter-timeline"のあとに変更を加えていきます。

幅と高さを指定する

幅200px、高さ200pxに指定してみます。単位はpxで指定します。
width="200px" height="200px"を書き加えます。

テーマを変更する

暗いテーマと明るいテーマのどちらかを指定できます。
暗いテーマにする場合はdata-theme="dark"を書き加えます。

枠の色を変更する

枠の色を青色に変更してみます。
data-border-color="#00F" を書き加えます。

ツイート数を固定にする

1~20件の間で、表示する件数を固定することができます。
1件だけ表示させたい場合はdata-tweet-limit="1"を書き加えます。


補足
この指定をすると、ツイートが自動的に更新されず、「さらに読み込む」のリンクが表示されなくなります。
また、ウィジェットのサイズが固定になりスクロールも表示されなくなります。

インターフェースを変更する

data-chrome属性を使ってウィジェットのレイアウトやインターフェースをカスタマイズできます。

ヘッダー、フッター、ボーダー、スクロールバーの非表示と、背景色を透明にする指定してみます。

背景が透明なのがわかるように、ここでは画像を設定しています。

以下は、インターフェースでできる設定一覧です。

説明
インターフェース data-chrome="noheader" タイムラインのヘッダーをなくします。
data-chrome="nofooter" タイムラインのフッターやツイートボックスをなくします。
data-chrome="noborders" ウィジェットの周りやツイートの間のボーダーをなくします。
data-chrome="noscrollbar" タイムラインのスクロールバーが表示されないようにします。
data-chrome="transparent" タイムラインの背景を透明にします。
data-chrome="noheader nofooter" 複数指定する場合は、スペースで区切ります。例はヘッダーとフッターを表示する場合です。

いかがでしたでしょうか?
公式のものでも意外とカスタマイズできるものですね!

ここでご紹介させて頂いたものがすべてではありません。公式でドキュメントがありますのでもっと知りたい方は下記のリンクからご覧ください。

参考: 埋め込みタイムライン | Twitter Developers(日本語)

補足: 埋め込みツイートデザインをカスタマイズ

ブログにツイートを載せるときもカスタマイズできるようです。

参考: 埋め込みツイート | Twitter Developers(日本語)

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/07/13    Written by:
カテゴリー:Services,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

sharehtml

ShareHtmlをカスタマイズする

お友達のブログデザイン変更を頼まれたので、いろいろいじっていたの時、このShareHtmlを教えてあ

記事を読む

PAK56_mahousyoujyo

笑顔になれる天使のようなソーシャルメディア画像共有サイト「We Heart It」

すでにご存知の方もおられるかもしれません。InstagramやTumblrなどとはまた違う味を出して

記事を読む

background

覚えておきたい!! 継ぎ目のない無料の背景画像とジェネレーター

簡単に背景画像が作れるジェネレーターや無料配布サイトの紹介です。使い方などの説明はなくても大丈夫なも

記事を読む

OZPA_kokoronouchideiine

Twitterのヘッダ・背景用画像をおしゃれにサクッと変更できるサービス「TwitrCovers」

Twitterのデザインが変更されています。(2014/04/10)この情報は旧デザインでの設定にな

記事を読む

botti

これは使ってみるべき!CSSを楽しむジェネレーター「EnjoyCSS」

もうすぐクリスマスですね!ということで、このブログのヘッダーにクリスマスっぽいものを置いてみました。

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年5月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑