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

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

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

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

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

https://www.thoughtbuzz.net/solutions

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

Thought Buzz

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

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

まぴ 16時間前

私がこのウェブ屋さんの世界に魅了されたのは、アメブロのカスタマイズcssがわからなくて @eve3v さんにbackdround-imageの書き方を教えてもらったことがきっかけw BcLの壁紙を背景に設定できた時の喜びは今でも忘れない( ；∀；)

しぐさん/デザイナー⚜Graphic&Web&Movieマルチタスク実施中 17時間前

打ち合わせで昼休憩が飛んだのと、週末の勉強会が新型ウイルス対策で中止になったので、個人サイトの続きは週末に持ち越し。代わりにカスタマイズCSSで苦戦していたwordpress案件終わらせたー！ #たぶん1up

Syouhei@ブロガーエンジニア 21時間前

よし、#今日の積み上げ完了です😌 Progate ☑️HTML&CSS道場コース初級編 ☑️JavaScript Ⅲ 今日は久々に図書館で作業したからか、タスクが少ないとはいえ、昨日よりも早く終われた気がします。あと昔にC言語していたのと、最近WordPressテーマのカスタマイズをしたのが、わりと効果あるなと感じます

test ツイッターメディア - よし、#今日の積み上げ完了です😌
Progate
☑️HTML&CSS道場コース初級編
☑️JavaScript Ⅲ

今日は久々に図書館で作業したからか、タスクが少ないとはいえ、昨日よりも早く終われた気がします。

あと昔にC言語していたのと、最近WordPressテーマのカスタマイズをしたのが、わりと効果あるなと感じます https://t.co/PpkSNUnmmf

もか＊「シンプルでステキな毎日☆」 1日前

CSS…なかなか難しいけど、カスタマイズが反映されるとうれしいですよね♪ワードプレスの記事も楽しみにしています(*^-^*) / 他9件のコメント b.hatena.ne.jp/entry/s/www.ku… “はてなブログの記事横幅・固定ページ横幅の変更は余白調整で解決 - くうかんしんぷるライフ” (14 users) htn.to/49gXfaLmC8

あっしゅ@クリエイター 1日前

ワードプレスのカスタマイズにカスタムHTMLというものがあって、HTML書いて追加CSSでCSS書くとトップページでも割と好きなようにデザインできることを知りました💡 #駆け出しエンジニア

とがり 1日前

分からなくて手が止まる！Wordpressの子テーマカスタマイズ難しすぎ！ cssで変更は簡単で便利、でもゴリ押しで変更するよりphpファイルを触りたい時がある…難しい…どのファイルか辿り着くのも悪戦苦闘。でも先生はすぐ探せてる。早く先生みたいに対処できるようになりたい！ #プログラミング学習

システム担当K(出版社BookTrip) 1日前

初めて、知った。 JSカスタマイズや、CSSカスタマイズのファイルUPロード数って各30個までなんですね。ファイルを機能ごとに分けてたのでこれはヤバイ。 #kintone

TANI🤗@ebay輸出商品リサーチアドバイザー🔎✖︎はてなブロガー✍️ 2日前

【#Wordpress でのカスタマイズ】ワードプレスをやる前は、「htmlと、cssはできた方が良い」って聞いていた。やってみると、言っていることが分かった。やはり「知ってる、知らない」で作業に大きな差が出てくる。だから、プログラミングやっててよかったと思う。修正箇所がわかるから。

おて 2日前

また遅くなっちゃったけど、昨日は ✅プログラミングメンターの打ち合わせと研修 ✅HTML, CSSの勉強(0-4章) ✅WordPressカスタマイズしました～💓 #今日の積み上げ #駆け出しエンジニア #プログラミング初心者と繋がりたい

まい@30代子持ち会社員からエンジニアを目指す 2日前

#今日の積み上げ #16日目 ☑️通勤中”【保存版】Webフロントエンド基礎力（初心者向け）”を読む（知らんやついっぱいある使いたい～） ☑️ #Progate HTML&CSS中級編修了次はドットインストールで作ったようなプロフィールサイトを一からカスタマイズしてみようと思う #駆け出しエンジニアと繋がりたい

トレンドツイートトルネードのツイートをふきだしにするための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…

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

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