トレンドツイートトルネードで抽出したツイートをふきだし風に装飾する方法（TTTカスタマイズ）

投稿日 2017年10月18日
著者いたる
カテゴリー TTT（トレンドツイートトルネード）
カテゴリー TTTカスタマイズ

TTTテーマを使ってTwitterまとめサイトを作ると、どうしても同じようなデザインになってしまいますよね？

少しでもサイトを訪れた人に興味を持ってもらうためにデザインを差別化したい！そんな方のためにツイートをふきだし風に装飾する方法を紹介します。

※注意　カスタマイズする際は必ずバックアップを取った上、自己責任で行ってください。万が一トラブルが発生しても当サイトで責任は負いかねますのでご了承ください。

https://www.thoughtbuzz.net/solutions

こんにちは。2017年からアフィリエイトを始めた後発組アフィリエイターのいたるです。僕は今、Twitterまとめサイトを運営しています。今までアフィリエイトで全く稼げなかった僕ですが、Twitterまとめサイトを始めたことで開始２か月目で８万の報酬を発生させること...

Thought Buzz

トレンドツイートトルネードでこのようなデザインのふきだしが作れます！

試しに「CSS デザイン」でツイートを抽出してみました。

くろべぇ 8時間前

curlで取得できてるけど、ローカルに置いても読み込み完了しないから、cssとかカスタマイズしたテーマ周りでなんかupdateしたのがバッティングしてるんだろな

hiron@やっぱりWEB制作×子育て 10時間前

【カスタマイズ】 ★FAQのセクションを追加（Components>collapse>according exampleを使用） ★ページ全体のfont-familyの変更（style.cssに記述） DAY 13 Bootstrap復習①：自力でBootstrapサイトを作ってみようー Web制作コース初級編 daily-trial.com/lessons/web_si… #デイトラ #30DAYSトライアル

たしぎ@プログラミング 11時間前

#今日の積み上げ ✅WordPressテーマ作成 ✅HTML,CSS,PHP 最終段階ですね。😊 問題なければサーバにアップします。プラグインのカスタマイズに挑戦してしまったために、結構長い時間が掛かりましたが、挑戦してみてよかったなと、自信にもなりました。さて、次はSassです。

勝呂じゅん@🤱まじ卍とんこつラーメン🍜 11時間前

@jackumagic まず、ブログデザインをCSSカスタマイズできるデザインに変え、ヘッダー画像を入れ、全体の文字の色・フォントを変えたはずだったんだけど、開き直したら保存されてない……だと？！？！と一回なって、とりあえずやり直してみたけど、また開き直すの怖すぎて自己満で終わってる😇

ししぃ＠Webアプリケーションエンジニア 13時間前

@Uto79101145 私はGoogleで単語を調べた場合にほぼ調査メモを残していますよ😊 色々なツールを使いましたが、私の圧倒的オススメはScrapBoxです！メモ同士のリンクが非常に簡単に作れるのとCSSでカスタマイズできるところが魅力です😉

おだぎぃ🌵ブログ制作中 14時間前

@2525suman ほんとですね🐰‼️ 無料なのに進化し続けてくれるし cssの知識があれば自分でカスタマイズもしやすいしまだまだcocoonでやっていこうと思います🔥⤴️

みさ＠第二の人生謳歌中 15時間前

コーディングひと段落！ハンバーガーメニューのカスタマイズに悩まされ、私のコーディング力もまだまだだなと実感🙇💦 コピペに頼りすぎてもだめだなと反省しましたが、こういうページを見つけてしまうとついついブクマしてしまいます🥺 #駆け出しエンジニアと繋がりたい webdesignfacts.net/entry/css-draw…

ゆう@ぐうたら母ちゃん 15時間前

はてなブログ➡️ワードプレスJIN 移行を考えている方へカエレバ使うならamazlet風-2（cssカスタマイズ用）を使っておくべし❗️ そのままキレイに表示されます。違うデザイン設置してたのでデザイン崩れまくり。あ〜もっと早くに知っておきたかった😱😭😱😭 すべて設置仕直してます🤣 #はてなブログ

zeta_masa 16時間前

本日2記事目となる #ブログ更新を行いました！【THE THOR】ウィジェットタグクラウドのカスタマイズ masaa.net/2020/05/29/the… #thethor #blog #wordpress #CSS #HTML #ブログ #ブログ書け

らぴさん🐤 16時間前

CSSやらをいじって公式twitter.comをカスタマイズするChrome拡張機能とか作ってみたいな……

トレンドツイートトルネードのツイートをふきだしにするためのCSS

TTTのツイートをふきだしにするには、カスタマイズ画面の追加CSSに以下のコードを記述してください。

.fetch-tweets{
     width:90%;/*抽出したツイート全体の幅調整*/
     padding:16px;
}

.fetch-tweets-body{
     border-radius:10px;/*ふきだしの角を丸くする*/
     position: relative;
     margin: 1.5em 0 0.5em 0;/*ふきだしの外側の間隔調整*/
     padding: 20px 20px 40px 20px;/*ふきだしの内側の間隔調整*/
     width: 90%;/*ふきだし全体の幅調整*/
     background: #eee;/*ふきだしの背景色*/
}

.fetch-tweets-body:before{
     content: "";
     position: absolute;
     top: -30px;/*ふきだしのとんがりの上下の位置調整*/
     left: 25px;/*ふきだしのとんがりの左右の位置調整*/
     margin-left: -15px;
     border: 15px solid transparent;
     border-bottom: 15px solid #eee;
}

.fetch-tweets-text{
     font-size:100%;/*ツイートの文字サイズ*/
     line-height:140%;/*ツイートの上下の文字間隔*/

.fetch-tweets{

width:90%;/*抽出したツイート全体の幅調整*/

padding:16px;

}

.fetch-tweets-body{

border-radius:10px;/*ふきだしの角を丸くする*/

position: relative;

margin: 1.5em 0 0.5em 0;/*ふきだしの外側の間隔調整*/

padding: 20px 20px 40px 20px;/*ふきだしの内側の間隔調整*/

width: 90%;/*ふきだし全体の幅調整*/

background: #eee;/*ふきだしの背景色*/

}

.fetch-tweets-body:before{

content: "";

position: absolute;

top: -30px;/*ふきだしのとんがりの上下の位置調整*/

left: 25px;/*ふきだしのとんがりの左右の位置調整*/

margin-left: -15px;

border: 15px solid transparent;

border-bottom: 15px solid #eee;

}

.fetch-tweets-text{

font-size:100%;/*ツイートの文字サイズ*/

line-height:140%;/*ツイートの上下の文字間隔*/

これで、ツールを使ってツイートを抽出した無機質なイメージから、
アイコンがしゃべっているような生き生きしたイメージに代わるのではないでしょうか？

ぜひ、サイトを差別化したい人は試してみてくださいね。

トレンドツイートトルネードで抽出したツイートをふきだし風に装飾する方法（TTTカスタマイズ）

目次

トレンドツイートトルネードでこのようなデザインのふきだしが作れます！

トレンドツイートトルネードのツイートをふきだしにするためのCSS

トレンドツイートトルネードで価値のあるツイートを優先して表示させる方法とは？（T…

トレンドツイートトルネードでサムネイル画像を投稿ページに表示させる方法（TTTカ…

トレンドツイートトルネードは稼げない？Twitterまとめ運営者が検証してみた