30分集中のすゝめ

30分の集中を毎日続けよう。

【簡単HTML】サイドバーにTwitterを埋め込もう!【はてなブログ初心者向けカスタマイズ】

f:id:focuson30min:20210325175852p:plain

サイドバーにTwitterのタイムラインを埋め込んだので、そのやり方を紹介します!

 

1.コードの作成

 

Twitter Publish

↑このサイトを使うことで誰でも簡単に埋め込み用コードが作れます。

 

f:id:focuson30min:20210325195239p:plain

まずこの画面に自分のTwitterのURLを貼り付けます。

https://twitter.com/○○○」

この○○○のところにご自身のTwitterIDを入れて入力してください。

 

f:id:focuson30min:20210325195729p:plain



そうするとこういう選択画面になると思うので、左の「Embedded Timeline」を選択してください。

 

f:id:focuson30min:20210325195835p:plain

そしたら「set customization options.」をクリックします。

 

f:id:focuson30min:20210325200449p:plain

ここで埋め込みのオプションを設定できます。

縦は700くらい、横は320くらいがちょうどいい感じのサイズです!

「Light」のところは「Dark」にするとダークテーマ(黒基調)に変更できます。

「Automatic」は言語が自動で判断されるようになっているので、いじらなくてOKです。

設定ができたら「Update」を押します。

 

f:id:focuson30min:20210325200914p:plain

そしたらここの「Copy Code」を押して、クリップボードにコピーができました。

f:id:focuson30min:20210325200954p:plain

これが出ればOKです。

 

2.はてなブログツールバーに貼り付ける

コピーができたら、それをツールバーに貼り付けます。

管理画面の「デザイン→スパナマーク→サイドバー」を選択して、

f:id:focuson30min:20210325201146p:plain

下の方にある「モジュールを追加」をクリック。

f:id:focuson30min:20210325201310p:plain

モジュールの追加画面が出たら、「HTML」をクリックして、タイトルを入力して、その下の四角の中にさっきコピーしたタグを貼り付けます。

f:id:focuson30min:20210325201717p:plain

これで「適用」を押して、「変更を保存する」を押せば完了です!

 

3.完成

自分のブログを見てみると、サイドバーにTwitterのタイムラインが埋め込まれているはずです。

f:id:focuson30min:20210325201934p:plain

いい感じですね♪

ブログと一緒にTwitterもやられている方、埋め込んでみるとブログが賑やかになりますので、是非やってみてください!

 

今後もはてなブログで使える便利なものをいろいろ紹介していくので、ブックマーク・読者登録よろしくお願いします。

 

ブログ関連の他の記事はこちらから。

focuson30min.hateblo.jp

 

本ブログのメインコンテンツはこちらから。

focuson30min.hateblo.jp


f:id:focuson30min:20210324135303j:plain
f:id:focuson30min:20210324135350j:plain
f:id:focuson30min:20210324160622j:plain
f:id:focuson30min:20210324160630j:plain

f:id:focuson30min:20210324161718j:plain