サイト運営

ツイッターをワードプレスへ埋め込む方法とデザインのカスタマイズの仕方

  /
ワードプレスのツイッターの埋め込みウィジェットの変更方法をご紹介!!

こんにちは！(うめぽん)です。

今回はツイッターの埋め込みウィジェットの設置方法と変更方法をご紹介していきます!!!

ツイッターの埋め込みウィジェットのコードの作り方

自分のツイッターページに飛びます、自分のツイッターアイコンをクリックし設定とプライバシーを選択
ツイッター埋め込みのカスタマイズの説明その1

ウィジェットを選択
ツイッター埋め込みのカスタマイズの説明その2

新規作成→プロフィールを選択
ツイッター埋め込みのカスタマイズの説明その3

自分のツイッターサイトのアドレスをコピペして貼り付け
ツイッター埋め込みのカスタマイズの説明その4

これで完成！！コピペしてください
ツイッター埋め込みのカスタマイズの説明その5

ツイッターの埋め込みをする方法

まずはワードプレスの管理画面から左にある外観>カスタマイズに飛びます
ツイッター埋め込みのカスタマイズの説明その6

ウィジェットを選びサイドバーを選びます。
（ここに関しては各テーマで対応する箇所は変わりますが今回はJINでのやり方です、他のテーマでもこの方法はやれます）
ツイッター埋め込みのカスタマイズの説明その7
ツイッター埋め込みのカスタマイズの説明その8

そしてカスタムhtmlを選択して埋め込みます(ドラッグアンドドロップでできます)
ツイッター埋め込みのカスタマイズの説明その9

さきほど作ったツイッターの埋め込みコードをカスタムHTMLの中に挿入し登録
ツイッター埋め込みのカスタマイズの説明その10これで登録完了です!!

ツイッターのウィジェットのカスタマイズ

<a class=”twitter-timeline” href=”https://twitter.com/NAMEID?ref_src=twsrc%5Etfw”>Tweets by NAMEID</a>

上記はサンプルですがこれを使ってカスタマイズをしていこうと思います。 ###の部分に以下のコードを貼り付ければ反応します NAMEID部分は貴方のツイッターIDです

ツイッター埋め込みのカスタマイズの幅のサイズの変更方法

width=”200”
※ツイッター埋め込みのカスタマイズの幅をカスタマイズします、数値の部分を変えればかわります。

ツイッター埋め込みのカスタマイズの高さのサイズの変更方法

height=”300″
※ツイッター埋め込みのカスタマイズのウィジェットの高さをカスタマイズします、数値の部分を変えればかわります
とはいえ大きすぎると邪魔くさいので、どんなに高くても500pxほどでしょうか

ツイッター埋め込みのカスタマイズのつぶやき表示件数の変更方法

data-tweet-limit=”3″
1～20件の間で、表示する件数を固定することができます。
今回に「3」にしてますが、その数値を変えればカスタマイズできます。
個人的なおすすめは3~5でしょうか、あまり多いとスマホの時長くなってしまいますので。

ツイッター埋め込みのカスタマイズのカラーテーマの変更方法

data-theme=”light”
※白くします デフォルトはこちらのはずです。
data-theme=”dark”
※黒くします

ツイッター埋め込みのカスタマイズのヘッダー部分の変更方法

data-chrome=”noheader”
※「●●さんのツイート」と書かれている部分を無くします。
これに関しては好みでしょうか・・。あってもなくてもいいような。

ツイッター埋め込みのカスタマイズのフッター部分の変更方法

data-chrome=”nofooter”
※埋め込む twitterで表示が消え去ります

ツイッター埋め込みのカスタマイズのボーダー部分の変更方法

data-chrome=”noborders”
※線が消えます

ツイッター埋め込みのカスタマイズのスクロールバーの変更方法

data-chrome=”noscrollbar”
※スクロールバーが消えます

ツイッター埋め込みのカスタマイズの背景色の変更方法

data-chrome=”transparent”
※背景色がなくなります。白だからよくわからないかな・・

ツイッター埋め込みのカスタマイズのリンクの色の変更方法

data-link-color=”#FF0000″を追加いたします
上のコードだと赤になります。

スマホ版でツイッター埋め込みが貫通する場合の対処法

埋め込み時に幅を100%指定するとiphoneでは無事貫通してしまいますので
指定する幅は必ず固定値にしましょう!!
下の埋め込みは幅を2000にしてますが治ります

ツイッター埋め込みのカスタマイズまとめ

いかがでしたでしょうか、ツイッターの細かいデザイン部分の変更と設置の仕方を紹介してみました。
お役にたてれば幸いです。

RELATED POST