カキタクナッタラ

出力することを忘れないように何かを書きます

【ブログに貼りたくなるかも!?】ツイッターの埋め込みタイムラインを「カスタマイズ」して表示する方法

f:id:d3dayo:20170703135743p:plain

追われている作業の間の息抜きとして…けっこうこのブログの(特にPC版!)デザインも記事一覧をカード型にしてみたり(PC版を見てね!)なでででーさん(@d3_dayo)です!

実はツイッターのタイムラインもブログに貼っつけてみました。スマホ版だとページ一番下にあるので探せば見つかるかと思いますが、PC版だとサイドバーのあるところに隠しているのですぐには見つからないかも!?同時に水墨画イラストのリクエストリンクも同様の方法で、もっと探しにくくしています(笑)

さて、せっかく、ツイッターの埋め込みタイムラインをこのブログにも貼っつけてみたので、今回はあのパクリのいぐべさん (id:igube)も自分のブログですぐに応用できるように、ツイッタータイムラインの表示カスタマイズをする方法を紹介しようと思います!

さいしょに

ツイッターの埋め込みタイムライン、ツイッターアカウントを持っている人なら、ツイッターの設定画面から以下のようなコードを簡単手順で払い出して、すぐに自分のブログへ貼っつけることができます。

<a class="twitter-timeline" href="https://twitter.com/アカウント名">Tweets by アカウント名</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ただ、このコードをそのまま貼っつけると…ツイートが20個表示されるので、非常に冗長な感じになるんですよね。サイドバーに貼ったとしても長いし、第一なかなか人のツイートを20個も一気読みすることってないと思うのです。

このコードをツイッターの設定画面で生成する時に「幅」や「高さ」は指定できるのですが、高さを指定すると今度はツイートが途中で切れてしまったり。

なかなか生成されたコードそのままでは、自分好みの埋め込みタイムラインとしてブログに貼れないかもというわけなんですが…コードにちょっと手を施せばこんな風にブログの中へ貼ったりすることができます!




でででの


幅を固定していないのでPCだとちとデカイです。ただ、スマホで見るときやサイドバーに設置する際にはちょうど良いサイズ感になりました。

この記事では、ここから上記の埋め込みタイムラインのようにツイートを1つだけ表示したり、余計なものを省いて表示したり、あとはちょっとしたおまけのカスタマイズを紹介します!


埋め込みタイムラインのカスタマイズ

まずはご自身の埋め込みタイムラインコードをツイッターの設定から生成する手順から紹介します。

埋め込みタイムラインのコード生成

PC版のツイッターサイトにアクセスして、右上に表示されている自分のアイコンクリックから「設定とプライバシー」を開きます。

f:id:d3dayo:20170703115605p:plain


設定画面に入ったら、左側のメニューから「ウィジェット」を選択します。

f:id:d3dayo:20170703120310p:plain


「ウィジェット」の画面に切り替わるので右上にある「新規作成」をクリックし、今回は「プロフィール」を選択します。

f:id:d3dayo:20170703120734p:plain


URLを入力する画面が表示されるので、自分のツイッターURLを入力し、入力完了したら「→」をクリックします。

f:id:d3dayo:20170703121403p:plain


次の画面では生成することコードの種類を選択します(埋め込みタイムラインかフォローボタンか)今回は埋め込みタイムラインのコードを生成するので「Embedded Timeline」を選択します。

f:id:d3dayo:20170703121804p:plain


すると、コードを取得する画面が表示されるので、下図の赤枠で囲った部分「Copy Code」をクリックします(ここでザックリ表示をカスタマイズすることもできますが今回はこのまま取得します)

f:id:d3dayo:20170703122007p:plain


これでブログにタイムラインを貼り付けるためのコードを取得することができました。

f:id:d3dayo:20170703122215p:plain

取得したコードは、先ほど上の方にサンプルとして貼ったタイムラインのように記事の中にも貼れますし、サイドバーのHTMLモジュールの中に貼ることもできます(はてなの話ですがWordPressなどでも同様に)

最新のツイート1つだけを表示する

私もこのブログで今そのように表示していますが、20個は多すぎるし、ツイートは1つだけ表示して、それ以外のツイートももし興味のある物好きな人がいればツイッターにジャンプしてもらうなど、してもらえれば良いと思うのでツイートは最新のもの1つしか表示していません。

このように表示したい場合には以下のコードを…

data-tweet-limit="1"

ツイッターの設定画面で取得した埋め込みタイムラインのコードの中に追加します。

<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/アカウント名">Tweets by アカウント名</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これで、埋め込みタイムラインで表示されるツイートは最新の1つだけになります。もし、1つ以上、例えば5つとか表示したい場合には…

data-tweet-limit="5"

として、取得したコードに追加すればOKです。

タイムラインのヘッダーを非表示に

取得したコードそのままに貼り付けるとこのようになります。

個人的にはこの「@d3_dayoさんのツイート」という部分はなくてもわかるから要らないと思い非表示にしてみました。

非表示にする時は…

data-chrome="noheader"

このコードを取得したコードにこんな感じで追加します。

<a class="twitter-timeline" data-tweet-limit="1" data-chrome="noheader" href="https://twitter.com/アカウント名">Tweets by アカウント名</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これを貼ればOKです!

とりあえず余計なものは省いてスッキリさせる

ここまでは工程ごとにコードとその効能を解説しながら紹介してきましたが、とりあえず詳細はどうでもいいからタイムラインをスッキリとシンプルに表示させたいという時にはこれを貼ればOKです。

<a class="twitter-timeline" data-tweet-limit="1" data-chrome="noheader nofooter noborders noscrollbar transparent" href="https://twitter.com/アカウント名">Tweets by アカウント名</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


このように、ツイッターの設定画面から取得したコードにちょっとしたコードを追加するだけで、デフォルトのタイムラインよりも遥かにスッキリとコンパクトにブログへ埋め込むことができます。


おまけ

せっかくなので、埋め込みタイムライン自体の表示カスタマイズではないのですが、このブログでも施している最新のツイート1つだけをちょっとクールに見せる?ためのカスタマイズも紹介したいと思います。

タイムラインをボックスの中に表示する

私は以下のコードをCSSに追記して(はてななら管理画面→デザイン→カスタマイズ→デザインCSSに追記)ツイートをボックスの中に表示するようにしています。

/* ツイッタータイムライン装飾枠の作成 */
twibox {
    border: 1px solid #121212;
    border-radius: 0.2em;
    display: block;
    letter-spacing: 3px;
    padding: 10px 10px;
}

その上で、タイムラインを表示したいところには以下のコードを貼り付けています。

<Div Align="center">
<twibox>
<Div Align="center">
<strong>でででの(ここは名前を変えてね)<span style="color: #1DA1F2"><i class="fa fa-twitter" aria-hidden="true"></i></span></strong>
<a class="twitter-timeline" data-tweet-limit="1"  data-border-color="#aaa" data-chrome="noheader nofooter noborders noscrollbar transparent" href="https://twitter.com/アカウント名"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</Div>
</twibox >
</Div>

※「アカウント名」の部分は自分のアカウントに書き換えてください。

これを貼るとこのように、ツイートが灰色の枠内に表示されるようになります。




でででの


でででのの部分はFont Awesomeのウェブフォントを使って表示しているので、もし設定がわからない場合には以下の記事も参考にして頂ければと思います!

d3dayo.hateblo.jp


普段は隠し、クリックすると表示されるようにする(展開式)

実は今、私のサイドバーにあるプロフィール文も展開式にして普段は表示されないようにしています(読みたい人はクリックすれば表示される形式に)この見せ方を応用して、ツイッターのタイムラインも普段は非表示にしておき、クリックすると中身が開いて表示されるようにするといったことも可能です(読み終わったら再度クリックすれば中身が閉じる)

以下のコードを展開式のタイムラインを表示したいところに貼り付けます。

<!-- クリックすると展開するタイトル部分 -->
<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;"><strong>でででの(ここは名前を変えてね)<span style="color: #1DA1F2"><i class="fa fa-twitter" aria-hidden="true"></i></span>を表示する</strong></a>
</div>
<!--// クリックすると展開するタイトル部分 -->
 
<!-- 展開すると表示される部分 -->
<div id="open" style="display:none;clear:both;">

<a class="twitter-timeline" data-tweet-limit="1"  data-border-color="#aaa" data-chrome="noheader nofooter noborders noscrollbar transparent" href="https://twitter.com/アカウント名"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>
<!--// 展開すると表示される部分 -->

このコードを使って実際にタイムラインを設置するとこんな感じになります。


このように普段は非表示で表示タイトルをクリックするとタイムラインが表示されるようになりました!


おわりに

今回はツイッターの埋め込みタイムラインをブログに貼る際のちょっとしたカスタマイズについて紹介させて頂きました!はてなブロガーさんは(少なくとも私の周囲では)ツイッターでもかなりアクティブな方が多く、何らかの連絡やコミュニケーションはツイッターのほうが断然取りやすいと思うので、ブログに貼るのもただフォローボタンだけではなく、ツイッター動かしていることがもっと伝わるように、スッキリとした埋め込みタイムラインが設置できると良いのでは?と思い、このブログでも邪魔にならないような形でタイムラインを設置してみることにしました!


実際に手順を試してみようとこの記事をお読み頂いている方へ
読んでいる中でわからない点などありましたら、どうぞお気軽にコメントやツイッターでご質問頂ければと思います(記事の内容がわかりにくくて申し訳ありません)


実はプロフィール欄にタイムライン隠しているかも!?はてなブログスマホ版レイアウトのプロフィールカスタマイズはこちらの記事で手順紹介しています!

d3dayo.hateblo.jp



でででーさん
d3dayo.hateblo.jp