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. 2019.09.05 | windows10, 動画編集

    動画フォーマットの一括相互変換『BatchWOO!』がオススメ
    『BatchWOO!』は、動画フォーマットの一括相互変換でき…
  2. サイトカスタマイズ

    2019.02.26 | ファイル編集, 画像編集

    縮小専用の使えなくなった時におすすめしたいフリーソフト
    縮小専用と同じように、画像を簡単に小さくしたい時に使えるソフ…
  3. 2019.02.25 | freesoft

    ファイナライズしていないDVDのデーターを読めるソフト 『ReadDVDR』
    未ファイナライズのDVD-RからVTSを取り出すハードデ…
  4. 2019.02.25 | WordPress, サイト作成

    WordPressでhttpからhttpsにしたい時にする手順(エックスサーバーSSL化)
    WordPressでhttpからhttpsにしたい時にする手…
  5. 2019.02.24 | WordPress

    WordPressでサムネイル付き、新着投稿を表示するのにおすすめ
    新着投稿をしたときに、サムネイル付きで表示されたほうが、…

カテゴリー