ブログでtwitterのタイムラインウィジェットをカスタマイズする方法

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。

 

今回は、ワードプレスでtwitterのタイムラインウィジェットを表示させる方法をご紹介します。

完成イメージはこちら↓

twitter タイムライン

 

場所は、サイドバーやフッター部分など好きなところに表示させられます。

画像はフッターに表示させています。

 

twitterは、僕らが普段使っている「Google・Yahoo」などの代わりに、検索ツールとして利用する人もいるので、その特徴を活かして自分が記事にする情報をブログ以外で発信できるツールとして非常に有効です。

twitterとブログを使えば、相互集客につながる可能性も高まりますね。

 

twitter関連の操作

用意するもの:twitterの@から始まるユーザー名

まずは、「https://publish.twitter.com/」へアクセスします。

twitter タイムライン

空欄にあなたのユーザー名をコピペし、エンターキーを押します。

貼り付けのショートカットキー

Windows:Ctrl+V
Mac:command+V

 

すると、以下のように表示方法を聞かれますので、左側を選択。

URLが出てくるので、「コードをコピーする」ボタンを押してコピーしましょう。

この後、ここでコピーしたコードをワードプレスにコピペしていくのですが、
デフォルトのままでは、高さの制限がない状態でコードが作成されてしまっています。

ちなみに、こちらがそのままコピペした場合です↓

twitter タイムライン

 

長すぎて、収まりきっていない感じがありますね(笑)。
バランスを考えて、ちょうどいい高さを探していきましょう。

高さを変えるには、先ほどの画面で「カスタマイズオプションを設定する」のところから、
このような画面で高さを選択できるようになっています。

twitter タイムライン

この部分で、「Height(px)」で任意の数値を入力します。
僕はフッター部分のコンテンツと合うように600にしました。

となりの「Width(px)」は、レスポンシブデザインのテーマを利用している場合は基本入力しなくていいです。

変に入力すると、幅を超えてしまっていますなどの、
サーチコンソールからエラーが来てしまう可能性もあるからです。

ここはテーマのCSSにお任せしましょう^^

 

これで、「https://publish.twitter.com/」での操作は終了です。

 

ワードプレスでの操作

ここからは、ワードプレスの操作に移ります。

ブログのワードプレスを開いて、「外観」>「ウィジェット」へ。

 

twitter タイムライン

利用できるウィジェット内の「カスタムHTML」を、表示させたいウィジェットエリアにドラッグしましょう。

僕のブログ・STORKでは、フッター(右)にしています。
サイドバーに表示させたい場合は、サイドバーエリアにカスタムHTMLをドラッグしましょう。

内容の空欄に、先ほどコピーしたコードを貼り付けて保存します。

 

これでタイムラインを埋め込むことができます。

 

コードの意味

さて、先ほど高さのみカスタマイズしましたが、
コード上どこが変更されたかだけお話ししますね。

コピーしたURLがこちらでしたね↓

<a class="twitter-timeline" href="【あなたのtwitterのURL】"data-height="600">Tweets by【あなたのアカウント名】</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

赤文字の「data-height="600"」の部分が、高さを指定しているコードです。

長いままのコードにはこれがありませんでした。

 

だいぶ表示されるサイズが変わりますね。

読者の方に写真を含めた投稿をたくさん見て欲しいなら、うまく写真が表示される高さに調整するのも面白いと思います^^

 

この記事を見てくださった方からご質問をいただきました

そして実は、この記事を見てくださった「ニックさん」という方から、
twitterのタイムラインのカスタマイズのご質問をいただきました。

自分と複数のアカウントのツイートをタイムラインにする応用編です↓

合わせて読みたい

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。   今回は、[…]

twitter タイムライン 複数

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG