ぶろぐライフ~パソコン苦手なブログ初心者さんを全力でサポート~

パソコンは苦手だけどブログを始めたい人を全力で応援!15年間パソコン講師を勤めた私が苦手克服のお手伝いをします♪

【はてなブログ】サイドバーや記事内にツイッターを埋め込む

ブログにTwitterを埋め込む

【ブログ】にTwitterが表示されてるモノを見た事がありますか?

自分もTwitterをブログのサイドバーや記事内に表示させたいと思っていませんか?

 

難しくはないのですが正直ちょっとややこしいです。

でも、この記事でお届けする手順でやっていけばTwitterをブログ内に表示できるようになります。

 

この記事では【サイドバー】と【記事内】にTwitterを表示させる2つの方法をお届けします。

 

 

- スポンサーリンク -  

 

【はてなブログ】サイドバーや記事内にツイッターを埋め込む

Twitterを【サイドバーに表示する】と【記事内に表示する】の2つ方法をお届けします。

初心者さんには難しいと感じると思いますが、手順通りすれば大丈夫です!

 

サイドバーにTwitter埋め込む準備

サイドバーにTwitterを埋め込むとは、

Twitterに投稿すればリアルタイムで表示される』と言う事です。

 

リアルタイムで表示させるには必要な物が2つあります。

手に入れに行きましょう!

 埋め込む必需品 

■埋め込む為の必需品■

  • 自分のTwitterアカウントURL取得
  • 【Twitter Publish】で埋め込みコード取得
 
STEP
TwitterアカウントURL取得
自分のTwitterからURL取得しましょう

TwitterアカントURL取得

自分のアイコンをクリックするとトップに飛びます。

私のTwitter URLは https://twitter.com/maysun_53
STEP
埋め込みコード取得
【Twitter Publish】に行こう【ここからGO
【TwitterアカウントURL貼付け】ー【→】

Twitter貼付けコード取得 Twitter Publish

STEP
ディスプレイスタイル
左【Embedded Timeline】クリック

Twitter貼付けコード取得 Twitter Publish

STEP
【コード】をコピー
デフォルトで良い場合【Copy Code】
*カスタマイズしたい人は【set customization options.】をクリック
(カスタマイズ内容:高さ・横幅・明るさ・言語)

Twitter貼付けコード取得 Twitter Publish

 

これで【コード】を貼り付ける準備は完了です。

 

Twitterをサイドバーに表示

さぁ、サイドバーにコードを貼りつけましょう!

 

 
STEP
コードを貼りつけよう
ダッシュボードー【デザイン】ー【スパナ】ー【サイドバー】

サイドバーにTwitterコード貼り付け

STEP
モジュール追加

サイドバーにTwitterコード貼り付け

STEP
<HTML>貼付け

サイドバーにTwitterコード貼り付け

【適用】を押しましょう。
STEP
【変更を保存する】

サイドバーにTwitterコード貼り付け

コレを忘れると元も子もないです!

 

これでサイドバーにTwitterに投稿すればリアルタイムで表示されるようになります。

 

 サイドバー項目並び替え 

■Twitter表示の位置変更■
マウスポインターが【双方向矢印】になればドラッグで移動

サイドバーモジュール移動

 

Twitterを記事内に表示

では、次にブログの記事内にTwitterを表示させるやり方です。

【記事内】に表示させるとは【特定のツイッター記事】を載せる事です。

 

サイドバーに載せるより簡単です。

 

 
STEP
ツイートコード取得
【埋め込みたいツイート】ー【・・・】

Twitter記事内貼付けコード取得

STEP
コード取得

【</>ツイートを埋め込む】

Twitter記事内貼付けコード取得

STEP
コード取得
【Copy Code】

Twitter記事内貼付けコード取得

STEP
HTML編集に貼り付け
表示したい場所に貼り付けましょう(:HTML編集

T

STEP
こんな感じ

 

 確認してみよう! 

見えないぞ・・・
【編集見たまま】では表示が思ってたのと違う!

【プレビュー】に切り替えて確認してみてね

Twitter記事内貼付けコード取得

 上手くできましたか?

Twitterを表示させるともう初心者じゃないですね。

 

 おススメ記事 

 はてなブログでアイコンフォント使おう!■

maysun53.com

『 この記事は〇分で読めます』

maysun53.com

 

- スポンサーリンク -  

 

【はてなブログ】サイドバーや記事内にツイッターを埋め込むまとめ

【はてなブログ】でサイドバーと記事内にTwitterを表示させる手順をお届けしました。

ちょっとややこしい部分もありましたね。うまくいかなかった人は、ステップアップと思って再挑戦してみてくださいね。

ブログとTwitterを上手く使って沢山の人に読んでもらえるといいですね。

にほんブログ村 ブログブログ ブログ生活へ 

f:id:maysun:20220106121849g:plain