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

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

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

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

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

https://www.thoughtbuzz.net/solutions

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

Thought Buzz

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

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

まちゃみん 4時間前

私は昔Webサイト作成をチラッとやってたのでHTMLもCSSも多少分かりますが、ブランクが長すぎて改めてカスタマイズ等に時間を割く気がしません。それでも一時期、頑張ってみようかと思ったけど、そんな時間があるなら記事を書いたり他の事を勉強したいと改めて思いました。人それぞれですけどね😅

KUЯӨuƧΛGI-くろさぎ 9時間前

-Modパックでカスタムシェーダーを作成できるようになりました：WIP -フリースピンを追加 -カスタマイズメニューでロードアウトのプリセットを保存できるようになりました -ModパックでCSSをModできるようになりました：制限つき

Sho Doi 11時間前

けど結局用意されている .text-xs ～ .text-6xl 以外のイレギュラーな指定が出てくるんだろうな。カスタマイズはできるようだけど。（予算がないものはデザインだとこのサイズで指定されているけど Tailwind CSS で対応できる範囲で指定しますね、で良いのか）

きこ🌍ライター見習い 16時間前

今日はHTMLとCSSの勉強できた！インターンでコーディングしてるしブログもカスタマイズしてるし、大体知ってるけどやっぱり一度ちゃんとコースを完了しておこうと思って。コツコツやっていこう〜😊

そうちゃ@サイト作成 20時間前

#WordPress 特に「#Cocoon」を使用している方へ、便利プラグイン「Shortcodes Ultimate」のスポイラーの #カスタマイズ例を記事にしました(更新)。スポイラーの代わりになるCSSだけの自作簡易スポイラーも載せたのでコピペでご利用いただけます。 so-cha-siki.com/shotcodes-ulti…

Haru@FUN 21時間前

昨日見出しと目次のカスタマイズを少ししました。ネットで探したCSSのコピペですが…笑少しずつ見やすくできたらな〜って感じですね。 #プログラミング初心者 #ブログ初心者 #ブログ blog-it.hatenablog.com/archive

コリス🍡 22時間前

前の記事: CSSリセット、2019年におすすめのカスタマイズ方法 coliss.com/articles/build…

krtsato クラッチ 22時間前

Next.js 書きたかったから Notion Blog 始めてみたけど，最初のカスタマイズは割とテコ入れ必要でつらみ。あと個人的に CSS Modules はあまり使いたくないので，Notion Blog のボイラーはちょっと厳しいかなと思う。

橋尾渡＠雑記ブログ運営中 22時間前

【過去記事紹介】 AddQuicktagをCSSでカスタマイズしてブログを魅力的にする方法 hashio-wataru.com/addquicktag-cs…

トレンドツイートトルネードのツイートをふきだしにするための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まとめ運営者が検証してみた