jack-hana’s blog

趣味など好きな事を語っていきます

ツイッターをはてなブログに埋め込んでみた。

最近ブログを始めてアマゾンで購入した

はてなブログパーフェクトブック)で勉強している。

 

わかりやすい図解説明で本を見ながら勉強している。

昨日はツイッターをブログに埋め込む作業をしてみた。

余り更新をしていないツイッターだが

本を見ながら何とか埋め込む事が出来た。 

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 

 

 

 

埋め込みコードを作る


Twitterのタイムラインを埋め込むためのコードを作ります。

↓「Twitter publish」のサイトへGO

https://publish.twitter.com/

 

①空欄にTwitterのURLを入力して「enter」を押します。

f:id:jack-hana:20181018173432j:image

注:アカウントではありません。

URLです。

わたしのサイトだと↓こちら

https://twitter.com/oke_hanachan

 

②右の「タイムライン」を選びます。

f:id:jack-hana:20181018173459p:image

ここでコピーコードをクリックする前に

サイズや色をカスタマイズしたい場合は

「set customization options.」をクリックしてください。

以下の画面が表示されます。

f:id:jack-hana:20181018190414j:image

カスタマイズ項目が表示されました。

f:id:jack-hana:20181018173640p:image

◾️Height           高さ(px)
◾️Width            幅(px)
◾️Light             背景色(白or黒

◾️link color       リンクの色
◾️Automatic      言語

自分なりのタイムラインが完成したら「Update」を選択しましょう。

ちなみに今回は、「500 * 280」のTwitterタイムラインを作成してみました。

f:id:jack-hana:20181018173613j:image

②の画像をクリックすると、下に生成されたコードが表示されます。

「Copy Code」をクリックして、コピーします。

以下の画面が表示されます。

f:id:jack-hana:20181018184535j:image

 

ブログにコードを貼り付ける


 ①ダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」をクリックします。

 ②一番下にある「+モジュールを追加」をクリック。

f:id:jack-hana:20181018184556j:image

③</>HTMLをクリック

f:id:jack-hana:20181018185648j:image

④タイトルを入力

 「twitterタイムライン」とか「フォローしてね」とか、好きなタイトルを入力してください。

⑤コピーしたコードを貼り付けます。

f:id:jack-hana:20181018185719j:image

⑥「適用」をクリックして完了です。

 

ツイッターが表示されます。

 

f:id:jack-hana:20181018184637j:image

 

Twitterを設置しておくことで、フォロー・シェアされる機会が増えるので、

自分のTwitterアカウントがある方は設置してみてはいかがでしょうか。