twitter_181

Twitterタイムラインの埋め込みを短く短縮する方法

スポンサーリンク




Twitterタイムラインの埋め込みをブログやWEBサイトなどのページに、埋め込んでいる人も多くいると思いますが、

Twitterタイムラインを埋め込んだ際に、ピクセル数にて600以上に広がってしまい、

予想以上にスペースを取られてしまったという人も多くいるのではないでしょうか?

 

今回は、これの埋め込み手順とデザインカスタマイズの解説です。

スポンサーリンク

ツイッターのタイムラインの取得方法

まず、ツイッターのタイムラインの取得方法は、

https://publish.twitter.com/#

にて、取得することができます。

twittertimeline01

タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキ-か、矢印を押します。

 

twittertimeline01

次に、左側の「Embedded Timeline」をクリックします。

 

最後に、コードが表示されるのでこれをコピーして、ブログやWEBサイトに貼り付けます。

twittertimeline03

現状の確認(標準設定の場合)

標準設定だと、貼り付けを行った場合、以下のように表示されます。
twittertimeline04

およそ大きさは、

幅:360px、高さ:630pxほどの大きさになります。

標準設定の場合、非常に縦に長くなっています。

幅と高さの調整

現状がわかったところで、埋め込み用コードに手を加えていきます。

「“twitter-timeline”」の後ろに、調整用のコードを追加することで、自由にサイズ変更が出来ます。

幅と高さの調整の場合
幅:width=”**px”
高さ:height=”**px”

「**」の部分に任意の数字を入れてください。

ちなみに幅は標準設定だと、極端な場合以外はwidth:100%になります。

追加する際は、必ず前後に半角スペースを空けてください。

当サイトの場合は
幅の調整は必要なく、width:100%でいいので、高さの調節の実「 height=”400px” 」で指定しました。

以上の場合を踏まえて、当サイトの場合のコードは、

<a class="twitter-timeline" height="400px" href="https://twitter.com/freesoft_waza">Tweets by freesoft_waza</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

境界線の色の変更

次に、境界線の色の変更の場合は、

「data-border-color=”#***”」を追加します。
#***の部分に6桁のカラー番号を入れてください。

カラーが分らない人は、こちらを参照

<a class="twitter-timeline" height="400px" data-border-color="#009933" href="https://twitter.com/freesoft_waza">Tweets by freesoft_waza</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

リンク色の変更

最後に、リンクの色の変更です。

「data-link-color=”#***”」を追加します。
#***の部分にカラー番号を入れてください。

<a class="twitter-timeline" data-link-color="#6633ff" href="https://twitter.com/freesoft_waza">Tweets by freesoft_waza</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

 

 

まとめ

上で上げたように、色々とカスタマイズして変えることが出来ます。

上で上げた、すべての変更をしたい場合、<a class=“twitter-timeline”

の後にどんどんコードを入れていけば出来ると思います。

基本的には、幅を変えることで、整える形で、当サイトではやっていきたいと思っています。

スポンサーリンク





関連記事


人気サーバーランキング


おすすめ記事

自己紹介

フリーソフト好きな管理人が、自分のオススメするフリーソフトを勝手に乗せるサイトです。 ワードプレスについてはまだまだ勉強中です~。

最近の記事

  1. サイトカスタマイズ

    2017.09.25 | サイト作成

    おススメできる、大体の人が使っているドメイン取得サイト
    おススメできる、大体の人が使っているドメイン取得サイト…
  2. twitter_181

    2017.09.24 | Twitter

    ツイッターの片思い(フォローのみ)と両想い(相互フォロー)がわかる
    ツイッターの片思い(フォローのみ)と両想い(相互フォロー)が…
  3. twitter_181

    2017.09.24 | Twitter, サイト作成

    相互フォローになっていないユーザーを確認できる[ツイッター]
    ツイッターは、自分のつぶやきや、相手の情報発信を見るうえで、…
  4. サイトカスタマイズ

    2017.09.02 | アフィリエイト, サイトカスタマイズ, サイト作成

    アフィリエイトリンクを支援ツール作成サイト『カエレバ』『ヨメレバ』のカスタマイズ方法
    アマゾンや楽天の商品を紹介する事に使いやすい、『ヨメレバ』と…
  5. twitter_181

    2017.08.20 | Twitter, サイト作成

    Twitterタイムラインの埋め込みを短く短縮する方法
    Twitterタイムラインの埋め込みをブログやWEBサイトな…

カテゴリー