↑トップへ

スポンサーリンク
スポンサーリンク
2015年07月31日

SeesaaブログにTwitterウィジェットを追加する方法

スマホを持つ手.jpg
はろーわーるど。


サイドバーに念願のツイッターウィジェットを埋め込みました。
これで変なことつぶやけなくなりましたね。笑


今回はSeesaaブログにツイッターのタイムラインを埋め込む方法と、そのカスタマイズ方法もご紹介します。


埋め込むツイッターウィジェットを作成する


こちらの記事を参考にさせていただきました。
ブログなどへのツイッターウィジェット表示方法は?エラーになる場合は? | 農業アフィリエイターひかり


記事に詳しく書かれていますが、結構簡単にできます。
要約すると、


  1. ツイッターの設定画面から「ウィジェット」を選択

  2. ウィジェットを作成する

  3. 出力されたタグをブログに張り付ける


こんなもんです。


Seesaaブログの場合はデザイン→コンテンツ→自由形式に張り付けてサイドバーに配置して保存、でいい感じになるかと思います。


ウィジェットのカスタマイズ


ツイッターのウィジェット新規作成画面ではウィジェットの高さやテーマ(明るいか暗いか)、それとリンクの色を決めることなどができます。


また、もうちょっとカスタマイズしたいという方は、こちらのドキュメント(英語)に更なるカスタマイズのやり方が載っています。
Embedded Timelines | Twitter Developers


Customize widget componentsのところを見てみてください。
ふわっと説明するとこんな感じです。


指定説明
noheaderヘッダーを消す
nofooterフッターを消す
nobordersウィジェットの枠線及び各ツイートを分ける線を消す
noscrollbarスクロールバーを消す
transparentウィジェットの背景の色を消す


これらのお好きなものを

<a class="twitter-timeline" href="自分のツイッターへのリンク" data-widget-id="ウィジェットID" data-chrome="noheader nofooter">@.......さんのツイート</a>...以下省略

のようにdata-chromeを使ってウィジェットのタグ内に記述します。


ちなみに私は上記5つすべて記述し、リンクの色もブログのリンクの色と合わせました。


おわりに


どうでしょうか。
思ったよりブログに馴染むウィジェットが作れて私は満足です。
特にtransparentがすごくいい。
あとはツイッター廃人アルファツイッタラーになるだけですね。


簡単なのでまだの人はぜひやってみてください。
では。


スポンサーリンク

スポンサーリンク
にほんブログ村 小遣いブログ SOHO・在宅ワークへ
posted by あらいぐま at 12:00 | Comment(0) | TrackBack(0) | Seesaaカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/423278627

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。