WordPress苦手主婦のためのWordPress専門コミュニティ「MasterPress®︎」詳細はこちら

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 と書かれています。

するとサイズや色の選択ができる画面が表示されます。希望のサイズとか見た目などを選択して設定してください。

参考までに、わたしがサイドバーにTwitterを埋め込みするときの設定をご紹介します。

基本的にサイズくらいしか変更していません。縦450、横400という設定です。

たまに、言語の変更をするくらいです。
例えば、デフォルトの英語にして、ツイートと書かれた部分を英語にするとか・・・

設定が終わったら、「更新」をクリックします。

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

貼り付けるのは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のメニュー一覧から「外観」にマウスを合わせて「ウィジェット」を選びます。

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

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

この利用できるウィジェットの中から、「カスタムHTML」ウィジェットを追加します。

カスタムHTMLが開きますので、コピーしたコードを貼り付けしてください。

そして保存すると・・・

この様にサイドバーに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”」の後ろを変更していきます。

<a class=”twitter-timeline” data-width=”300″ data-height=”800

幅: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の基本から大事なポイントなど、分かりやすく丁寧に配信中!

メルマガでは、これからWordPressブログを始めたいと思っているパソコン苦手な主婦のために、ワードプレスブログの作り方をお届けしています。
メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。 ●WordPressコミュニティ『MasterPress』運営
●福岡副業カレッジブログ講師
SEO検定3級
●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。
詳しいプロフィールはこちら>>