はてなブログTwitterの埋め込み(引用・貼り付け)のやり方【パソコンとスマホ】


石黒と文字

この記事では、以下の方法を解説します。

  1. 記事本文中にTwitterの埋め込み(引用・貼り付け)をするやり方(パソコンとスマホ)
  2. はてなブログのサイドバーにTwitterのタイムラインを埋め込みするやり方

目次から、あなたのはてなブログでやりたい目的の場所まで飛んでください。

ブログサポート60の石黒です。

はてなブログの記事本文中にTwitterの埋め込み(引用・貼り付け)をするやり方(パソコンとスマホ)

はてなブログへの、Twitterの埋め込み(引用・貼り付け)をするやり方のやり方は複数あります。

やりやすい、簡単なやり方を採用してください。

自分のTwitterのツイートのみではなく、他人のツイートの埋め込み(引用・貼り付け)もできます。

口コミを探して引用するときに、とても便利です。

はてなブログへの、Twitterの埋め込みのやり方を、動画で見たい方はこちら

パソコンとスマホから、はてなブログにTwitterの埋め込みをするやり方【1】

はてなブログに埋め込み(引用・貼り付け)したい、Twitterのツイートを表示させます。

ツイートの「く」のマークをクリックする
「く」のマークをクリックする

 

「ツイートを埋め込む」をクリック
「ツイートを埋め込む」をクリック

 

Twitter埋め込み専用の画面に移行するので、「Copy Code」をクリックします。
Twitter埋め込み専用の画面「Copy Code」をクリック
※スマホからTwitterの埋め込み(引用・貼り付け)をするやり方も、ここまでは同じです。

 

【パソコンでのやり方】Twitterの埋め込みコードを、はてなブログのHTML編集画面で任意の場所に貼り付けします。
HTML編集画面で任意の場所に貼り付け

「blockquote」、引用タグになっていることがわかりますね。

プレビュー画面を見ると、はてなブログにTwitterのツイートを埋め込みできていることが分かると思います。

はてなブログの定型文機能を使うと、もっとかんたんにTwitterの埋め込みをすることができます。

 

【Androidスマホのやり方】はてなブログアプリ

装飾A→リンク→URLにTwitterの埋め込みコードをコピペ→挿入ボタン

装飾→リンク→URLをコピペ→挿入

 

Twitterの埋め込み(引用・貼り付け)後は、↓赤枠の余計に入ってしまったコードを消して完了です。
埋め込み後の状態

はてなブログのプレビュー画面から、きちんとTwitterの埋め込みができているか、確認しておきましょう。

 

パソコンからTwitterの埋め込みをするやり方【2】

はてなブログに、Twitterのツイートを埋め込み(引用・貼り付け)をする、もう一つのやり方があります。

こちらのTwitterの埋め込みのほうが簡単かもしれません。

はてなブログに埋め込み(引用・貼り付け)したい、Twitterのツイートの真ん中をクリック
引用したいツイートの真ん中をクリック

発信したツイートのみが表示されます。

表示させたTwitterのアドレスバーのURLをコピーします
アドレスバーのURLをコピー

 

はてなブログの記事を書く画面→リンクボタンを押す→アドレスバーのURLをコピペ→「プレビューボタン」→「埋め込みにチェック」→「選択した形式でリンクを挿入」
リンクボタンを押して→URLをコピー→「プレビューボタン」を押す→埋め込みにチェック

↑上画面の「URLを貼り付けたときにこのウィンドウを開く」にチェックしておけば、編集(見たまま)のところで、TwitterのURLを貼り付けしても、ツイートの埋め込み(引用・貼り付け)ができます。

 

はてなブログのサイドバーにTwitterのタイムラインを埋め込みするやり方

動画で、「はてなブログのサイドバーにTwitterのタイムラインの埋め込み(引用・貼り付け)するやり方」を見たい方はこちら

はてなブログのサイドバーに、自分のTwitterのタイムラインを埋め込み(貼り付け)をすることもできます。↓↓
サイドバーのツイート埋め込み(引用・貼り付け)

 

あなたのどのTwitterのツイートでもいいので、「く」をクリックします。

「く」のマークをクリックする

 

/status以降の、青くなっている部分を消して↓、あなたのTwitterのトップページのURLに変更→右側の矢印をクリック

ツイート埋め込み画面

 

Embedded Timelineを選ぶ

Embedded Timelineを選ぶ

 

「set customization options.」をクリックします。(Twitter埋め込みカスタマイズ)

「set customization options.」をクリックします。

 

はてなブログに埋め込みする「Twitterの縦の長さ」をカスタマイズしてください。
縦の長さをカスタマイズしてください。

400~1000の間の長さがいいと思います。

1000だとちょっと長いので600くらいでいいかもしれません。

あなたのはてなブログに、実際にTwitterのタイムラインを埋め込みしてみて、高さを調整してみることをオススメします。

高さ(長さ)以外、そのほかは、そのままの設定でも構いません。

※他Twitterのタイムラインの埋め込みは、以下をカスタマイズできます

  • タイムラインの縦の長さ
  • タイムラインの幅
  • タイムラインのテーマの色
  • リンクの色
  • 言語の設定

いろいろと設定を変更して試してると、はてなブログでTwitterのタイムラインがどう変化するかわかりやすいです。

 

Twitterタイムラインの埋め込みのカスタマイズの設定が完了したら、「Copy Code」ボタンをクリック
Twitterタイムラインの埋め込み専用の画面「Copy Code」をクリック

 

はてなブログの管理画面→デザイン→カスタマイズ→モジュールを追加→HTML→「Twitterのタイムラインのコードを貼り付け」→適用

カスタマイズ→モジュールを追加→HTML→コードを貼り付け→適用

サイドバーに貼り付けたTwitterのタイムラインの埋め込みの位置は、上下することで変更できます。

最後にはてなブログの「変更を保存をする」をクリックするのを忘れないでください。

 

まとめ(はてなブログTwitterの埋め込み(引用・貼り付け)のやり方)

はてなブログへの、Twitterの埋め込み(引用・貼り付け)は、できましたでしょうか?

意外と簡単ではなかったでしょうか?

Twitterからリアルのな口コミを探して、はてなブログに埋め込みして載せてあげると、読者も喜びます。

Twitterは、本心の口コミを発信している人が多いからです。

そういうリアルなTwitterの情報を埋め込みすることは、アフィリエイトで成果をだすのにも大きな効果があります。