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

おかぴーおかぴー

こんにちは、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デザイナーのおかぴーです! プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^   今回は、ブログでtwit[…]

twitter タイムライン 複数

デザイン効果と組み合わせて、最適な収益化方法を見つけよう

 

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

興味がある方は、ぜひこちらをご覧ください〜

↓↓↓

あなたに最適な収益化方法を見つけてみませんか?

>WPテーマ「THE THOR」でリニューアル!

WPテーマ「THE THOR」でリニューアル!

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

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

CTR IMG