ブログ堂

アフィリエイター応援ブログ ブログの作り方から収入を得るまでを分り易く解説 未経験や初心者の方が見ても理解できるようなブログを目指しています

ブログ堂

はてなブログ|Twitterタイムラインの設置方法からカスタマイズの仕方まで

f:id:hato4268:20200929224440j:plain

数ある中から当ブログを訪問していただきありがとうございます

 

 

この記事では

ブログにTwitterのタイムラインを設置する方法について

はてなブログユーザーに向けて解説しています

 

こんな方におすすめ
  • Twitterからブログへ誘導したい
  • ブログからTwitterへ誘導したい
  • タイムラインの設置方法を知りたい

 

 

 

前回は

Twiiterとはてなブログの連携の仕方

Twitterからブログへの流入方法の解説でした

 

 

今回は逆です

ブログからTwitterへ流入するための窓口として

タイムラインを設置する形でやってみたいと思います

 

 

 

Twitterのタイムライン

ブログに設置するタイムラインとは

自身のツイート内容が表示されるウィジェットとのことです

 

f:id:hato4268:20200929130202j:plain

 

 

ブログ内にウィジェットを設置することで

訪問者にツイートが目に留まり易くなり

ブログ訪問者からTwitterへ反応があるかもしれません

 

設置方法も

分り易く解説していますので

是非チャレンジしてみてください

 

 

タイムラインの設置方法

タイムラインの埋め込みコードを取得 

まずはTwitterのプロフィールのURLをコピーします

タイムラインコードの取得
  1. こちらからTwitterに移動できます
  2. twitter.com

タイムラインコードの取得
  1. プロフィールをクリックします

f:id:hato4268:20200929130241j:plain

 

 

 

タイムラインコードの取得
  1. プロフィールのURLをコピーします

f:id:hato4268:20200929130313j:plain

 

 

 

タイムラインコードの取得
  1. こちらからタイムラインのコードが取得できます
  2. publish.twitter.com

タイムラインコードの取得
  1. プロフィールのURLを貼り付けます
  2. 』をクリックします

f:id:hato4268:20200929130326j:plain

 

 

 

タイムラインコードの取得
  1. Embedded Timelineを選択します

f:id:hato4268:20200929130335j:plain

 

 

 

タイムラインコードの取得
  1. set customization options.をクリックすることで
    サイズや色などを変更することができます

f:id:hato4268:20200929130359j:plain

 

 

 

タイムラインコードの取得
  1. 画像を参照
  2. Updateをクリックして埋め込みコードを更新します

f:id:hato4268:20200929130408j:plain

 

 

 

タイムラインコードの取得
  1. Copy Codeをクリックして埋め込みコードをコピーします

f:id:hato4268:20200929130425j:plain

 

 

 

タイムラインコードの取得
  1. ポップアップ画面が表示されます
  2. 右上の『×』をクリックしてコードの取得完了
  3. 次ははてなブログに設置方法を解説します

f:id:hato4268:20200929130438j:plain

 

 

 

はてなブログに設置方法

タイムラインをはてなブログのサイドバーに設置する方法を解説します

はてなブログに設置方法
  1. デザインメニューを開きます
  2. ①カスタム(スパナマーク)をクリックします
  3. ②サイドバーをクリックします
  4. +モジュールを追加』をクリックします
  5. </>HTML』をクリックします
  6. ⑤タイトルを決めてください ※入力しなくてもOK
  7. ⑥取得したタイムラインの埋め込みコードを貼り付けます
  8. ⑦適用をクリックします
  9. ⑧新しくできたモジュールをドラックして表示順位を決めます
  10. ⑨変更を保存するをクリックして設置完了です

f:id:hato4268:20200929130447j:plain

f:id:hato4268:20200929130457j:plain

 

 

 

 

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

ブログにTwitterのタイムラインを設置することが出来ました

サイズや色などはコード取得時に変更できましたが

他にもタイムラインをカスタマイズできる部分がありますので

紹介します

 

カスタマイズ一覧

下の画像からカスタマイズできる項目を確認ください

f:id:hato4268:20200929181457j:plain

①タイムラインの高さ(px単位) data-width=”〇〇〇”
②タイムラインの幅(px単位) data-height=”〇〇〇”
③テーマ色を「Light」に data-theme=”light”
④テーマ色を「Dark」に data-theme=”dark”
⑤リンクの色 data-link-color=”#〇〇〇”
⑥境界線の色 data-border-color=”#〇〇〇”
⑦ヘッダーを非表示にする data-chrome=”noheader”
⑧フッターを非表示にする data-chrome=”nofooter”
⑨境界線を消す data-chrome=”noborders”
⑩スクロールバーを非表示にする data-chrome=”noscrollbar”
⑪背景を透明にする data-chrome=”transparent”

 

カラーに関して

 こちらの配色を参考にさせてもらっています

colorhunt.co

 

 

カスタマイズ方法

カスタマイズは簡単です

下の画像のように

タイムラインのコード『赤色の線』が引かれた間にカスタマイズコードを挿入するだけです

 

注意点は

  1. コードとコードの間は『半角スペース』で1マス空けることです
  2. 同じ種類のコードdata-chrome=などは『””』の間に複数入力できます

 

参考までに今私が使っているサイズは

横幅:320 縦幅:550 になります

f:id:hato4268:20200929182822j:plain

まとめ

いかがでしょうか

 

ブログもTwitterも

お互い利用することで

相乗効果が発揮する可能性が上がります

 

 

やれることは全てやる精神で

今後もチャレンジしていきましょう

 

おすすめ書籍

30分で達人になるツイッター

 

当ブログでは

アフィリエイトで収入を目指したい!

しかし

ブログ運営は未経験で初心者である

 

そんな方に向けて

 

ブログ運営の仕方からアフィリエイトの始め方までを

初心者アフィリエイターにおすすめなブログサービス

はてなブログ

を使用して分かり易く解説していく

ブログを目指しています

 

スポンサーリンク

自己肯定感アップ!我が子に合った「ほめ方」がわかる!
伝え方コミュニケーション検定

 

最後まで読んでいただきありがとうございました