数ある中から当ブログを訪問していただきありがとうございます
この記事では
ブログにTwitterのタイムラインを設置する方法について
はてなブログユーザーに向けて解説しています
- Twitterからブログへ誘導したい
- ブログからTwitterへ誘導したい
- タイムラインの設置方法を知りたい
前回は
Twiiterとはてなブログの連携の仕方
Twitterからブログへの流入方法の解説でした
今回は逆です
ブログからTwitterへ流入するための窓口として
タイムラインを設置する形でやってみたいと思います
Twitterのタイムライン
ブログに設置するタイムラインとは
自身のツイート内容が表示されるウィジェットとのことです
ブログ内にウィジェットを設置することで
訪問者にツイートが目に留まり易くなり
ブログ訪問者からTwitterへ反応があるかもしれません
設置方法も
分り易く解説していますので
是非チャレンジしてみてください
タイムラインの設置方法
タイムラインの埋め込みコードを取得
まずはTwitterのプロフィールのURLをコピーします
- こちらからTwitterに移動できます
- プロフィールをクリックします
- プロフィールのURLをコピーします
- こちらからタイムラインのコードが取得できます
- プロフィールのURLを貼り付けます
- 『∨』をクリックします
- Embedded Timelineを選択します
- set customization options.をクリックすることで
サイズや色などを変更することができます
- 画像を参照
- Updateをクリックして埋め込みコードを更新します
- Copy Codeをクリックして埋め込みコードをコピーします
- ポップアップ画面が表示されます
- 右上の『×』をクリックしてコードの取得完了
- 次ははてなブログに設置方法を解説します
はてなブログに設置方法
タイムラインをはてなブログのサイドバーに設置する方法を解説します
- デザインメニューを開きます
- ①カスタム（スパナマーク）をクリックします
- ②サイドバーをクリックします
- ③『+モジュールを追加』をクリックします
- ④『＜/＞HTML』をクリックします
- ⑤タイトルを決めてください ※入力しなくてもOK
- ⑥取得したタイムラインの埋め込みコードを貼り付けます
- ⑦適用をクリックします
- ⑧新しくできたモジュールをドラックして表示順位を決めます
- ⑨変更を保存するをクリックして設置完了です
タイムラインのカスタマイズ
ブログにTwitterのタイムラインを設置することが出来ました
サイズや色などはコード取得時に変更できましたが
他にもタイムラインをカスタマイズできる部分がありますので
紹介します
カスタマイズ一覧
下の画像からカスタマイズできる項目を確認ください
| ①タイムラインの高さ（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” |
カラーに関して
こちらの配色を参考にさせてもらっています
カスタマイズ方法
カスタマイズは簡単です
下の画像のように
タイムラインのコード『赤色の線』が引かれた間にカスタマイズコードを挿入するだけです
注意点は
- コードとコードの間は『半角スペース』で１マス空けることです
- 同じ種類のコードdata-chrome=などは『””』の間に複数入力できます
参考までに今私が使っているサイズは
横幅：320 縦幅：550 になります
まとめ
いかがでしょうか
ブログもTwitterも
お互い利用することで
相乗効果が発揮する可能性が上がります
やれることは全てやる精神で
今後もチャレンジしていきましょう
おすすめ書籍
当ブログでは
アフィリエイトで収入を目指したい！
しかし
ブログ運営は未経験で初心者である
そんな方に向けて
ブログ運営の仕方からアフィリエイトの始め方までを
初心者アフィリエイターにおすすめなブログサービス
はてなブログ
を使用して分かり易く解説していく
ブログを目指しています
スポンサーリンク
自己肯定感アップ！我が子に合った「ほめ方」がわかる！
伝え方コミュニケーション検定 
最後まで読んでいただきありがとうございました