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

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

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

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

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

https://www.thoughtbuzz.net/solutions

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

Thought Buzz

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

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

ケンジ | Web制作エンジニア 1時間前

／　知らない人はいない Animation.css ＼「Animate.css」というライブラリでより、実践的なアニメーションを使い、カスタマイズすれば理解が深まりますね✨ 個人的には Canvas 2D, Three.jsの学習はかなり先になりそうです... animate.style #駆け出しエンジニアと繋がりたい

くまがい　かずき 2時間前

最近、WordPressとかshopifyのテーマカスタマイズするとき、謎に画像がずれてしまう現象が多発してたんだけど、margin-inline-startが原因だとわかった！今まで原因がわからず、拡張性の低いposition-absoluteで妥協してたけど、原因がわかってスッキリした😎 #css developer.mozilla.org/ja/docs/Web/CS…

💥よしお💥@副業月収1万 4時間前

@sashigentle しかも今回は、ＣＳＳでのカスタマイズも一切しないので、本当にマウス作業で終了って感じになりそうです💦 でも完成したときは、意外と達成感を感じます✨

カロカイ企画 5時間前

昨日はちょっとした画像をサイトトップに配置しないといけなくて。ファイル構成が複雑だから、焦ったけど対応した。コーダー専門でやっていないため組み方を自分で考えるのは難しく…すでにサイトにあるcssをカスタマイズする感じ。 Webディレクターはそのあたりの知識あると便利。

アサキテルミ@ウェブ★ビー 7時間前

ジンドゥーのカスタマイズはHTML、CSS、jQueryでバリバリコーディングしますが、それはデザイン構築のための単なる制作者側の都合です。お渡し後のジンドゥーは、通常のジンドゥーの操作だけで更新が可能です。というか、そういうふうに作られていないサイトはジンドゥーではNGだと考えています。

リュウペイ＠45歳以上サラリーマンのこれからを応援します！ 8時間前

🔷有料テーマ Wordpressはどんなテーマ使ってますか？ボクは有料テーマを使ってます最初Wordpress標準テーマ使ってましたがカスタマイズするには自分でいろいろやらないといけないおかげでCSS/HTML少し勉強できたんですけど最初から有料テーマにしとけば良かったなあと今となっては思います

かぶと@がんばらないブロガー 8時間前

目次のCSS自分で作ってカスタマイズした！だいぶきれいになって満足☺️

ebookbrain@電子書籍,Wifi,プログラミング 16時間前

「Simple Author Box」の使い方・CSSのカスタマイズ | Wordpressのプラグイン【ebookbrain】 ebookbrain.net/?p=11981

test ツイッターメディア - 「Simple Author Box」の使い方・CSSのカスタマイズ | Wordpressのプラグイン【ebookbrain】 https://t.co/mfbl1ojbNB https://t.co/Kn5FCdptre

Louis Alexa 1日前

本当はTwitterでもCSSを追加して、カスタマイズしたいんだけどなあ。セキュリティポリシーに違反するとかいう理由でCSSが編集できるChrome拡張機能がブロックされるからね。

クリマル/心理学×習慣化で成長という名の報酬を得る男 1日前

#おはようございます🌄 今日から夜勤🌙🏢 ☑️#ブログカスタマイズ ☑️#筋トレ CSSイジってたら、原型なくなった😅 やっぱりバックアップはとっといたほうが無難😓 #ブログ初心者と繋がりたい #ブログ初心者

‏ Λ__Λ 1日前

予約語的な tag に class も付けず CSS で破壊するの怖いなと思ったけど任意の HTML をユーザカスタマイズしようと思うと必ずしも悪いわけではないかと思った

ぶきっちょ@おちゃめな食いしん坊 1日前

@arikawa0812 今はSWELL使ってますー( *˙ω˙*)و SWELLなら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カ…

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

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