若手エンジニアの小言。

仕事で役立つTIPSを配信していきます。~世界で一番おしりとふとももの間を追い求めるブログ~

はてなブログの体裁を整える001回目

はてなブログTwitterウィジェットを入れる方法

 

みんなさんこんにちは「たこ壺」です。

なんかブログの横にWordでいうところのナビゲーションウィンドウが欲しいなと。

他のブログにはあるのに自分のブログにはどうしてないのか。。教えて先生!

Google先生に「はてなブログ、サイドバー」で画像検索をかけてみました。

 

ヒットした記事はこちら。

はてなブログのデザインをカスタマイズしたいときに役立つサイト - はなこのブログ。

はてなブログをカスタマイズする際に超参考になる記事まとめ - hacogaki

はてなブログのサイドバーのカスタマイズ方法 [コピペで使える]

調べてみると思っていたよりも色々できそうだぞ!ひとつずつ実践していこう。

  Twitterウィジェットを作成する。

2016年6月にウィジェットの仕様が変わったらしくこちらの記事を参考にしました。

Twitterのタイムラインウィジェットをブログ設定する方法について | まさぼっち.net

おおまかな流れとしては

  1. Twitterサイトでウィジェットを作成
  2. HTMLコードをコピーする
  3. はてなブログの設定でサイドバーのモジュール追加
  4. コピーしてきたHTMLコードを貼り付ける

完成イメージはこちら(TLの追加とフォローアイコンの追加です)

f:id:takotuboice:20170409134654p:plain

 

なぜかページの一番下に出てきてしまいました。。

ウィジェットの配置についてはまた次の機会にします。

それでは実際の作業に移って行きましょう 。

 

1.Twitterサイトでウィジェットを作成

f:id:takotuboice:20170409135712p:plain

 Twitterウィジェット」 →「 プロフィール」とクリックしていきます。

急に英語のサイトが出てきますが大丈夫です。あなたは合っています。

https://twitter.com/自身のTwitterスクリーンネームを入力し「→」を押します。

f:id:takotuboice:20170409140251p:plain

 自身のブログに追加したい方を選択します。

TwitterのTL」または「フォローアイコン」

簡単な調整は「set customization options」で可能です。

f:id:takotuboice:20170409141931p:plain

「Copy Code」を押して下の画面が出れば成功です。

f:id:takotuboice:20170409141938p:plain

 あとはクリップボードにコピーされたコードを

はてなブログ管理画面から「工具アイコン」→「サイドバー」→「モジュールの追加」→「HTML」→「貼り付け」で作業は終了です。

 注:ページから抜けるときは忘れずに変更を保存してください。

 f:id:takotuboice:20170409143223p:plain

 

いかがだったでしょうか?思ったよりも簡単だったのではないでしょうか?

今回はここまで!みなさん良い1日をお過ごし下さい。