今回はツイッターとの連携という事でサイトやブログのサイドバーにタイムラインを表示する方法を紹介していきます。
もちろんこのブログで紹介しているアメブロでもシーサーブログでもWordPressでも表示させる事ができるので、それぞれのやり方も解説してみます。
ツイッターとの連携で集客効果やフォロワーを増やせる可能性もありますし、設置も簡単です。必要なのはツイッターのアカウントだけ。ちなみに色は「明るい」のと「暗い」の２種類から選ぶ事ができます。
これの設置方法を紹介していきます。
ツイッター設置の手順
ツイッターのタイムラインをサイドバーに表示するためにツイッターにログインしておきます。ログインしたら右上の歯車のマークをクリックして「設定」をクリック。
クリックしたら左のサイドバーに「ウィジェット」という項目があるのでクリック。
ここで「ウィジェット」の「新規作成」をクリックします。
次の画面で各種設定ができます。
画像を表示するかどうかや高さ、それから最初の画像で紹介したように「明るい」と「暗い」の２種類のテーマが選択できます。任意で変更をして「ウィジェット」を作成をクリックすると下にコードが表示されます。
このコードをサイドバーに貼り付ければ完成です。
Seesaaブログの場合
シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、「自由形式」をサイドバーに追加してこのコードを追加。
また、ブログで表示を確認してみて上や下のコンテンツとの余白が欲しい（詰まっている）場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。
それから自由形式にタイトルを付けて表示したい場合、例えば「ツイッターのタイムライン」とかタイトルを表示したい場合はこの記事を参考にして下さい。
⇒Seesaaブログの自由形式のタイトルを表示させる方法
アメブロに追加する場合
アメブロに追加する場合は「マイページ」右上の設定マークをクリックして「プラグインの追加」をクリック。
プラグインの追加というページになるので「フリープラグイン」をクリックして取得したコードを追加して保存。
「新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら」という表示がでるので「こちら」という部分のリンクをクリックします。
それでコードを追加したフリープラグインをサイドバーの好きな位置に移動させれば完了です。
また、アメブロの場合もブログで表示を確認してみて上や下のコンテンツとの余白が欲しい（詰まっている）場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。
WordPressに追加する場合
WordPressの場合は管理画面から「外観」⇒「ウィジェット」と進みます。
サイドバーに「テキスト」を追加してテキスト内にコードを追加して「保存」すればOK。
WordPressの場合もブログで表示を確認してみて上や下のコンテンツとの余白が欲しい（詰まっている）場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。
以上ブログのサイドバーにツイッターのタイムラインを表示する方法です。他にも任意のツイートを記事内で紹介する方法もあるので紹介しておきます。
コメント
しげぞう様
りたです。先程の件ですが、時間が解決してくれました。
また、PCのみタイムラインがみえる設定も完了いたしました。
お騒がせして申し訳ございません。
今後共、宜しくお願い致します。
しげぞう様
度々すみません。現在Twitterの埋め込みタイムラインを色々いじっていたら、修正できない箇所が発生していまったので、質問させて下さい。
Twitterの埋め込みタイムラインの幅やスマホのみ非表示など設定していたら、スマホのホーム画面における埋め込みタイムラインが編集できなくなってしまいました。
これはまずいと思い、ひとまずTwitterの埋め込みタイムラインのコードを全消去したのですが、それでもスマホのホーム画面の埋め込みタイムラインだけ残っている状態です。
他の記事では削除することができました。
色々調べたのですが、原因不明でお伺いしている次第です。
幅を修正するために挿入したコード
twitterタイムライン
CSS
div.twitter_widget_style {
width: 300px;
}
スマホのみ非表示したく、挿入したコード
記事の更新はこちらから！
twitterのタイムライン
何かしらコードミスによる影響なのでしょうか？それとも時間による問題なのでしょうか？
本当に質問を何度も連投してしまい、本当に申し訳ございません。
お手隙の間に、ご教授して頂ければ幸いです。
何卒、宜しくお願い致します。
しげぞう様
迅速なご返信、誠にありがとうございます。
クラスですが、私が勘違いしていました。誤解をお招きしてしまし、大変申し訳ございませんでいした。
タイトルですが、今までしげぞう様から頂いたコードから解決することができました！もう少し自分で考えるべきでした。これからはもう少し考えてから質問します。本当にすみません。
また、ツイッターのタイムラインの位置調整、承知致しました。非常に悩ましいところですが、SNSからの流入は貴重なので、設置します！
今後も質問すると思いますが
何卒、宜しくお願い致します。
りた様
コメントありがとうございます。１つ１つ回答してみますね。
１．タイトルについて
タイトルというのは見出しの事だと思います。私の場合はFacebook、Twitterを呼び出す前に見出し「h4」を使って見出しを設置してます。なので、固定ページと個別ページそれぞれTwitterのタイムラインを設置するコードの直前に見出しタグを入れるとタイトル（見出し）になります。
また、「h4」の見出しは装飾されていないので、スタイルシートで他の見出し同様に装飾をする必要があります。これは「h3」を使ってもいいかと思います。
２．Twitterの位置調整について
クラス名「tt」が見当たらないのです、すみません。私が見つけられないだけかもしれませんが、一応SNSボタンの下にあるようなので、SNSボタンの下に余白を作ります。スタイルシートに次のコードを追加でOKかと思います。
.share { margin-bottom: 30px; }３．スマホのタイムラインについて
Twitterのウェイジェットは高さだけを指定するタイプだったと思いますので、横幅は自動で調整されると思います。TwitterやFacebookの表示はJavaScriptを使うので若干読み込みに時間がかかる場合もあります。表示速度をあげる観点で言えば本当は外した方が良いのかも知れませんが、これは何を優先するかで変わってくると思いますので、りた様の判断になると思います。
また何かあればコメント下さい。
しげぞう様
いつもお世話になっております。りたです。
本日、twotterでブログ更新しようと考え、サブアカウントを入手して、単一記事及び固定ページにタイムラインを貼り付けることができました。そこで、数点ご質問したいことがあります。
①タイトルについて
しげぞう様のブログのようなタイトルを作るにはどのようばコードを挿入すればよろしいのでしょうか？
②twitterのタイムラインにおける位置について
上下の余白を作りたいのですが、どうようなコードをうちこめばよいのでしょうか？クラスはttに定義致しました。
③スマホにおけるtwitterのタイムラインについて
twitterのタイムラインを貼り付けた後に、スマホで確認したのですが、負荷がかかっているように感じました。スマホ用に幅を指定したわけではないのですが、自動的に幅が修正されていたので、これが原因かと思いました。
スマホ用に幅を指定する方法をご教授して頂ければ、幸いです。
しげぞう様に頼りっきりで大変恐縮ですが、何卒宜しくお願い致します。
らすかる♪様
わざわざありがとうございます！また分からない部分や質問などありましたらいつでもコメント下さいませ！今後もよろしくお願い致します。
アメブロでの追加方法がわからなかったので参考にさせていただきました
細かく説明されててとてもわかりやすかったです
ありがとうございました(*^_^*)