はてなブログにTwitterのタイムラインを埋め込んでみた

 

世界一やさしい ブログの教科書 1年生

はじめに

 

 

Twitterをブログ内に埋め込む方法を解説していくよ

 

 

 

下記のリンクからTwitteの公式サイトに飛びましょう。

Twitter Publish

f:id:Medicmed:20180503222127p:plain

twitterのアカウントを入力します。

下にスクロールして"Embedded Timeline"を選択すると

f:id:Medicmed:20180503222300p:plain

このような画面がでてきます。

あとは「Copy Code」をクリックして貼り付けたい場所にペーストすれば終わりです。

 

サイドバーに埋め込んでみた(PC版)

f:id:Medicmed:20180503222827p:plain

PC版だとこのように表示されています。

 

ヘッダーに埋め込んでみた(スマホ版)

f:id:Medicmed:20180503223138p:plain

スマホだとこのように表示されています。

 

【ブログの基本知識】PC版とスマホ版は違う?!

これからはてなブログ等を始める方向けなんですが、PC版とスマホ版で画面サイズが違うため基本的に別々の設定が必要になります。

「PC版の画面をスマホでもキレイに表示させたい!」となったら

レスポンシブデザインに対応している必要があります。

自分の場合はレスポンシブデザイン設定せずPC版とスマホ版で構成を変えているので、Twitterの埋め込むの際にも①サイドバーの埋め込み②スマホ版ヘッダーへの埋め込みの作業が必要になりました。

レスポンシブデザインについては、色々解説している記事がいっぱいありますのでぜひ勉強してみてください。

終わり。

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook