数ある中から当ブログを訪問していただきありがとうございます
この記事では
ブログに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” |
カラーに関して
こちらの配色を参考にさせてもらっています
カスタマイズ方法
カスタマイズは簡単です
下の画像のように
タイムラインのコード『赤色の線』が引かれた間にカスタマイズコードを挿入するだけです
注意点は
- コードとコードの間は『半角スペース』で1マス空けることです
- 同じ種類のコードdata-chrome=などは『””』の間に複数入力できます
参考までに今私が使っているサイズは
横幅:320 縦幅:550 になります
まとめ
いかがでしょうか
ブログもTwitterも
お互い利用することで
相乗効果が発揮する可能性が上がります
やれることは全てやる精神で
今後もチャレンジしていきましょう
おすすめ書籍
当ブログでは
アフィリエイトで収入を目指したい!
しかし
ブログ運営は未経験で初心者である
そんな方に向けて
ブログ運営の仕方からアフィリエイトの始め方までを
初心者アフィリエイターにおすすめなブログサービス
はてなブログ
を使用して分かり易く解説していく
ブログを目指しています
スポンサーリンク
自己肯定感アップ!我が子に合った「ほめ方」がわかる!
伝え方コミュニケーション検定
最後まで読んでいただきありがとうございました