つなろっく

イロトリドリな毎日

はてなブログにTwitterのタイムラインを埋め込む方法

f:id:pea-nut:20180212095349j:plain

おすっ!つな(@tu_na_69)です(@_@。

こんな雪の日には、ブログのサイドバーにTwitterのタイムラインを埋め込みしたいなぁ、なんてことを思うのです。

 

あなたも同じ考えでしたか。

それでは早速やってみましょう。 

埋め込みコードを作る

Twitterのタイムラインを埋め込むためのコードを作ります。

↓「Twitter publish」のサイトへGO

Twitter Publish

 

①空欄にTwitterのURLを入力して「enter」を押します。

 

f:id:pea-nut:20180201183735p:plain

 

注:アカウントではありません。

URLです。

わたしのサイトだと↓こちら

https://twitter.com/tu_na_69

よろしければフォローもどうぞよろしくお願いします。

あんまりつぶやいていません。ごめんなさい。

忙しくてつぶやいている暇がない。

記事を書く時間はあっても←こっちの方が時間がかかっているけれども。

あっ、また話が脱線しました。すみません。

 

②タイムライン表示を選んでクリックします。

f:id:pea-nut:20180201185718p:plain

左の「タイムライン」を選びます。

 

③コードをコピーします。

f:id:pea-nut:20180201190049p:plain

②の画像をクリックすると、下に生成されたコードが表示されます。

「Copy Code」をクリックして、コピーします。

コードの下にはTwitterのタイムラインも表示されますよ。

 

ブログにコードを貼り付ける

 ①ダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」をクリックします。

 

f:id:pea-nut:20180130113054p:plain

②一番下にある「+モジュールを追加」をクリック。

f:id:pea-nut:20180131000847p:plain

③</>HTMLをクリック

④タイトルを入力

 「twitterタイムライン」とか「フォローしてね」とか、好きなタイトルを入力してください。

⑤コピーしたコードを貼り付けます。

⑥「適用」をクリックして完了です。

タイムラインをカスタマイズ

コピペしたコードに、ピンクとグリーンの下線部分を追加挿入して、サイズと表示件数をカスタマイズしました。

f:id:pea-nut:20180201193115p:plain

サイズをカスタマイズ

デフォルト(初期設定)では、タイムラインはかな~り長いのでサイズを調整します。

幅(width="")と長さ(height="")で調整できますが、長さは表示件数で調整するので、ここでは幅だけにしました。

表示件数をカスタマイズ

サイズのカスタマイズで長さ(height)を設定することも可できますが、それよりも表示件数を設定したほうがすっきりします。

表示件数は1~20の間で設定できます。

「20」にするなら、長さ設定したほうがいいだろうけど(;^_^A

ここでは、「3」に設定しています。

だいぶすっきりします。

まとめ

ブログにTwitterのタイムラインを埋め込むことで、さらに動きのあるサイトになったと思います。

はてなブログとTwitterを連携させたい方はこちらの記事を参考にどうぞ。

pea-nut.hatenablog.com

pea-nut.hatenablog.com

記事を紹介してくれたサイト

この記事が参考になったと言及してくださったサイトを紹介しています。ありがとうございます。

はてなブログで「続きを読む」を使ってトップページを一覧ですっきり!

f:id:pea-nut:20180614173530j:plain

おすっ!つな(@tu_na_69)です(^0_0^)

はてなブログのトップページを「続きを読む」機能を使って、すっきりさせたい!と思います。

続きを読む

はてなブログのサイドバーで「おすすめの記事」をピックアップしよう

f:id:pea-nut:20180130111732p:plain

おすっ!つな(@tu_na_69)です(*‘ω‘ *)

はてなブログのサイドバーでおすすめ記事を紹介してみたいと思います。

 

続きを読む

はてなブログのサイドバーにInstagramのウィジットを埋め込みしよう

f:id:pea-nut:20180131083032j:plain

 

おすっ!つな(@tu_na_69)です(V)o¥o(V)

ブログのサイドバーにInstagramのウィジェットをいれて、連携させてみましょう。

無料ブログやWordpressなど、いろいろなサイトでつかえます。

続きを読む

はてなブログのヘッダーにオリジナルのタイトル画像を使ってみよう

おすっ!つな(@tu_na_69)です(≧▽≦)

はてなブログのヘッダーをおしゃれにカスタマイズ!

続きを読む

ブログをはじめて1か月のアクセス数【2018年1月の運営報告】

f:id:pea-nut:20180131231854j:plain

おすっ!つな(@tu_na_69)です。

長い間放置していたこのブログを今月から少しづつ再開しています。

「今月のアクセス数」を発表します(`・ω・´)ゞ

続きを読む

はてなブログとTwitterを連携させて使いこなす

f:id:pea-nut:20180212100441j:plain

おすっ!つな(@tu_na_69)です(^_-)-☆

はてなブログとTwitterを連携させてたいと思います。

 

 

はてなブログとTwitterを連携させると…

①Twitterでブログ更新のお知らせができる

②Twitterからブログを読みに来てくれる人がいる(かもしれない)

などメリットがあります。←効果があるかどうかは、やり方次第だけど。

 さっそく、はてなブログとTwitterを連携させてみましょう。

 

 つなろっくおすすめの1曲を聴きながらどうぞ(*‘∀‘)

When I

When I

  • Survive Said The Prophet
  • ロック
  • ¥250
  • provided courtesy of iTunes

はてなブログとTwitterを連携させる

f:id:pea-nut:20180127220614p:plain

①ダッシュボードから「アカウント設定」→「外部サービス連携」をクリックします。

②「Twitter連携設定」が「現在無効です」となっていますよね。

 となりの青い文字で書かれた「有効にする」をクリックします。

③アカウント認証ページで「Twitter認証画面にすすむ」をクリックします。

④認証画面で「ユーザー名」と「パスワード」を入力します。

⑤「現在有効です」と表示されれば連携完了です。

 

「フォローする」ボタンを設置する

ブログのサイドバーに「フォローする」ボタンを設置します。

①ダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」をクリックします。

②「プロフィール」の「編集」をクリック。

③Twitterのフォローボタンにチェックを入れる

④「適用」をクリックして完了。

f:id:pea-nut:20180127222532p:plain

 

ブログをチェックしてみてください。

プロフィール欄にtwitterのフォローボタンが挿入されました。

 

Twitterでお知らせする方法

f:id:pea-nut:20180127223248p:plain

 

Twitterに更新した記事を投稿したりして、お知らせしたいと思います。

TwitterのマークをクリックしてツイートしてもOK。

ブックマークでもTwitterに投稿されます。

これで新着記事のお知らせとかできますね(^^♪

 

 Twitterをさらに連携させる

 Twitterとはてなブログを連携させたら、タイムラインウィジェットをサイドバーに挿入したり、「フォローする」ボタンを設置することもできます。

こちらの記事で紹介しています。

pea-nut.hatenablog.com

 

pea-nut.hatenablog.com

記事を紹介してくれたサイト

この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。

ツイッターの自己紹介文・ホーム画面にブログのリンクを貼る方法! - スタべえlog

ブログ開設初日でアクセス獲得する方法 - 初心者ブロガーでもできる対策 - 30代OLのリッチな憧れ
【初心者でも出来る】はてなブログとTwitterの連携! - 林檎を買うまでには
Twitter連携でフォロアー拡大♪過去ブログの続きです~ - わたしとかぞくと... (サイドビジネスとパートと育児の狭間にて)
Twitterはじめてみました - 職業訓練校のまいにち~職業訓練ではどんな授業をしているのか~
はてなブログとTwitterを連携させてみた - 一匹狼の回顧録

はてなブログの大見出しは「h2タグ」ではない!?

はてなブログ見出しにh2タグがない!?

おすっ!つな(@tu_na_69)です(=゚ω゚)ノ

問題発生です!!!!!

先日、ブログの見出しをおしゃれにカスタマイズした時に、「あれ?」と思うことがありまして・・記事の中に「h2」タグが見当たあらない(。´・ω・)?

続きを読む

もうすぐバレンタインデー!インスタ映えするビジュアル系チョコレート5選

f:id:pea-nut:20180614230829j:plain

おすっ!つな(@tu_na_69)です(=゚ω゚)ノ

もうすぐバレンタインデーですね。

インスタ映えするキュートなチョコレートを集めました!

続きを読む