育児パパの想い

イクメンまでいかなくても、子育てに頑張って関わっていきたい父親です。

ブログにTwitterのタイムラインを埋め込む

2年前に新米パパになったものの、気がついたらあと2か月で子供は2歳。

 

この2年でたくさんのことがあったはずなのに、なかなか思い出せなく、寂しくもあるので、覚えているうちに出来事と想いを記録しておきたいという気持ちからブログを開設しました。

 

(正確には、ほぼ放置していたはてなブログサブアカウントを作りました。)

 

サブアカウントについて - お問い合わせ - はてな

 

 

はじめに

 

これまでブログに何度も失敗してきた経験として、最初のデザインなどのカスタマイズでつまづいて、肝心の投稿まで進めなかったということがあります。

 

まあそれよりも、書きたいことがあってブログを作るのではなく、とりあえずブログってものをやってみようと思っていたわけですが、典型的な失敗するパターンですね。

 

今回は「想い」があるので、まずは書くことから始めようと思っています。

 

ですが、最初の記事は育児とは全く関係ありません。笑

 

 

Twitterウィジェットを生成する

 

とりあえずTwitterのタイムラインは表示させたいと思ったので、ウィジェットを追加しました。

 

基本は下記のブログを参考にさせていただいたのですが、リンクをクリックしたときに開くページが画面キャプチャーとは異なり、かなり迷ってしまいました。

 

nohack-nolife.hatenablog.com

 

自分がやった手順は、

  1. プロフィールと設定から[設定とプライバシー]をクリック
  2. ウィジェット]をクリック
  3. [新規作成]をクリック
    ※ 選択肢がいくつかありますが、どれを選んでも「https://publish.twitter.com/#」のページに飛びました。
  4. 入力欄にプロフィールページのURL「https://twitter.com/Twitterアカウント)」を入力またはコピペして[→]をクリック
  5. [Embedded Timeline]を選択
  6. Codeをコピー
    ※Codeをクリックしたらコピーされました。

f:id:childcarepapa:20170514025258p:plain

f:id:childcarepapa:20170514030705p:plain

 

 

はてなブログのサイドバーに設置する

 

 ここからは、はてなブログでの設定です。

 

  1. [デザイン]画面に移動
  2. [カスタマイズ]を選択
  3. [サイドバー]メニューを開いて[モジュールを追加]をクリック
  4. モジュールの種類は[</> HTML]を選択し、名前とコピーしたTwitterウィジェットのCodeをペースト
  5. [適用]をクリック

f:id:childcarepapa:20170514032653p:plain

 

無事、ブログにTwitterのタイムラインが表示されました。

ただ、デフォルトの「Life」テーマでは下にかなり伸びてしまっているので、他のテーマや調整法については追って調べてみたいと思います。

 

 

※ 2017/05/15 追記

 

タイムラインを横に表示させたいので、テーマを公式の「Epic」に変更しました。

埋め込むタイムラインのサイズは、TwitterのDevelopersサイトに方法が書いてありました。

 

埋め込みタイムライン — Twitter Developers

 

<終わり>