WordPress

Twitterタイムラインの埋め込み方法とカスタマイズ

更新日:

こんにちは。ゆかです。

わたしがサイトを作るときに調べたことを備忘録として書きます。

 

ブログやサイトにTwitterのタイムラインをを埋め込んでいる人はたくさんいるかと思います。

わたしのブログも、右サイドバー(PC表示の場合)に埋め込んでいます。

今回は、これの埋め込み方法とカスタマイズの解説です。

 

埋め込みコードを取得しよう

 

まずはこちらのリンクをクリックします。

https://publish.twitter.com/#

すると下記のような画面へジャンプします。

「何を埋め込みたいですか?」と書かれていますが、おそらく英語になっているかと思います。(What would you like to embed?)

自分のTwitterのURLを白枠に入力します。

ちなみにわたしは、https://twitter.com/yu_ka2018 となります。

次に表示オプションを選択します。今回は、タイムラインを埋め込みたいので、左を選択してください。

こちらも日本語ですが、おそらく Embedded timeline と書かれていると思います。

 

カスタマイズしてみよう

この画面にカスタマイズオプション設定があるのでそちらをクリックします。

これも英語表記だと set customization options と書かれています。

するとサイズや色の選択ができます。
更新すると…

コードが表示されますのでこれをコピーして貼り付けます。

 

貼り付けるのはHTMLコードを自由に貼り付けできるようなところであれば、どこでも大丈夫です。

 

サイドバーに貼り付けるには?

埋め込みコードをコピーします。

<a class="twitter-timeline" data-width="300" data-height="800" data-link-color="#FAB81E" href="https://twitter.com/yu_ka2018?ref_src=twsrc%5Etfw">Tweets by yu_ka2018</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そしたら、貼り付け場所が分からないと貼れないので、わたしがサイドバーに貼り付けた場所でご説明します。

まずは、WordPressの外観を選びます。

そしてその中のウィジェットを選択します。

これがいまわたしの使っているテンプレート内のウィジェットになります。

ここから使いたいウィジェットを追加することができます。

この利用できるウィジェットの中から自由入力欄のウィジェットを追加します。

自由入力内に貼り付けします。

そして保存すると・・・

この様にサイドバーにTwitterタイムラインが表示されるようになります。

 

追伸・タグでカスタマイズする方法

取得したコードを書き換えることでもカスタマイズすることができます。どの部分に追加するのか、書き換えるのかをご説明します。

タグで変更したい方はやってみてください。

取得したコードはこれです。

<a class="twitter-timeline" data-width="300" data-height="800" data-link-color="#FAB81E" href="https://twitter.com/yu_ka2018?ref_src=twsrc%5Etfw">Tweets by yu_ka2018</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

サイズ変更

幅と高さの調整をしたいときは、「"twitter-timeline"」の後ろを変更していきます。

幅:width="300"
高さ:height="800"

数字の部分を変更するとサイズが変わります。

 

リンク色の変更

TwitterにのせているURLのカラーをカスタマイズできます。「data-link-color="#FAB81E"」の部分の#・・・を変更します。

カラー番号はこちらを参考にされてみてください。⇒ WEB色見本

 

テーマ色の変更

最初は明るいになっています。「data-theme="dark"」を追加すると暗いに変更できます。

<a class="twitter-timeline" data-width="300" data-height="800" data-link-color="#FAB81E" data-theme="dark" href="https://twitter.com/yu_ka2018?ref_src=twsrc%5Etfw">Tweets by yu_ka2018</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ちなみに暗くするとこんな感じです。

わたしのブログのイメージとは違うので明るいにしておきます。

 

こんな感じでタグでもカスタマイズはたくさんできますので、ぜひご参考にされてください。

 

【お気軽にお問い合わせください】

【お気軽にお問い合わせください】

わたしは、初心者さんへワードプレスのブログ作成方法を教えたり代行作成を行っています。

 

スポンサーリンク




-WordPress
-, ,

Copyright© 初心者のパート主婦が副業収入を得た方法! , 2019 All Rights Reserved Powered by STINGER.