[`yahoo` not found]
Pocket

images

WPにのサイドバーにツイッターのタイムラインを設置する方法

ワードプレスのサイドバーにツイッターを表示させる方法を解説します。
専門用語では、twitter タイムラインの『埋め込み』と言います。

ツイッターからタイムライン用のHTMLコードを取得する


ツイッターアカウントのプロフィール画面から、画面右上の
「プロフィールと設定」をクリック、

g1wd74mvvjf0iuz1475232837_1475232921
さらに「設定」を開きます。

bandicam-2016-09-30-19-43-58-095

ユーザー情報の画面が表示されたら、
画面左下のメニューから「ウィジェット」を開きます。

bandicam-2016-09-30-19-45-52-114

画面右上「新規作成」ボタンを押し、「検索」開きます。

bandicam-2016-09-30-20-06-33-088

ウィジェットの設定画面で「検索クリエ」の空欄に、
貴方のツイッターユーザー名を記入し、「変更を保存」をクリック。

このページでは、WordPressのサイドバーに設置するための、
Twitterタイムライン用HTMLコードを取得します。

bandicam-2016-09-30-20-15-26-921

画面上に「ウィジェットが作成されました」と表示され、画面下に、
タイムライン用のHTMLコードが表示されます。

bandicam-2016-09-30-20-15-26-922

タイムライン用のHTMLコードは全てコピーします。

ワードプレスのウィジェットにタイムライン用のHTMLコードを設置


ダッシュボードメニュバーから、「外観」⇒「ウィジェット」

bandicam-2016-09-30-19-19-34-145

「ウィジェット」の画面左側の項目の中から「テキスト」をクリック。

bandicam-2016-09-30-19-20-20-320

サブコンテンツが表示されたら、「ウィジェットを追加」をクリック。

bandicam-2016-09-30-19-20-33-848
画面右側、サブコンテンツ(サイドバー)にテキストの項目が表示されますので、
開きます。

bandicam-2016-10-01-00-02-00-193
「タイトル」にTwitterと記入。さらに、「内容」の部分に、
先ほど取得したタイムライン用のHTMLコード貼り付けて、「保存」を
クリックします。

bandicam-2016-09-30-23-10-57-235

これでサイドバーにツイッタータイムラインが設置されました。
設置作業はこれで完了です。

bandicam-2016-09-30-19-24-21-596

スマホ画面の表示の最適化


ウィジェットの画面の幅が広すぎて見づらい、画面のスクロールが
やりにくいという場合に、スマホで表示されるウィジェットの横幅を
調整します。

タイムライン用のHTMLコードを一部修正を加えます。
下記が修正前のHTMLコードです。

bandicam-2016-09-30-22-43-12-530

以下の様に修正を加えます。
赤いアンダーラインを引いた部分が記述を書き加えた部分です。

bandicam-2016-09-30-22-42-51-817

再び、WPのダッシュボードのメニューバーから、
「外観」⇒「ウィジェット」のページを開きます。
先ほど作ったテキスト(Twitter)の項目を開き、
「内容」に記載されているタグを書き換えます。

bandicam-2016-09-30-23-30-47-780

最後に「保存」ボタンをクリックすると設定変更が反映されます。
このように、閲覧者の使いやすさを重視したサイトを構築していきましょう。

[`yahoo` not found]
Pocket