北海道は札幌より夏はアウトドア、冬は薪ストーブ情報をお届け! ※現在改装中でお見苦しいと思いますがご了承願います※
ベッドの上で開かれたノートパソコン

WordPressブログでTwitterタイムラインを埋め込み表示させる方法

ベッドの上で開かれたノートパソコン

ブログの更新は可能な限り行なっているつもりですが、記事を書くと言うことがここまで時間を要する事とは思ってもいませんでした笑。そこで、ちゃんとブログ作っている人が「まだ記事書いてないけどアクティブだよ(生きてる)!」と、いうことを感じて貰えるようにTwitterをトップページに表示させてみました。

因みに2016年頃まではTwitterのログインページから、直接埋め込み操作が出来た様子でしたが2018年9月現在では操作不可能となっています。


超初心者でも出来たTwitterを表示させるまでの流れ

  1. Twitter Publishページにアクセス
  2. 自身のアカウントURLを指定箇所に貼り付け
  3. 埋め込み用のレイアウトを作成
  4. レイアウトを確定しコードをコピー
  5. WordPressの「外観」でウィジェットを選択
  6. カスタムHTMLにコピーしたコードをコピペ
  7. レイアウトを調節して完成!

と、いった流れです。簡単でしょ?笑
そういう私はブログ開設したものの「コード?」「メタ?タグ?」正直ま〜〜〜ったく分かりません!本当に超初心者です、文字が打てるだけです笑 そんな私でも出来たので絶対に誰でも出来ます!!


1.Twitter Publishにアクセス

まずはTwitterレイアウト作成の為、こちらのサイトにアクセスしましょう。
ここに来てしまえば出来たも同然レベルです。

Twitter Publish: https://publish.twitter.com

こんなトップページが表示されましたね。
英語のサイトなので逃げ出したくなる気持ちを抑えましょう、私の様な超初心者は英語オンリーサイトというだけで「理解の範疇」を超える為、拒否反応が出ます。embedってなんだよ!エンベッド!?聞いたこと無いわ!(調べた所“埋め込み”という意味でした)


2.自身のアカウントURLを指定箇所に貼り付け

では、続きまして埋め込みたいTwitterアカウントのURLをTwitter Publishのトップページ(上の画像の白い部分)に入力しましょう。私自身スマホでしかTwitterを使っていなかったので、自分自身のアドレスがある事自体知りませんでした…汗 知ってました??

私のアカウントは「zeniyacrafts」ですのでこの場合のURLは…

 https://twitter.com/zeniyacrafts

となります。したがって//twitter.com/○○○  の様に○の所にアカウント名を入力すればオッケーです。
因みにアカウントがわからない方は自身のTwitterホーム画面を確認すると、アイコンの下に@の付いた英数字の表記がありますので、それがアカウントです。


3.埋め込み用のレイアウトを作成

では続いて実際のブログに表示されるレイアウトを構成していきます。
アカウントの入力を行いURLを読み込ませると…下記の様な表示が現れます。後で選択し直せますので、どちらが自身に合っているのか確認してみましょう。

今回は私は左の“embedded Timeline”を選択しました。
そうすると「いきなり」自分のつぶやきがドーンと表示されます(下の画像参照)。お〜!出来たと思ってはいけません。
ここから本題のレイアウトセッティングに移ります。

英語記載の“set customization options”をクリックしましょう、そうするとレイアウトセッティング画面が追表示されますので、それぞれ好みの大きさや色にしましょう。決まった段階で“Update”をクリックします。


高さ:400
横幅:300
①look:Light    ②Default link color
③language: Automatic

■高さ■
初期の設定しない状態だと、今までのツイートがずら〜っと縦に表示できるだけ表示されてしまいますので高さは必ず調整しましょう。私の場合はトップページの表示件数を4件にしてまして、ウィジェットと記事の高さを合わせると400でほぼ綺麗に収まってます。この辺は一旦埋め込んでから調節できますので、一度適当な数字で入れて見るのも良いと思います。

■横幅■
ちなみに私のブログはTCD社のMAGを使用しているのですが、レイアウトの横幅を色々試してみた所、後述するWORDPRESSのウィジェットでは自動的に横幅を整えてくれるので、300で問題ありませんでした。レイアウト構成上の最小値は220との事です。その場合はトップページの2カラム表示だと細く表示されてしまうので、300で綺麗に収まった形となります。

■①■
見た目の部分ですね、標準はLightでスタンダードで良く目にするカラーリングです。一方はDarkで背景が黒いイメージとなっており、注視するような印象を受けます。
■②■
ツイート上のリンクされている部分の文字色です、これもレイアウトを確認しながら変更が出来ます。
■③■
言語の部分です。Japaneseもありますが試しにAutomaticで作成したところ、私が見ている表示上では問題ない様子です。しかしながら日本語を選択しておいた方が無難かと思います。


4.レイアウトを確認しコードをコピー

レイアウトが確定したら下記の参照画像の様に、コード記載欄に自動的にレイアウト構成したもののコードが記載されます。これをコピーするのですが横にある“Copy Code”をクリックするだけでOKです、自動的にコピーされます。※因みに画面キャプチャをした時は見た目はダークにしてました。


5.WordPressの「外観」でウィジェットを選択

続いてWordPressの編集画面に移ります、私はどこに何があるのか覚えきれず未だスマートに更新が出来ません(笑)それは置いておきまして「外観」メニューにある「ウィジェット」を選択します。
ウィジェット内の「カスタムHTML」をトップページの項目にドラックアンドドロップで追加します。恐らくお分かりの方が多いと思いますが表示したい順序で、ウィジェットの昇順を決めていきます。今回はトップページ内のプロフィール下に表示したいので、該当箇所にカスタムHTMLのウィジェットを埋め込みます。


6.カスタムHTMLにコピーしたコードをコピペ

先ほどTwitter Publishのコピーされているコードを維持して、カスタムHTMLの内容欄にそのままコピペします。私には何が書かれているのかサッパリです!タイトル欄に記載した文字はウィジェットの項目欄として表記されますので、今回は捻りもなく「Twitter」としました(独り言…とかにしようかな)。

入力が終わったら忘れずに完了を押して終わりです!
カスタムHTML内にある高さ(data-height)・横幅(width)の数字を好きな数値にする事で直接スタイルを編集できますので、実際の表示画面を見ながら調節しましょう。


7.レイアウトを調整して完成!

色を変えたり、サイズ実際の表示をみながら調節していきます。
最初は見た目はダークの方が締まった感じがして良いかな〜と、思ったのですが全体を見るとやっぱり白基調で行こうかな〜とちょこちょこ調整。今後もブログの全体感は調整していきますけど、やっぱり自分で出来るって良いですよね。これでブログも少し活気が出るでしょう!!(楽観的w)

初めてブログカスタマイズの手法を書いてみました、とても稚拙な部分もあると思いますが今後も自分が分からない事をまとめて行きます。
最後まで読んでいただきありがとうございました!! 肩こったーー!!!



Sponsor link