インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

ツイッターのブログ記事への貼り付け方!ツイートをurlや埋め込みコードでカスタマイズ

  2015/12/09   あとで読む

約 6 分で読めます

twitters

記事を書いていると、画像やYouTube、ツイッターなどを入れて楽しくわかりやすくしたい!という時が結構ありますが、ここではツイッターの入れ方について解説します。

入れ方は超簡単。URLを貼り付ければ基本OKですが、

  • センタリングをして見栄えを整えたい!
  • 差別化して色を変えたい!

といったこだわり派のあなたのために、更に工夫するにはどうするかを含めて見てみましょう。

よくある「ツイートを記事の載せてもいいのかどうなのか?!」みたいな著作権が絡んだお話しも聞くことから、ツイッターの利用規約を元にここでスッキリ、ハッキリしておきます。

関連記事 WordPressへYouTubeの貼り付け方法

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

ツイートを記事に埋め込む!

ではサクサクっといって見ます。

ツイートはご存知のように、

1)文字だけ
2)画像付き
3)動画付き

といったものがありますが、これらはどれでも記事に貼り付けができるんですね。

以下例を見てみると(というかこの記事に貼り付けてみると)

1)文字だけ

NHKのニュースから。

2)画像付き

こちらは画像付きのツイート。誰もが知るフィギュアスケートの浅田真央選手ですが日経新聞のツイートから。

3)動画付き

ツイートには動画付きのものあります。

以下クリックしてもらえば分かりますが、その場で動画再生ができるんですね。

記事への埋め込み方

上で見たツイートをどこかで見かけ、記事の中に入れたい!と思った時、以下の2つのやり方のどちらかで記事の中に埋め込めます。

  • 1)ツイートのURLを貼り付ける
  • 2)ツイートの埋め込みコードを貼り付ける

単に貼り付ければ良い!ということではお手軽な1)。

いや、センタリング等をして見栄えのバランスを整えたい、と言う場合には2)の「埋め込みコード」での貼り付けです。

ではURLや埋め込みコードの取得をしてみます。

  • ※)スクリーンショットはダメ!
    • 貼り付け方の1つとして、パソコンの画面上でスクリーンショット(画面キャプチャ)をとって、それを張り付ける、というやり方もありますが、これはダメです。
    • 詳しくは下方の「著作権について」の項目を見てみてください。

URLの取得と貼り付け

ではツイートのURLの取得と貼り付けです。

URLの取得

ツイッター上で見ている場合では、ツイートの下に表示されている「…」をクリックするとメニューが開かれます。

2015-09-13_101221

「リンクをコピー」をクリックで、以下のようにツイートのURLが表示されます。

2015-09-13_101723

「Ctrl + C」でコピー、または右クリックして以下のようにメニューから「コピー」を選択してURLををコピーします。

2015-09-13_101829

記事上に貼り付けてあるツイート

この記事に貼り付けているツイートのように、ブログ上に貼り付けてあるツイートには「…」といったメニューが表示されてません。

この場合のURLの取得では、一度ツイート上の何も記載のない箇所をクリックして、ツイートの単独表示をする必要があります。

2015-09-13_104451

↓↓↓↓↓↓

以下のようにツイートの個別表示がされました。

2015-09-13_104534

このように単独でツイートが表示されると、下の方に「…」といったメニュー用のアイコンが表示されますので、後は同じように「リンクをコピー」を選択してURLをコピーします。

URLの貼り付け

ツイートのURLをコピー後は、記事の中(ビジュアルモード)で空行の部分をクリックして、そこにURLを貼り付ければOKです。

(貼付け後、自動でツイートのイメージが表示されます)

2015-09-13_102159

↓↓↓↓↓↓

2015-09-13_102858

↓↓↓↓↓↓

2015-09-13_103250

簡単ですね!(^o^)

埋め込みコードの取得と貼り付け

埋め込みコードの取得は、URLの取得と同じように「・・・」でメニューを開き「ツイートをサイトに埋め込む」をクリックします。

2015-09-12_074911

↓↓↓↓↓↓

ツイートを表示するためのコードが表示されるので、コピーします。
(右クリックしてコピーを選ぶか、Ctrl + c )

2015-09-12_074955

↓↓↓↓↓↓

WordPressの記事作成画面で、ビジュアルではなく、テキストモードに切り替えて貼り付けます。

2015-09-13_111916

コードの貼付け後、テキストモードから「ビジュアル」に切り替えて見てみてください。ツイートのイメージが表示されているはずです。

いろいろなカスタマイズ

URLではなく、コードで貼り付けると色や配置のカスタマイズができます。

カスタマイズする場合は、テキストモードに切り替えて以下に解説しているコードを追加してください。

センタリング(左寄せ、中央寄せ、右寄せ)

まずセンタリング(と左寄せ、右寄せ)です。

何もせずコードをそのまま記事に貼り付けた場合、以下のように左寄せで表示されます。(パソコンなど画面が大きい表示の場合)

この左寄せをセンタリングして見栄えよくしたい!と配置を変えたい場合には、以下を貼り付けコードのblockquoteタグに加えます(半角スペースを入れてくださいね)

  • 左寄せ:align=”left”
  • センタリング:align=”center”
  • 右寄せ:align=”right”

blockquoteタグ(<blockquote class=”twitter-tweet” lang=”ja”>)に追加すると、以下のようになります。

  • 左寄せ:align=”left”
    <blockquote class=”twitter-tweet” lang=”ja” align=”left”>
  • センタリング:align=”center”
    <blockquote class=”twitter-tweet” lang=”ja” align=”center”>
  • 右寄せ:align=”right”
    <blockquote class=”twitter-tweet” lang=”ja” align=”right”>

消えてしまう場合はこれ

この配置を決める align=”xxx” ですが、入力を「ビジュアル」と「テキスト」で切り替えると、なぜか消えてしまう場合があります。(何か他のプラグインなどの関係?)

とういことで、そんな問題にぶつかったら、以下の設定をしてみてください。

  • 左寄せ:class に tw-align-left を追加
    <blockquote class=”twitter-tweet tw-align-left” lang=”ja”>
  • センタリング:class に tw-align-center を追加
    <blockquote class=”twitter-tweet tw-align-center” lang=”ja”>
  • 右寄せ:class に tw-align-right を追加
    <blockquote class=”twitter-tweet tw-align-right” lang=”ja”>

半角スペースを入れて上記のように追加します。

リンク色やテーマ色(背景色)

表示する色もカスタマイズできます。

  • 1)リンク色
  • 2)テーマ色(背景色)
    • 形式: data-theme=”dark”
    • dark と light の2種類のみ。何も指定しないと light です。

カスタマイズの具体例

では以下のようにカスタマイズしてみます。

  • 1)配置:センタリング
    (align=”center” または class に tw-align-center)
  • 2)リンク色: 赤(data-link-color=”#ff0000″)
  • 3)テーマ色:dark(data-theme=”dark”)

blockquoteタグは以下のようになりますね。

  • <blockquote class=”twitter-tweet” lang=”ja” align=”center” data-link-color=”#ff0000″ data-theme=”dark”>

    または

  • <blockquote class=”twitter-tweet tw-align-center” lang=”ja” data-link-color=”#ff0000″ data-theme=”dark”>

2015-09-13_121601

こうしてみるとひと味違いますね!

あとは毎回手で入力するのは手間なので、よく使う色や配置を含めて、

<blockquote class=”twitter-tweet tw-align-center” lang=”ja” data-link-color=”#ff0000″ data-theme=”dark”>

を辞書に「ついーとしょく」などで変換できるように登録しておくと便利ですね。

著作権について

twitterでは今回のようにツイートを記事に転載ができる、できない、が話題になったりします。(中には”このツイートは転載禁止!”などと堂々と言ってツイートしている人もいるそうで)

実際はどういうことになっているか、ツイッターの利用規約から関連箇所を抜粋すると(詳しくは実際の利用規約を参照)

5. ユーザーの権利

ヒント: このライセンスによって、ユーザーは、当社や他の利用者に対し、Twitterサービスにおけるご自身のツイートを世界中で閲覧できるようにすることを認めたことになります。

8. コンテンツおよび本サービスの利用に対する制限

ヒント: 当社では、Twitterサービス上のコンテンツの幅広い再使用を奨励および容認しており、Twitter APIはこのために提供しています。

つまり、ツイートは世界中の誰もが閲覧できるとして使用するものであり、コンテンツ(ツイート)の再使用にはツイッターが提供している方法(Twitter API)を使用する限りOK、となっています。(ツイートの転載禁止を主張する人は、ツイッターの利用規約からすると、そもそもツイッターの利用しちゃダメ、ツイートしないでね、ということになります)

ツイッターが提供している方法は、この記事で見てきた内容です。

逆に言うと、良く話題になるスクリーンショット(画面キャプチャ)で貼り付けるなどは(ツイッターが提供している方法ではないため)ダメ!ということになりますね。

何故ダメかを考えれば、ツイッターの提供している方法に則って表示している限り、ツイッター側で何か機能進化したりしてもそれが記事に貼り付けてあるツイートにも自動的に反映されるわけですが、スクリーンショットは単に画像イメージの貼り付けなため、ツイッター側の意図が反映されない、だからダメ!となるわけですね。

今回のまとめ

  • ツイートを記事に埋め込むには、URLの貼り付けと、埋め込みコードの貼り付けの2つの方法がある。
  • URL貼り付けは、単にURLを貼り付けるだけなのでとても簡単
  • 埋め込みコードは、色を変えたい、配置をセンタリングしたい等、こだわる時にはこちらを利用。
  • 配置の align=”xxx”は、ビジュアルとテキストを切り替えると消える場合があり、その場合には class を利用する。
  • 転載などが問題になるが、ツイッターの提供する方法を利用する限り問題なし

色々と記事を書く中で、ツイッターなどの情報は記事を生き生きとさせる1つのスパイスです。

なにか調べている中で目についたツイートを記事に取り込む、更にそれに対して記事の中で自分の考えを言ってみる、などとすると、更に記事が光を放ち、読者に、なるほどなー、と思わせる楽しい記事になりますね。

単に事実を述べる記事も良いですが、こういった意見や考えがあるんだな、と楽しんでもらえる記事を心がけることで、記事の滞在時間、ブログの滞在時間が伸び、読者も楽しい、記事もブログも強くなっている、という好循環が生まれます。

結局はツイートの埋め込みも、読者にいかに楽しんでもらえるかの1手段。

見かけのリッチさを単に求めるのではなく、その本質を理解し良い記事を書き進めることで、大きな成果につなげて行きましょう。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です