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

※この記事は2019年2月16日に内容が更新されました。

おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

僕の詳しいプロフィールと、このブログについてはこちら

 

今回は、ワードプレスで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」を、表示させたいウィジェットエリアにドラッグしましょう。

僕のブログ・ストークでは、フッター(右)にしています。
サイドバーに表示させたい場合は、サイドバーエリアにカスタム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のタイムラインのカスタマイズのご質問をいただきました。

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

【仕様変更】twitterで複数アカウントのツイートをタイムラインに表示させる方法

2019.02.23

ブログで感じる不安から解放されるために必要なこと

どんなブログを作ればいいのか。

どんな内容の記事を書けばいいのか。

ブログの完成形が見えないから不安で、とりあえず常に記事数を増やさないとと思っている。

ブログを作るからには収益化したい。けど、具体的にどうすればいいかがわからない。

ワードプレスの設定もやらなきゃだけど、それに時間を取られてたら記事が更新できない。

自分が悩んでいるデザインの解決策がどうやって検索したら答えが出てくるのかも、よくわからない。

あなたは、ブログを作っていて何かしらこのような不安を感じたことはありませんか?

そんなブログの不安をなくす解決策とは?

必見です!!


コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください