PC in the early afternoon編集部

サイドバーにツイッターのタイムラインを表示させよう

こんばんわわわわん∪･ω･∪
今日は『サイドバーにツイッターのタイムラインを埋め込む』です。
ちょっと難しいかも！と思うかも知れませんが大丈夫です☺︎

写真だけでも分かるように書いているつもりです！

はじめに

※ツイッターでアカウントを作らなければなりません。

※ツイッターのアカウントの作り方についての記載はありません☺︎

※ツイッターの説明はパソコン上からの操作になっています。

ツイッターにログインして、サイドバーへの埋め込みコードをコピーしよう

まずはツイッターにログインします。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc1

⇧ログインしたページです。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%92

 

ログインしたら、
①の場所をクリックします。ここの部分の名前はなんと言うのでしょう？笑
クリックすると、メニューが出てくるので②設定を選択します。

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%93

設定を選択するとユーザー情報が表示されます。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%94

 

左のサイドバー（ユーザー情報）を下の方へスクロールすると、
ウィジェットとういう項目が出来るので選択します。

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%95

ウィジェットを選択すると新規で追加できる項目が出てきます。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%96

 

①新規作成を選択すると、メニューが出てくるので
②のプロフィールを選択してください。
次は写真を見てもらって、まとめて説明しますね。

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%97

 

プロフィールを選択すると、⇧のような画面に移動します。
※訳は私なりの訳です笑
赤枠の中に、自分のツイッターのURLを記入するかコピーします。

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%98

 

ちなみに
URLは自分のツイッターのトップページに行くと、上に出て来るのでそれをコピーでも大丈夫です。

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%99

URLをコピーして貼り付けました。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%90

 

貼り付けた後、
①URLを貼り付ける枠内右にある矢印かパソコンのエンターを押すと、
②下からニョキっと次の画面が出てきます。

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%91

 

左の訳）ツイッターのタイムラインを埋め込みますか？
右の訳）ツイッターのボタンを埋め込みますか？と聞かれているので（多分）
左のタイムラインを埋め込むを選択します。

 

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%92

 

タイムラインを選択すると、またニョキっと下からページが出てきます。
写真に文字ばかりでとても見辛いですが・・・
タイムランを埋め込むを選択すると、細かくて薄い文字なんだけど、
埋め込みコードが②の赤枠内に表示されています。
このコードの上にカーソルを合わせ、クリックするだけで埋め込みコードをコピーしてくれます。
※①のカスタムは後ほど記載しますね☺︎

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%93

⇧こんな風に、クリックしたらすぐにコピー完了となります☺︎

ツイッターがページ上に表示された時の見た目をカスタムしよう！

ツイッタータイムラインの埋め込みコードは、デフォルトのままだとかなり大きいサイズで表示されるように設定されています。
これくらい⇩（笑）

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%92%ef%bc%92

なので、表示サイズが小さくなるようにカスタムしましょう！
大きいままの表示でいい方は飛ばしてOKです☺︎

先ほどのタイムライン埋め込みコードが表示された画面です。

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%94

先ほどは触れませんでしたが、

赤枠内の水色の文字を選択します。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%95

 

サイズ⇨ホームページ上で表示されるツイッターのサイズで
高さと幅（縦×横）が変えられます。
見た目⇨ツイッターといえば青なイメージです。色が変更できます。
言語⇨使用する言語です。
ここでオリジナルに変更すると、埋め込みコードも勝手に変更後のコードになりますので、そちらをコピーしてください。

 

ワードプレスにツイッターの埋め込みコードを貼ろう！

ツイッターからワードプレスに移動します。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%96

①ダッシュボード
⇩
②外観
⇩
③ウィジェット

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%97

ウィジェットを選択するとウィジェットを操作できるページに移ります。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%98

下の方へスクロールすると、左下からテキストという項目が出て来るので選択します。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%91%ef%bc%99

テキストを選択すると、サイドバーウィジェットという項目が出てくるので
チェックを入れ（もしくはすでに入っていたらそのまま）ウィジェットを追加のボタンをクリックします。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%92%ef%bc%90

ウィジェットを追加すると、新しくテキストが記入できる赤枠内の様なものが右の方に出てきます。

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%92%ef%bc%91

タイトルは、ホームページ上に表示されるタイトルです。
未記入でもOKです。
内容の項目に先ほどツイッターの操作画面でコピーした埋め込みコードを貼り付けます。
貼り付けたら、赤枠内右下にある保存をクリックします。
これで完了です☺︎
ホームページ上を確認すると、サイドバーにツイッターのタイムラインが表示されているはずです！

 

%e3%83%84%e3%82%a4%e3%83%83%e3%82%bf%e3%83%bc%ef%bc%92%ef%bc%92

先ほどのテキストで”ツイッター”とタイトルを入れると、その様にタイトルが表示されます。
ツイッターのサイズはデフォルトのままだと⇧の状態です。
かなり下まで長いです笑

 

どうでしょうか？

うまくツイッターの表示はできたでしょうか？

お付き合いあるがとうございました*\(^o^)/*

ご苦労様でしたm(_ _)m

スポンサーリンク

ABOUTこの記事をかいた人

in the early afternoon編集部

in the early afternoon編集部です。 みなさんに送っていただいた自分のスキ！が見つかるような情報をお送りしています。

コメントを残す

RECOMMENDこちらの記事も人気です。