2年目リーマン退職までの道のり

一人称が毎回違います。会社を辞めようとしている新卒2年目社会人の日常です。社会不適合者の私が主に会社や上司の愚痴を言いながら、仕事を続けていくのかそれとも辞めるのか、日々の葛藤を文章にしております。仕事以外でも趣味のこと、普段の生活では口に出して言えないようなことをつぶやくブログです。

【サルでもわかる!】はてなブログのページに自分のツイートのタイムラインを埋め込む方法

誰かのブログを見ていたら、ブログのサイドバーにTwitterのツイートのタイムラインが埋め込まれてるじゃないですか。

ブログのページでこんなことできるんだ!

と思い、僕もやってみることにしました。

しかし、頭が悪い自分にできるのだろうか。と思いましたが、わりとすぐできましたのでご紹介します。

 

①埋め込みコードを作成

まず、google、yahooの検索で「Twitter publish」と検索。

すると下のような何とも怪しい英語の画面が出てきます。

これで合ってますので、怖がらずに進めてください(笑)

 

f:id:damesyakaijinn1:20201122112156p:plain

この赤く囲ってある部分に自分のTwitterのURLを打ち込んでクリック。

@から始まる自分のユーザー名でも大丈夫です。

 

 

②コードの貼り付け

f:id:damesyakaijinn1:20201122112446p:plain

すると上のような画面が出てきますので、左側の丸で囲ってある方をクリック。

f:id:damesyakaijinn1:20201122112608p:plain

するとこのようにコピーコードの画面が出てきますので、青い部分をクリック。

コードのコピーが終われば次は貼り付けです。

 

はてなブログのページに戻り、

「ダッシュボード」から

「デザイン」

「カスタマイズ」(上のスパナマーク)

「サイドバー」

の順にクリック。

サイドバーの一番下に「+モジュールの追加」という部分をクリック。

左側の下の方に、「HTML」という部分があるので、そこをクリック。

そうすると、下のような画面になります。

f:id:damesyakaijinn1:20201122112931p:plain

タイトルの部分にTwitterだったり、タイムラインだったり、ここは何でもいいと思います。

そしてタイトルの下のデカい余白の部分に、先ほどコピーしたコードを貼り付けます。

自分のでやってみました。こんな感じになります。↓

f:id:damesyakaijinn1:20201122113557p:plain

 

③タイムラインのカスタマイズ

貼り付けをし、そのまま適用をクリックして終わり!でもダメではないのですが、べらぼうに長いタイムラインが貼り付けられてしまい、ブログのページがあり得ないほど長くなってしまいます。

そこで、重要なのがカスタマイズ。

調べてみると、表示件数、タイムラインの長さ(px単位)、幅(px単位)、色などカスタマイズできるみたいです。

px(ピクセル)とは?

ピクセルは、シンプルに言うとデジタル画像を構成する最小単位を指します。
デジタル画像は小さな四角い点が集まってできていて、この点それぞれが色のついた光を放つことで、画像・動画などを表示しています。
これらの1点1点は、それ以上小さく分割することはできません。この最も小さい四角い点がpixel(ピクセル)です。
1pxは点1個、10pxだと点が10個集まっている状態を指します。
「横300px、縦200pxの画像」=「横に点が300個分、縦に点が200個分で構成された画像」ということです。
よくバナーサイズに180×180、300×250、100×60といった数字が見られますが、このときの単位がピクセルです。
Webサイト以外で身近なpxの使用例としては、デジタルカメラ、スマホのカメラなどがあります。
どのくらい精密な写真が撮れるかということを表す時に「画素数」という指標が用いられますが、この「画素」が「px」なのです。

※ウェブラボ㈱様 スタッフブログからの引用

 

私の場合は表示件数のみをカスタマイズしました。

f:id:damesyakaijinn1:20201122113557p:plain

先ほどと同じ画面ですが、赤線のところが私の追加した部分です。

(変な%5なんちゃらfw"の後に追加すれば問題ありません。)

data-tweet-limit="5"

タイムラインの表示は5件までにしてね。という意味です。

これを自分で半角で打ち込めばOKです。

調べてみると20件までできるみたいですね。

他にも、幅(width="")、長さ(height"")等で調整できます。

自分の好きなようにカスタマイズしていくのも楽しそうですね。

 

まとめ

いかがでしたでしょうか。

ブログを見てもらいながら、ツイートも見てもらえるのは贅沢ですよね。

しかもTwitterのページに行かなくて済む!

すごく便利です。

ブログもやってるけど、Twitterも見てほしい!という人には是非やってほしいです。

 

www.damesyakaijinn1.com
www.damesyakaijinn1.com