Click

Twitterを自分好みのデザインにカスタマイズして埋め込む方法

2020/08/22

Customize Twitter


はじめに

皆さんはTwitterをブログで活用してますか?

管理人はTwitterでブログ更新を告知してますが、ブログに埋め込んだTwitterは自分好みにカスタマズできることが分かったので、その方法を備忘録としてまとめて見ました。

Twitterのカスタマイズに興味がある方は、参考に読んでみて下さい。

 

なぜTwitterの埋め込みをカスタマイズするのか

はてなブログではダッシュボードでTwitterを簡単に貼り付けることができ、とても便利です。

しかし「少し表示を変えて見たいなー」と思っても、標準機能はTwitterをはてな記法で埋め込んでいるのでカスタマイズできません。

困ったなーと悩んでいたところ、Twitterの埋め込みコードに各種属性を追加することで、いろんな表示ができることを知りました。

属性情報を上手く使うと他のブログと差別化でき個性が出せると思います。

ただTwitterを埋め込むのに飽きた方は、ぜひ遊んでみて下さい。


それではタイムラインとツイートの埋め込み方法について説明したいと思います。

 

タイムラインとツイートで使える属性

 Timeline(タイムライン)とTweet(ツイート)の埋め込みでは、使える属性と使えない属性があるので注意が必要です。

 

属性の一覧表を作ったのでカスタマイズする際に参考にして下さい。

 

埋め込みコードの属性一覧表

 

属性 意味 記述例 Timeline Tweet
data-theme light / dark テーマの背景色を変える data-theme="dark"
data-width 数字(px) 幅(px単位)を変える data-width="300"
data-height 数字(px) 高さ(px単位)を変える data-height="500"
data-link-color カラーコード リンクの色を変える data-link-color="#eeeeee"
data-border-color カラーコード 境界線の色を変える data-border-color="#aaaaaa"
data-chrome
noheader ヘッダーを非表示にする data-chrome="noheader"
nofooter フッターを非表示にする data-chrome="nofooter"
noborders 境界線を消す data-chrome="noborders"
noscrollbar スクロールバーを非表示にする data-chrome="noscrollbar"
transparent 背景を透明にする data-chrome="transparent"
data-tweet-limit tweet-limit ツイート数(1~20) data-tweet-limit="5"
data-cards hidden メディアファイルを非表示にする data-cards="hidden"
data-conversation none 元ツイートを非表示にする data-conversation="none"
data-align left / center / right ツイートの表示位置を変える data-align="center"
tw-align-center - ツイートをセンター表示にする tw-align-center



表を見て分かる通り、タイムラインとツイートでは、共通で使用できる属性が少ないのですが、パラメータ(値)が豊富でいろいろと遊べそうです。

 

それではツイートの埋め込み方法について説明したいと思います。

 

タイムラインとツイートの埋め込み

 

最初にツイートの埋め込み方法、次にタイムラインの埋め込み方法を説明します。

 

ツイートの埋め込み方法

管理人のツイートを例題として埋め込んでみます。

 

ツイートを埋め込むを選択

ツイッターを開き、右上のメニューから</> ツイートを埋め込むを選択します。

 

https://publish.twitter.comへ移動

自動でhttps://publish.twitter.com/に偏移します。 

 

CopyCodeを選択します




コピーした下記コードをHTML編集でペーストします。

<blockquote class="twitter-tweet">
    <p lang="ja" dir="ltr"><a href="https://t.co/0ePEvswg7Z">https://t.co/0ePEvswg7Z</a>
    	<br><br>ブログ更新しました。<br><br>特定ユーザ向けの内容です。
    	<a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はてなブログ</a> 
    	<a href="https://twitter.com/hashtag/%E7%9B%AE%E6%AC%A1?src=hash&amp;ref_src=twsrc%5Etfw">#目次</a>
    </p>&mdash; 🍶あトん (@AfterWork_Lab) 
    <a href="https://twitter.com/AfterWork_Lab/status/1223964855494795264?ref_src=twsrc%5Etfw">February 2, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


管理人のツイートが表示されました。

 

次に表示を少しカスタマイズしてみます。

 

中央にセンタリグ、幅:300px、背景:dark、メディアファイルを非表示にする属性を追加します。

<blockquote class="twitter-tweet tw-align-center" data-theme="dark" data-width="300" data-cards="hidden">
    <p lang="ja" dir="ltr"><a href="https://t.co/0ePEvswg7Z">https://t.co/0ePEvswg7Z</a>
    	<br><br>ブログ更新しました。<br><br>特定ユーザ向けの内容です。
    	<a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はてなブログ</a> 
    	<a href="https://twitter.com/hashtag/%E7%9B%AE%E6%AC%A1?src=hash&amp;ref_src=twsrc%5Etfw">#目次</a>
    </p>&mdash; 🍶あトん (@AfterWork_Lab) 
    <a href="https://twitter.com/AfterWork_Lab/status/1223964855494795264?ref_src=twsrc%5Etfw">February 2, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このコードをHTML編集で貼り付けると下のような表示に変わります。 

 

タイムラインの埋め込み

例として、はてなブログのタイムラインを埋め込んでみます。

 

タイムラインの埋め込み方法

はてなブログのツイッターを開きます。

 


https://publish.twitter.comでツイッターのURLを入力



Embedded Timelineを選択



set customization optionsをクリック


タイムラインの高さ・幅を入力しUpdateをクリック

 

CopyCodeを選択します



コピーしたコードをHTML編集で貼り付けます

<a class="twitter-timeline" data-width="300" data-height="800" href="https://twitter.com/hatenablog?ref_src=twsrc%5Etfw">Tweets by hatenablog</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

はてなブログのタイムラインが表示されました。

 

ありきたりの表示なので、少しカスタマイズしてみます。

 

中央にセンタリグ、幅:300px、フッター:非表示、境界線の色:変更、背景:きれいなお姉さんにグラディーションを被せてみます。

<div style="width: 300px; margin-left: auto; margin-right: auto; background: linear-gradient(25deg, rgba(255, 0, 0, 0.6), rgba(0, 0, 119, 0.6)) ,url('https://cdn-ak.f.st-hatena.com/images/fotolife/a/aTn/20200216/20200216224251_original.jpg'); background-size: cover;">
	<a class="twitter-timeline" href="https://twitter.com/hatenablog?ref_src=twsrc%5Etfw" data-chrome="nofooter transparent" data-height="800" data-border-color="#c41138">Tweets by hatenablog</a>
</div>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このコードをHTML編集で埋め込むと下のように表示されます。

 

 

ちょっと凝りすぎたかも知れませんが、はてなブログのタイムラインを少しセクシーなタイムラインに変えることができました。パチパチ。

 

おまけ

ラブライブ!(Aqours)の松浦果南ちゃんのタイムラインを飾ってみました。

 

 

(注)Twitterを複数埋め込む場合、JavaScriptファイル:https://platform.twitter.com/widgets.jsは1回読み込めばOKです。

 

 

まとめ

 Twitterの埋め込みは、ひと手間かけると、とても面白い表示ができることが分かりました。

 

少し残念だったのは、リンクの色をdata-link-colorで変えようと試みたのですが、出来ませんでした。

 

Twitterの仕様が変わったのでしょうか。

 

また、ツイートの背景も弄れると楽しかったのですが、JavaScriptを使わないと出来ないみたいなので、面倒臭くて今回は止めました。

 

気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。

Advertisements

Author

自分の写真
IT全般およびWebサイトについてお勉強したことを勝手気ままに書いてまーす。
\ Follow me! /

Follower

Labels

Internet (10) PC (10) Blog (8) Repair (7) WebDesign (7) Windows10 (7) Security (6) Blogger (5) YouTube (5) SEO (4) SmartSpeaker (4) hatenablog (4) Audio (3) CSS (3) Cooking (3) HTTPS (3) Review (3) Domain (2) GitHub (2) HDD (2) JavaScript (2) MFI (2) Node.js (2) Ads (1) Anime (1) Beer (1) Browsersync (1) Coding (1) Customize (1) Editor (1) Git (1) Google (1) Life (1) Monitor (1) New Year (1) Nomad Code (1) Smart Watch (1) Twitter (1) Windows (1) iPhone (1) nodist (1)

Sponsored Links

QooQ