こんにちは♪ 外注準備が火曜から本格的に始まるひなた(@hinata_ad_55 )です(*‘ω‘ *)
わたくし”ひなた”は、Twitterでこちらの実践記ブログを公開することにしました。
じゃぁこっちでも連携させてもいいんじゃない?と思ったので、ブログにTwitterを埋め込んでみました!!やってみると、案外簡単!
この方法をなるべくわかりやすく まとめてみますので(初めてのこころみ)
ブログにTwitterのタイムラインを埋め込んでみたいあなたは参考にしてみてくださいね♪
Twitterのタイムラインを埋め込むっていうのは↓↓
こんな風にブログのサイドバーに自分のつぶやきが表示されることですね!
![](https://hinata-ad.com/wp-content/uploads/2018/09/00998b4712d38dc64db4090315ad299e.png)
さぁ 早速行ってみよ~♪
Twitterタイムラインのコードを取得する方法
1:まずは自分のTwitterアカウントにログインしましょう。
自分のページを表示します。
自分のページが表示できたら、URLをコピーしましょう。
「https://twitter.com/【あなたのTwitterID】」のURLです。
![](https://hinata-ad.com/wp-content/uploads/2018/09/37c9ccade9b571d4584c61cfd81549bc.png)
2:タイムラインのコードを作成
https://publish.twitter.com/#にアクセスしてこの画面を出します。
なんともおシャンティな画面が出てきます。(照)
![](https://hinata-ad.com/wp-content/uploads/2018/09/57782207bbb4f0c1ee781694af8495d6.png)
ここに先ほどコピーしたURLを貼り付けます。
![](https://hinata-ad.com/wp-content/uploads/2018/09/f09ef00a6046d481dd6acc647c1d9e1c.png)
貼り付けたら、貼り付けたすぐ隣の ”→” をクリックすると上記の画面になります。
下に二つの画像がポッと出てくるので、左側をタップしましょう♪
(左側はタイムラインコードの生成 右側はフォローボタンの生成です)
![](https://hinata-ad.com/wp-content/uploads/2018/09/5706a97cf5e84d058ae7c64a1477cc40.png)
するとこの画像の下に 埋め込むTwitterタイムラインのプレビュー画面がでてきます♪
それらしいものがでてきた!んがしかし なんだかデカくない!?
というわけで下の赤い枠をクリックしてカスタマイズします♪
![](https://hinata-ad.com/wp-content/uploads/2018/09/37d4fa9334be969caf96f8fe403228ab.png)
カスタマイズ画面はこちら。
※一番最後の言語設定は、デフォルトのままでok!”Automatic”と書かれていますが、それぞれの利用者の言語に自動的に合わせてくれます。
- 高さ
- 幅
- 背景色
- リンク文字色
- 言語設定
をカスタマイズできますが、高さは400~600くらい(それ以上だと長すぎる)幅は300がちょうどよいと思います♡
ただ、使っているテンプレートによってもウィジェットの幅が違うので 300で入れてみて微調整してみてくださいね♪
ちなみにカスタマイズしてみたものがコチラ。
![](https://hinata-ad.com/wp-content/uploads/2018/09/09c9a4478b9325e212657c9752139817.png)
- 高さ 500
- 幅300
- 背景色 ダーク
あとはデフォルトですが、サイトのカラーにあわせて背景色は選ぶと良さそうですね♪私のブログに 真っ黒のタイムラインはちょっと合わなさそうなのでやめておきますw
※このブログに実際に挿入しているカスタマイズは 高さ500 幅300 です(*^^)v
さて、カスタマイズができたら Updateボタンをクリック!
![](https://hinata-ad.com/wp-content/uploads/2018/09/9b93663eb69256b4a0846fb5ab270278.png)
カスタマイズ画面が消えてコードが表示されるので そこをコピーするのだ!
![](https://hinata-ad.com/wp-content/uploads/2018/09/e756fa04200a4225291ae1c1603af6e7.png)
コピーを押すとこの画面がでてきます♪
![](https://hinata-ad.com/wp-content/uploads/2018/09/72993d1011cdb7259b8dfeccedf9cd2e.png)
これでコードの生成&コピーは完了です! はいっ 次!!!
ワードプレスに貼りつける方法!
今度はワードプレスに貼りつけます♪ 超簡単だから大丈夫!!!
ダッシュボードを開き、外観→ウィジェットと進みましょう♪
![](https://hinata-ad.com/wp-content/uploads/2018/09/ba7ddf6a482d0b4965f6061b78227594.png)
![](https://hinata-ad.com/wp-content/uploads/2018/09/53af9c8b420b27969ad360a0f599d98a.png)
ウィジェットの中の”テキスト”を 右側のサイドバーの入れたい場所にドラッグします。
ドラッグしたら、テキスト画面にさっきコピーしたコードを貼りつけますよ!!ビジュアルに貼りつけてしまうと出てこないので気を付けて!!!
![](https://hinata-ad.com/wp-content/uploads/2018/09/abd651b405d5290297c0fec73a0573f2.png)
これで作業は完了です!お疲れさまでした♡
全部できたら、サイトをみて確認してみてくださいね!出来上がりに震えること間違いなし。(〃´∪`〃)ゞ
やってみると案外簡単でした!初めてやるときって戸惑いますよね。
私も
「全部英語表記やめれーーーーΣ(゚Д゚;≡;゚д゚)」と戸惑ったのは内緒です。
まとめ
なんかブログにTwitterのタイムラインが掲載されているのって単純にかっこいーー!なんて思った私なのです。
このブログにたどり着いてくれた人が、一人でも私に興味を持ってくれて
たった一人でもフォローしてくれたらこんなに幸せなことはないんではなかろうか。
そんな淡い期待を抱きつつ そっとウィジェットに置いています(*ノωノ)
さいごに
えっ外注まだやってなかったの!?!??!?っていうツッコミが飛んできたッ
Σ(゚Д゚;≡;゚д゚)
先週あれだけ、次の実践記までに必ず。。。。なんて言ってたくせに!?
![](https://hinata-ad.com/wp-content/uploads/2018/09/2ee12ea6a0d0e55fd36deca2b00f7ac4-320x180.jpg)
いや 言い訳するとですねっ
本気で外注をやるってことは =現金が飛び立っていく わけですよ。
手あたり次第にがむしゃらにやっても、現金だけが湯水のように溶けでていくだけになりかねん!と 自分をよく知る私だからこそ一度ブレーキをかけました。
そして 外注のための教材を購入したのです(*‘ω‘ *)
急がば回れってな!!!(なんか違う)
というわけで、明日から!!!!本気の外注勉強始めます((ノェ`*)っ))タシタシ