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. 2020.07.10 | windows10, ファイル編集

    Windows 10対応のマウスジェスチャーソフト『StrokesPlus』
    右クリックしながらマウスで予め決められた軌跡を描くことをきっ…
  2. WordPress

    2020.05.24 | WordPress

    サイトの収益化を狙う時に必要な『Goolgeアドセンスの審査の申請方法』
    サイトの収益化を狙う時に必要な『Goolgeアドセン…
  3. 2020.05.05 | 画像編集

    Youtubeのサムネイルなど、WEB上で簡単ロゴ・バナー作成なサイト紹介
    今回オススメしたいサイトは、Canvaというサイトです。…
  4. hjsplit

    2020.04.05 | freesoft, ファイル編集

    圧縮・解凍ソフトの新定番!『CubeICE』
    RAR 解凍ソフト Lhaplusですが圧縮・解凍ソフトの新…
  5. WordPress

    2020.03.22 | WordPress, サイト作成

    WordPressデーターを丸ごと移動できる「All-in-One WP Migration」
    WordPressのデーターを丸ごと移動できる「All-in…

カテゴリー