サイト運営

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

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

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

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

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

自分のツイッターページに飛びます、自分のツイッターアイコンをクリックし設定とプライバシーを選択
説明その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にしてますが治ります

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

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