WordPressカスタマイズ

ツイッターのウィジェットを設置(2012年11月版)

ツイッターのウィジェット

Twitter(ツイッター)をやっている人は、運営ホームページやブログに自分のツイート(つぶやき)を表示できたらいいなと思うのではないでしょうか。
ホームページやブログと違い、ツイッターはフォローしている(情報を得ようとする)人に「速く、ダイレクトに」短いメッセージを送ることができるため、使い方次第で情報発信や実店舗集客にも役に立ちます。

ホームページやブログにつぶやきの表示窓のようなものを貼り付けることができるのですが、これを「ウィジェット」と呼びます。
※WordPressを使っている人は、ワードプレスでもウィジェットという言葉が用いられているので混同に注意!
ウィジェットも日々進化を遂げているため、貼り付けの手順が変わることがあります。
今回は現時点での最新版でツイッターのウィジェットを設置する手順を紹介します。

1. ツイッターにログインし、右上の歯車ボタンを押して「設定」をクリック。

ツイッターのウィジェット

2. 左側の設定メニューから「ウィジェット」をクリック。

ツイッターのウィジェット

3. ウイジェットの作成と管理の画面で「新規作成」ボタンを押す。

ツイッターのウィジェット

4. ユーザーウィジェットの設定の画面でタイムラインソースを選択が「タイムライン」になっていることを確認。よくわからなければ「タイムライン」をクリックしてもよい。

ツイッターのウィジェット

5. 左側のオプションの各項目をカスタマイズして「ウィジェットを作成」ボタンを押す。

  • ユーザー名:自分のツイッターのIDを入力。おそらくそのまま入力されているはず
    • 返信なし:自分宛のツイートを表示したい場合はチェックを外す
  • 高さ:ウィジェット全体の高さを決める。初期設定は600ピクセル。設定した値でのプレビューができる
  • テーマ:「明るい」「暗い」のいずれかを選択。「暗い」にすると黒基調のデザインになる
    • 画像を自動的に開く:チェックが入っていれば、画像つきツイートの画像は縮小表示される
  • リンクの色:ツイート中のURLやハッシュタグなどの色を決める。初期値は青
  • ドメイン:ウィジェットを表示させたいサイトのドメイン部分を入力
    • Twitterのカスタマイズ機能を無効にする:ツイッターのおすすめユーザーなどの機能を使用しない場合はチェックを入れる。よくわからなければ試しにチェックを入れずそのままにしておこう

※設定変更するたびに右側のプレビューが変わるので、随時確認しながら操作するとよい。
※ちなみに横幅は貼り付ける場所に合わせて自動調整されるため値を設定不可。

ツイッターのウィジェット

ちなみに高さを350ピクセル、テーマを「暗い」にするとこんな感じ。

ツイッターのウィジェット

6. 「ウィジェットを作成」ボタンを押すと「ウィジェットが作成されました。」と表示され画面下部にウィジェットのコードが表示される。コードは既に選択された状態なので(Windowsなら右クリックして)そのままコピー。

ツイッターのウィジェット

ここまででTwitterでの操作は完了。
以下はWordPressで貼り付ける場合の方法。

● WordPressの投稿画面の場合

「HTML」をクリックし、本文の任意の場所にコードを貼り付け。
ただし、この方法を使うことはまず無いと思われる。

ツイッターのウィジェット

● WordPressのウィジェットでサイドバーに貼り付ける場合

  1. ウィジェットの設定ページに進む
  2. ウィジェット一覧から「テキスト」を任意のサイドバーウィジェットにドラッグ
  3. 入力欄が大きく表示されるのでタイトルの入力と枠内にコードを貼り付け
  4. 「保存」ボタンを押す

ツイッターのウィジェット

その他のブログなどにコードを貼り付ける時のポイント

コードはHTMLを使用していますので、HTMLソースを表示・編集できるようなホームページ作成ソフトやブログの管理ページで貼り付け操作を行うようにしてください。

投稿者プロフィール

とものすけ
とものすけ
福岡市在住。気になったことはとりあえずネタにする主義。かしわうどんと沖縄そばとを優先的に選んで食べる。Love Perfume !!!

関連記事

  1. WordPressテーマをStinger5に変更 WordPressテーマをStinger5に変更した!が後で気づ…
  2. FeedWind設定 他のブログの更新情報を表示させる(FeedWind使用)
  3. FC2ブログの記事をWordPressへ移行する
  4. 福岡よかウェブプロジェクト さくらのレンタルサーバからエックスサーバーに乗り換えました
  5. PS Auto Sitemap PS Auto Sitemapプラグインを使ってサイトマップを作…
  6. よかウェブ研究室ホーム画面 WordPressテーマをTCDテーマ「CORE」に変更しました…
  7. Stinger管理 WordPressテーマをStinger7に更新しました
  8. WordbookerでWordPressの投稿をFacebook…

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

CAPTCHA


ピックアップ記事

  1. 太宰府天満宮と梅
  2. よかウェブ研究室ホーム画面
  3. 博多駅イルミネーション2018
  4. 警固公園イルミネーション2018
  5. 読谷山そば
  6. 熊本城
  7. 明治通り側の桜の木
  8. 喜屋武岬

YouTube

カテゴリー

月別アーカイブ

スポンサーリンク

PAGE TOP