Lum'Co's Diary

興味の赴くままに生きています ウフ♡

はてなブログにTwitterを埋め込みたい!

  本ページはプロモーションが含まれています

 

 

 

 

色んなブログ見てるとさ、ブログにTwitter埋め込んでる人多いよね。

▼・ェ・▼もマネして埋め込んだよ!ってお話しダヨ!

 

 

 

まえおき

▼・ェ・▼が今使ってるTwitterアカウントとかウィジェットの編集画面とかは、今年の始めくらいに作ってあったヤツなん。

 

色々調べてたらさ、なんかTwitterサイドで作成方法とか諸々変更されてんだね!

ってことで、これから埋め込み用のコード作成したい新規ちゃん用に、自分でもお試しで作ってみたよ!

▼・ェ・▼やっさすぃー!

 

 

「そんなことやってる時間あるなら、装備強化やろうず? ニッコリ」

 

 

ちょっとだけ、My ボスの『怖いニッコリ』が脳裏に浮かんだけどね。:;(∩´﹏`∩);:

▼・ェ・▼負けないよ!(๑•̀ㅂ•́)و✧

 

 

Twitterで埋め込み用のコードを作成する

f:id:bless-you:20161031224654j:plain

Twitter画面開くと、右上に自分のTwitterアイコンあるよね?

そのアイコンを左クリックすると・・・

 

 

 

f:id:bless-you:20161031225257j:plain

「プロフィールと設定」の項目が表示されるから、「設定」を選択するよ!

 

 

 

f:id:bless-you:20161031230323j:plain

ユーザー情報の画面が開くから、「ウィジェット」の項目を選択。

 

 

f:id:bless-you:20161031230748j:plain

ウィジェットの画面が開くから、「新規作成」を選択。

 

 

f:id:bless-you:20161031231153j:plain

自分のツイートした内容が表示される「プロフィール」を選択。

 

 

f:id:bless-you:20161031233654j:plain

目がチカチカするような青い画面が開くよ・・・( ꒪⌓꒪)

画像は▼・ェ・▼のアドレスだからね。

自分のアドレスをコピペしてね。

 

 

自分のアドレス???って人はね!!!

 

 

f:id:bless-you:20161031235430j:plain

Twitter画面で、自分のツイート数のところクリック!

開いたページのアドレスをコピペしたらいいよね!

 

 

コピペしたら、右端の「→」をクリック。

 

f:id:bless-you:20161031234545j:plain

左側の「Embedded Timeline」ってやつを選択。

 

 

 

f:id:bless-you:20161101001355j:plain

そうすると、コピーコードができあがるんだけども、これをこのままこぴぺするとですね。

タイムラインが下へ下へと垂れ流しが止まらなくなるんだよね!!( ꒪⌓꒪)

 

なので、とりあえず仮カスタマしとこか、そうしよか。

 

 

コピペする前にコードを仮カスタマイズ

f:id:bless-you:20161101002728j:plain

 

▼・ェ・▼の場合。

  • 「Height」:900
  • 「Width」:触らず
  • 「Light」: 触らず
  • 「Link color」:#F58EA8
  • 「Automatic」:触らず

 

「Light」を「Dark」へ変更すると、背景が暗くなるよ!

 

f:id:bless-you:20161101003609j:plain

「Link color」は、色のついたところをクリックすると、

Twitter側で用意してくれてる他の色に変更できるよ!

 

 

f:id:bless-you:20161101004634j:plain

▼・ェ・▼の場合はね、好きな色のコードを直接打ち込んだよ。

原色系のどぎつい色は好きじゃないからね。

好きな色に変えたいなって人は、Web色見本を参考にするといいよね。

 

▼・ェ・▼のお勧めは、「和色大辞典」の項目だよ!

 

 

設定が終わったら、「Update」のボタン押してね。

 

 

f:id:bless-you:20161101010446j:plain

コード配布画面に戻るから、「Copy Code」ボタンをクリック!

 

 

 

f:id:bless-you:20161101010718j:plain

コピー完了!

 

 

はてなブログのサイドバーに埋め込む

コピペしたコードを はてなブログのサイドバーウィジェットに貼り付けるよ。

 

サイドバーに新しいウィジェットを追加する方法は、

ダッシュボード(管理画面)▶ デザイン▶ カスタマイズ▶ サイドバー 

の順番で選択。

 

サイドバーの項目の下の方ににある『+モジュールを追加』を選択。

HTMLを選択したらコードを張り付け。

適用ボタンをクリックするのも忘れずにね!

 

 

f:id:bless-you:20161101013617j:plain

 

 

 完成画像

f:id:bless-you:20161101014622j:plain

 

 

はてなブログの記事中に特定のツイートを埋め込む

f:id:bless-you:20161101032106j:plain

日記の編集画面でさ、「Twitter貼り付け」のショートカット追加するといいよね!

 

 

f:id:bless-you:20161101032615j:plain

 「自分」「お気に入り」「タイムライン」タグで表示を切り替えられるよ。

好きなツイートをWクリックすればOK!

 

 

 

 

「お気に入り」とか「タイムライン」を選ぶと、他の人のツイートも同じ方法で埋め込むことができるよ。

ただ、もめる原因にもなり得るよね。:;(∩´﹏`∩);:

他の人のツイートを埋め込む場合は、相手に許可取った方がいいと思うよ! 

むしろ、他の人のツイートとか埋め込まない方がいんじゃないかな!

 

 

自分のツイートは問題ないと思うけども、それでも他の人にリツイしてる時とかは、

相手のIDをぼやかすとかの配慮はした方がいいんじゃないかな?

と▼・ェ・▼は思いますん。(相手が宣伝して欲しいタイプの人なら話はまた別)

 

 

まとめ

ブログにTwitter表示させると何がいいのかな?

 

▼・ェ・▼的には、よそ様のブログでTwitter表示されてると、

表示されてる部分だけチラ見するよね。

それだけでも、いっぱいわかることあるからさ。

 

▼・ェ・▼はほら、知りたい情報がそこにあるのかも大事だけど、

「書いてる人どんな人なのかな?」ってのも読み取るタイプだからさ。

気に入っちゃったらブクマして、たまに巡回するよね!

 

ってことで、ブログにTwitter埋め込むといいことあるんじゃないかな!

 

 

次回は、サイドバーに表示させたTwitterを

シンプルにカスタマイズする方法をシェアするよ! 

お楽しみに!

 

 

 

 

今回は、この辺でお終いです。

最後までお付き合いくださいまして、ありがとうございました。

情報をシェアしてくださる先人の皆々様に感謝。

 

どなたさまも素晴らしい Blog Life を楽しまれますように

愛と祝福を込めて・・ *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

 

゚*。.ღ ⊹⊱ 𝔏𝔬𝔳𝔢 & 𝔅𝔩𝔢𝔰𝔰 𝔶𝔬𝔲 ⊰⊹ ღ.。*゚

𝔱𝔥𝔞𝔫𝔨 𝔶𝔬𝔲.

𝔦 𝔩𝔬𝔳𝔢 𝔶𝔬𝔲.