コードを変更してTwitterウィジェットをカスタマイズ

広告

タイムラインなどを表示するウィジェットは新規作成画面や編集画面でいくつかのオプション(テーマ、リンクの色、高さ、など)が設定できるようになっていますが、コードに追加の記述を行うことでより細かなカスタマイズが可能になっています。ここではウィジェットに対して可能なカスタマイズの種類と方法について解説します。

なおウィジェットを新規作成したり管理したりする方法については「ウィジェットを作成しタイムラインや検索結果をブログに表示する」のページで解説しています。合わせてご参照下さい。

1.横幅の設定
2.レイアウトの設定
3.境界線の色
4.表示されるツイートの数を固定
5.おすすめしたいユーザーの設定

ユーザーウィジェットの場合、コードの構成は次のようになっていました。

<a class="twitter-timeline" href="[URL]" data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

追加でカスタマイズを加える前のウィジェットは次のように表示されていました。

p33-1

それではカスタマイズを行ってみます。「横幅」を明示的に指定する場合には次の個所に「width="xxx"」を追加して下さい。下記は200pxに設定する場合です。

<a class="twitter-timeline" href="[URL]" width="200" data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置すると、ウィジェットの幅が指定したサイズで表示されます。

p33-2

横幅が指定したサイズに設定されたため横幅が狭くなっています。

続いてレイアウトの設定です。ウィジェットの「ヘッダーの非表示」「フッターの非表示」「境界線の非表示」「スクロールバーの非表示」「背景を透明にする」についてそれぞれ設定が行えます。

「ヘッダー」を表示しない場合には次の個所に「data-chrome="noheader"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="noheader"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。左が変更前、右が変更後です。右はウィジェットのヘッダー部分が表示されていません。

p33-3

----

「フッター」を表示しない場合には次の個所に「data-chrome="nofooter"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="nofooter"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。左が変更前、右が変更後です。右はウィジェットのフッター部分が表示されていません。

p33-4

----

「境界線」を表示しない場合には次の個所に「data-chrome="noborders"」を追加して下さい。境界線とはツイートとツイートの間やウィジェットの枠線の事です。

<a class="twitter-timeline" href="[URL]" data-chrome="noborders"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。左が変更前、右が変更後です。右はウィジェットの枠線が表示されておらず、ツイートとツイートとの間の線も表示されていません。

p33-5

----

「スクロールバー」を表示しない場合には次の個所に「data-chrome="noscrollbar"」を追加して下さい。(※スクロールバーを無くすと操作がしにくくなる可能性がありますのでご注意下さい)。

<a class="twitter-timeline" href="[URL]" data-chrome="noscrollbar"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。左が変更前、右が変更後です。右はウィジェットのスクロールバーが表示されていません。

p33-6

----

「タイムラインの背景を透明にする」場合には次の個所に「data-chrome="transparent"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="transparent"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。左が変更前、右が変更後です。右はウィジェットの背景が透明になっています(ツイート間の線は表示されていますが枠線は表示されていないようです)。

p33-7

----

レイアウトに関する設定で、複数の設定を行いたい場合はスペースで区切り次のように記述されて下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="noheader nofooter"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。左が変更前、右が変更後です。右はウィジェットのヘッダーおよびフッターが表示されていません。

p33-8

続いて境界線の色の設定です。「境界線の色」を設定する場合には次の個所に「data-border-color="色コード"」を追加して下さい。下記は境界線の色を「#FF0000」に設定した場合です。

<a class="twitter-timeline" href="[URL]" data-border-color="#FF0000"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。左が変更前、右が変更後です。右はウィジェットの境界線の色、そしてツイートとツイートの間の線の色が変更されています。

p33-9

通常はウィジェットのサイズを固定にし、そのウィジェットの中にツイートがスクロールバー付きで表示されますが、表示されるツイート数を固定にしてウィジェットはそのツイートが全部表示されるように自動的に高さを調整するように設定することができます。

ツイート数は1から20までで指定します。設定する場合には次の個所に「data-tweet-limit="ツイート数"」を追加して下さい。下記は表示するツイート数を3に固定した場合です。

<a class="twitter-timeline" href="[URL]" data-tweet-limit="3"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

変更したコードをブログに設置してみます。今回はツイート数に3を指定しているため、3つのツイートがちょうど表示されるようにウィジェットの高さが調整されて表示されています。

p33-10

ただしこの設定を行った場合、新しいツイートが送信されても自動的に更新されません。(ブラウザを再読み込みされれば改めて指定したツイート数を表示するのに必要な高さにウィジェットが調整されて表示されなおされます)。

ウィジェットに表示されたツイートには「返信(Reply)」「リツイート(Retweet)」「お気に入りに登録(Favorite)」のボタンが表示されています。

p33-11

まずは何も設定しない時に挙動を確認しておきます。例えば「返信」ボタンをクリックしてみます。

p33-12

次のようなウィンドウが表示され返信を行うことができます。返信内容を記述して「ツイート」ボタンをクリックして下さい。

p33-13

返信が行われると同時に画面が次のように表示され、ウィジェットに設定されているTwitterアカウントが「おすすめしたいユーザー」として表示されます。

p33-14

ここで表示される「おすすめしたいユーザー」に他のアカウントを追加して表示することができます。設定する場合には次の個所に「data-related="aaa,bbb"」を追加して下さい。複数追加する場合はカンマ(,)で区切ってユーザー名を記述します。

<a class="twitter-timeline" href="[URL]" data-related="aaa,bbb"
 data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

今回はdata-related="aaa"のようにユーザー名を1つ追加しました。設定を変更後、先ほどと同じように返信を行ってみると、最後の画面に次のように表示されます。

p33-15

元々のアカウントに加えて追加したユーザー名のアカウントが合わせて「おすすめしたいユーザー」として表示されます。

----

コードを直接編集してカスタマイズできる項目について解説いたしました。直接コードを編集するため変更を行う場合はブログに貼り付けたコード毎に個別に行う必要がありますが、是非色々試されてみて下さい。

( Written by Tatsuo Ikura+ )