Back to Top

つぶやきをサイトに表示できるTwitter公式ウィジェット、デザインカスタマイズも簡単

titleUnder

Twiter公式ウィジェット

ツイート(つぶやき)をブログやサイトに表示させるなら、Twitterが公式に配布しているウィジェットが便利です。背景色やテキスト・リンクの色の変更が可能なので、ブログのデザインに合わせてウィジェットをカスタマイズできます。設定は簡単なので5分ほどで導入できます。

Twitter公式ウィジェット

今回紹介するのはTwitterの公式ウィジェットです。
Twitterのウィジェットやブログパーツをいろいろ試してみたところ、
公式のものが一番使いやすくカスタマイズしやすかったです。
今更感はありますがどこからウィジェットを入手すればいいか分かりにくかったので解説したいと思います。
ではまずは配布ページへGO。

ウィジェットの設定・カスタマイズの方法

まずは左のメニューから「自分のサイト」を選択します。
自分のツイート・つぶやきを表示させたい場合は「プロフィールウィジェット」を選択します。

Twiter公式ウィジェット

次にツイッターのユーザー名を入力します。
ツイッターにログインしていれば自動でユーザー名が入力されます。
次に左のメニューから「カスタマイズ」を選択。
デフォルトでは「最新データを取得?」と「スクロールバーを表示?」にチェックが入ってないので、
チェックを入れておきます。
「ツイートの表示方法」を選択、「表示するツイート数」はお好みで。

Twiter公式ウィジェット

では次は「デザイン」を選択して背景やリンクの色をカスタマイズしていきます。
ここは直感的に操作できるので説明不要ですね。

Twiter公式ウィジェット

最後に「サイズ」を調整します。
ここも説明は不要ですね。
デザインとサイズが調整できたら「プレビューで確認」ボタンを押してデザインを確認します。

Twiter公式ウィジェット

設定を終了し、コードを生成する」ボタンを押すとコードが出てきます。
あとはブログやサイトに貼っつけるだけです。

Twiter公式ウィジェット

CSSでカスタマイズ

CSSでのカスタマイズについては特に言及されていないので、
禁止はされていないでしょう。
ひとつ気になったのはツイートに全て「ユーザー名」が付いてしまうことです。

Twiter公式ウィジェット

これはちょっと消しときたいのでdisplay:noneで消しちゃいます。
classで”twtr-user”が付与されてるのでこれを使います。

.twtr-user {
  display: none;
}

ユーザー名が消えてスッキリしました。

Twiter公式ウィジェット

このエントリーをはてなブックマークに追加 Clip to Evernote

Comments