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

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

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

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

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

https://www.thoughtbuzz.net/solutions

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

Thought Buzz

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

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

ブログを書かないブロガー「やみぃ」 14時間前

もうおわるから正解いうね。アフィンガーでち。死ぬほどカスタマイズできるでち。これだけでアフィンガーは強い。ストーク、jin、sangoで最初からCSSやjsやphpをゴリゴリ書くのは面倒だし、時間がかかるだぁ。 twitter.com/blog_yamii/sta…

やみぃの会社で良く使うワードプレスのテーマは何でしょうか。#ストーク #jin #アフィンガー #sango
— ブログを書かないブロガー「やみぃ」 (@blog_yamii) November 16, 2018

ウミ@創作 18時間前

cssの種類ってこんなにあるの……？とか、文字がだーっと並んでると目がチカチカするから、もうおばちゃんカスタマイズできないからそのまま使うわ。

33歳独身彼氏なしニート女@もうすぐ脱ニート 1日前

今日やること・ブログ書く・引っ越しの整理をする・引っ越しの整理をする・引っ越しの整理をする・本を読む・CSSのカスタマイズをする

ワタ＠フォートナイトクリエイター 1日前

僕が既存のブログサービスを利用せず、オリジナルドメイン取得してブログを書くかというと、一番は差別化（ブランド化）、あとはカスタマイズ性と微々たるものですが収益化も可能というところです。htmlとcssいじれる人はそっちのほうがいいですね。

とにかく前向きな話をするしなこ 1日前

ブログを作るのが大好きになったから、通ってる気功教室のホームページ作ったら、喜んでもらえた😊 cssでカスタマイズ気に入ってるので見てほしい😊 #はてブロ #ブログ「気」と「気功」について - むいきこう（無為気功）菊名教室 muikikou.hateblo.jp/entry/ki1

瑞貴 1日前

@wanzouko ロボ避けもがっつりいれたり、cgiをカスタマイズするのも当然、CSSで使いまくりとかやりたい放題でしたよね。実は有料ですが、サイトが残っていて、ちょっとした時のファイル置き場になってますよ

𝚃𝚎𝚁𝚊氏🍁 2日前

テーマのPHPとCSSをいろいろカスタマイズしてようやく公開できた…ブログ

rawfashion.mimoza.jp 3日前

WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置！ rawfashion.mimoza.jp/blog027/

test ツイッターメディア - WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置！ https://t.co/WHHDmvv9sJ https://t.co/Ui6Vi6qKFT

マッキー 3日前

AmazonJSタグをWPアソシエイトポストに全部張り替えたら、毎日ぽつぽつ発生するようになった。 WPAPもいいけど、ネットで公開されてるWPAPの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

情報発信に実績は不要！ゼロから情報起業家になる方法

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

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

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