2022年2月6日更新
【追記 】当然ですがTwitterのユーザー名を変えてしまうと反映されなくなり、1から設定し直さなくてはなりません。ですが、簡単な作業ですのでご心配なく。
誰かのブログを見ていたら、ブログのサイドバーにTwitterのツイートのタイムラインが埋め込まれてるじゃないですか。
ブログのページでこんなことできるんだ！
と思い、僕もやってみることにしました。
しかし、頭が悪い自分にできるのだろうか。と思いましたが、わりとすぐできましたのでご紹介します。
①埋め込みコードを作成
まず、google、yahooの検索で「Twitter publish」と検索。
すると下のような何とも怪しい英語の画面が出てきます。
これで合ってますので、怖がらずに進めてください（笑）
この赤く囲ってある部分に自分のTwitterのURLを打ち込んでクリック。
@から始まる自分のユーザー名でも大丈夫です。
②コードの貼り付け
すると上のような画面が出てきますので、左側の丸で囲ってある方をクリック。
するとこのようにコピーコードの画面が出てきますので、青い部分をクリック。
コードのコピーが終われば次は貼り付けです。
はてなブログのページに戻り、
「ダッシュボード」から
「デザイン」
「カスタマイズ」（上のスパナマーク）
「サイドバー」
の順にクリック。
サイドバーの一番下に「+モジュールの追加」という部分をクリック。
左側の下の方に、「HTML」という部分があるので、そこをクリック。
そうすると、下のような画面になります。
タイトルの部分に入れる文字はTwitterだったり、タイムラインだったり、ここは何でもいいと思います。
そしてタイトルの下のデカい余白の部分に、先ほどコピーしたコードを貼り付けます。
自分のでやってみました。こんな感じになります。↓
③タイムラインのカスタマイズ
貼り付けをし、そのまま適用をクリックして終わり！でもダメではないのですが、べらぼうに長いタイムラインが貼り付けられてしまい、ブログのページがあり得ないほど長くなってしまいます。
そこで、重要なのがカスタマイズ。
調べてみると、
表示件数
タイムラインの長さ（px単位）
幅（px単位）
色
などがカスタマイズできるみたいです。
px（ピクセル）とは？
ピクセルは、シンプルに言うとデジタル画像を構成する最小単位を指します。
デジタル画像は小さな四角い点が集まってできていて、この点それぞれが色のついた光を放つことで、画像・動画などを表示しています。
これらの1点1点は、それ以上小さく分割することはできません。この最も小さい四角い点がpixel（ピクセル）です。
1pxは点1個、10pxだと点が10個集まっている状態を指します。
「横300px、縦200pxの画像」=「横に点が300個分、縦に点が200個分で構成された画像」ということです。
よくバナーサイズに180×180、300×250、100×60といった数字が見られますが、このときの単位がピクセルです。
Webサイト以外で身近なpxの使用例としては、デジタルカメラ、スマホのカメラなどがあります。
どのくらい精密な写真が撮れるかということを表す時に「画素数」という指標が用いられますが、この「画素」が「px」なのです。
※ウェブラボ㈱様 スタッフブログからの引用
私の場合は表示件数のみをカスタマイズしました。
先ほどと同じ画面ですが、赤線のところが私の追加した部分です。
（変な%5なんちゃらfw"の後に追加すれば問題ありません。）
data-tweet-limit="5"
タイムラインの表示は5件までにしてね。という意味です。
6件だったら6、7件だったら7といった感じで。
これを自分で半角で打ち込めばOKです。
上記をコピーしてもらっても構いません！
調べてみると20件までできるみたいですね。
他にも、幅（width=""）、長さ（height""）等で調整できます。
自分の好きなようにカスタマイズしていくのも楽しそうですね。
 |
はてなブログ Perfect GuideBook [改訂第2版] [ JOE AOTO ] 価格:1,848円 |
まとめ
いかがでしたでしょうか。
ブログを見てもらいながら、ツイートも見てもらえるのは贅沢ですよね。
しかもTwitterのページに行かなくて済む！
すごく便利です。
ブログもやってるけど、Twitterも見てほしい！という人には是非やってほしいです。
www.damesyakaijinn1.com
www.damesyakaijinn1.com
