WordPress.com に Twitter 公式のウィジェット(Twitter タイムライン)を貼り付ける方法(改)

gdfsgfgsf

以前、「WordPress.com に Twitter 公式のウィジェットを貼り付ける方法」という記事において、テキストウィジェットにタグを貼り付ける方法について説明しましたが、WordPress.com の方で「Twitter タイムライン」という Twitter 専用のウィジェットが準備されておりますので、その設置方法などについての覚書をしたいと思います。

「ウィジェット」をクリック。

fgsfsgsf

「Twitter タイムライン」を

fgsfdgsfdgs

設置したいウィジェットエリアにドラッグ&ドロップします。

dgfafafa

「Twitter タイムライン」の管理画面は以下のような感じ。

timeline01

なんか、いろいろと細かい設定ができそうな感じです。

dfdsfdsfda

次に Twitter の方に行って、Twitter ウィジェットの ID を取得します。まず、「編集」ボタンをクリック。

gfsfsfdgsf

「ウィジェット」をクリック。

sdgsgsga

「新規作成」ボタンをクリック。

ウィジェット

「ウィジェットを作成」ボタンをクリック、という作業をすると、

ウィジェットの設定

URL の方に番号を含むアドレスが表示されるので、番号の部分だけコピーして、

SystemUIServer

「ウィジェット ID」の欄に貼り付け、

fgsgsdfgfs

「保存」ボタンをクリックすると、

gfsdfsdf

以下のような感じの Twitter ウィジェットが表示されるようになります。

gdfsgfgsf

「リンク色」や「枠線の色」のところの設定を変更すると、リンクや枠線の色が変更されます。私の場合は、「Colors 」という mac のアプリを使って、色を選んでいます。

Colors

rect3015

gsfdsafad

「タイムラインテーマ」のところで、「ダークカラー」を選択すると、全体の色合いが黒っぽくなります。

dfaadf

rect3015

gfaadfa

「レイアウトオプション」のところにチェックを入れると、ヘッダー部やフッター部が削除されたり、枠線がなくなったり、背景が透明化されて、ウィジェットの後ろの方の色がそのまま表示されるようになります。

gsfsdfa

rect3015

dfdfad

幅や高さの変更も可能です。

dfasdfad

rect3015

dsfafads

2013年5月9日現在、私のブログでは、寸法の調整が利かなくなっており、例えば、「500」と入力しても、保存をかけると「225」に戻るような状態です。そういうわけで、私のブログでは、CSS スタイルシートエディターの方で幅を指定することしました。

iPhone 等に対応しているレスポンシブデザイン設計のテーマを使っている場合には、幅を大きめに設定すると、iPhone 等で表示したときに Twitter ウィジェットが横幅いっぱいに表示されるようです。

dfgsdfgsfdg

rect3015

vzxcvzxcvz

Twitter の画像も表示されます。

fadfads

なお、従来の「Twitter」ウィジェットはそのうちに使えなくなるらしいです。

fgvdsgsdzfg

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。