after work Lab

少しHでニッチな「Webデザイン、家電・IT」のカスタマイズBlogです

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

はじめに

この記事は「はてなブログをカスタマイズして良くするプロジェクト」第4弾です。

 

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

 

“あトん”は最近「はてなスター」の設置を廃止したのですが、「」の変わりにブログに埋め込んだTwitterに「」を押して頂き、「いいね」を読んだ足跡として代用させて頂いてます。

「はてなスター」本当に要ります?もう止めて「いいね」に変えませんか? - after work Labo

はじめに なぜ「はてなスター」を止めるのか 第1の理由:サイトの高速化 第2の理由:「はてなスター」は人気がない 第3の理由:「交流」「互助会」「スパム」問題 何が問題なのか スターの確認方法 「いいね」の実装 まとめ “あトん”のスターフレンド 14名 http移行前の「★」 計2757個 https移行後「★」 計879個 独自ドメイン移行後「★」 計687個 ♡いいねはこちら はじめに この記事は「はてなブログに足りない所をカスタマイズして良くするプロジェクト」第3弾です。 このサイトはページ表示の高速化にいろいろと取り組みましたが限界を感じてます。 特に、モバイルページの表示速度は看破…

 

この記事を書いた時、ブログに埋め込んだ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です。

 

なお、当ブログではページスピード改善の為、外部読み込みのJavaScriptファイルはフッターに記述し、スクロール発火で遅延読込みさせてます。

 

まとめ

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

 

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

 

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

 

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

 

♡いいねはこちら

この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。

 この記事のツイートを♡いいねする

 

 

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