ブログのテーマでザ・トールを使っていて、自分のTwitterのタイムラインを埋め込みたい
という時にブログにTwitterのタイムラインを埋め込む方法をまとめます。
thethorザトールで自分のTwitterタイムラインをブログに埋め込む方法
流れを大まかに言いますと
1タイムラインのコードを作る
2ブログの表示したい場所にコピぺする
この手順です。
TwitterPublishにアクセスする
まず、TwitterPublishにアクセスします。
TwitterPublish←にアクセスします。
少し下にスクロールして
「EmbeddedTimeline」の文字が書かれたところの図をクリックします。
次に自分のTwitterアカウントのURLをコピーします。
ここではホームのURLではなく、アカウントのURLをコピーします。
自分のアカウントのマークをクリックすると自分のツイートが下にずらーと出てくる画面があります。
この画面のURLをコピーします。
例)https://twitter.com/741on012
先ほどコピーした自分のアカウントのURLを貼りつけます。
貼りつけた後は「Preview」ボタンをクリックします。
確認画面が表示されますので、ここで表示されるサイズや色の調整ができます。
タイムラインのデザインをカスタマイズします
青文字の「set customization nptions.」をクリックします。
What size would you like your timeline to be？【サイズはどうする？】
Height(px)：高さ
わたしは500で設定しました。
Width(px)：幅
わたしは350で設定しました。
How would you like this to look？【色はどうする？】
Light(明るい・白いノーマルモード)
Dark(暗い・黒いダークモード)
上記の2つから選べます。
What language would you like to display this in？【言語設定】
タイムラインの表示言語を設定できます。
特にこだわりがない場合はAutomaticでOK。
わたしはAutomaticを選択しました。
選択ができたら、「Update」をクリックして完了です。
タイムラインの埋め込みコードをコピーする
カスタマイズの画面で、カスタマイズも完了したら「Copy Code」をクリックします。
ブログのウィジェットに貼りつける
コピーしたタイムラインの埋め込みコードをブログのウィジェットに貼りつけます。
サイドバーにタイムラインを設置する流れをここからは説明していきます。
外観→カスタマイズ→ウィジェット
ここからサイドバーエリア
ウィジェットを追加でテキストを選びます。
いきなりウィジェットの画面で、左画面にある「テキスト」をサイドバーエリアの挿入したい箇所にドラッグ＆ドロップしても挿入できます。
ウィジェット追加をクリックした後のことです。
・［THE］スタイルテキスト
・テキスト
・カスタムHTML
3つのうちどれかを選びます。
・［THE］スタイルテキスト そのままコードを貼りつける
・テキスト ビジュアルではなくテキストに貼りつける
・カスタムHTML そのまま貼り付ける
3つのうちどれを選んでもしっかり、タイムラインの埋め込みはできます。
テキストを選択した場合は、テキストの方に貼りつけてくださいね。
ここまでできたら「公開」をクリックします。
「公開」をクリックした後、確認してみてください。
Twitterのタイムラインをブログに挿入は「THETHOR」以外のテーマの場合でもだいたい同じだと思います。
また、別のテーマを使用しているブログでも自分のTwitterタイムラインの埋め込みをしてみようと思います。
Twitterのタイムラインをブログに埋め込む方法はどのテーマでも基本いっしょ
Twitterのタイムラインをブログに埋め込む作業を他のテーマでもやってみました。
TwitterPublish←にアクセスします。
↓
少し下にスクロールして
「EmbeddedTimeline」の文字が書かれたところの図をクリックします。
↓
次に自分のTwitterアカウントのURLをコピーします。
↓
先ほどコピーした自分のアカウントのURLを貼りつけます。
貼りつけた後は「Preview」ボタンをクリックします。
↓
青文字の「set customization nptions.」をクリックします。
選択ができたら、「Update」をクリックします。
↓
カスタマイズも完了したら「Copy Code」をクリックします。
↓
コピーしたタイムラインの埋め込みコードをブログのウィジェットに貼りつけます。
ウィジェットのサイドなど埋め込みしたい場所のテキストにコードを貼りつけることで
Twitterのタイムラインを埋め込むことができました。
