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

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

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

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

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

https://www.thoughtbuzz.net/solutions

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

Thought Buzz

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

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

ユタカ@柴犬系ブロガー/webデザイナー 2時間前

ブログの投稿を通して、ブログの枠組みになるwordpress　に触れてきたのでそのカスタマイズができるようになるためにHTML→CSS→JavaScriptと表よりの学習と作品づくりをしています。とはいえ、将来は裏の処理までできるようになったほうが価値も楽しさも増えるので、Rubyにも挑戦したい😊

クノ 3時間前

・トップの謎の解明・swiper周りのcssがカスタマイズできてない解明・ローディングの絵を事前にDL とりあえずここからや

nihei tomotaka | mota @🇲🇾KL 6時間前

html,cssとかJs系やって勉強してるけどいま、ある教育メディア事業の立ち上げで wordpressゴリゴリにカスタマイズして phpとJsとかと日々格闘してるんだけど今までにないくらい成長してる気がする分からないけど、俺が担当してやるって決めて続けてるこの方が圧倒的に多分レベルアップする

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

【過去記事紹介】カエレバをCSSでカッコ良くカスタマイズする方法を大公開！コピー� hashio-wataru.com/kaereba-custom…

Mozory 11時間前

そういやCMSのカスタマイズとかは良くしてるけど最近普通にHTMLとCSSで書いてねぇな・・・（Discord眺めつつ）

emizo 11時間前

ず〜っと「blogにするとマシュまろさんのお目目の青がくすむんだよな〜」ってphp覗いたりカスタマイズしたcss見直してみてもそれらしいの無くて、何気にダッシュボード見たらコレですわ...(θ￢θ; という訳で、綺麗な写真になった猫達のまとめサイトをﾖﾛﾋﾟｺです(=´ω`=) emizosiroom.com/batakusaas/

ゆう@ブログ・カメラ好きとつながりたい 12時間前

@catwalk_mizoo カスタマイズいらず、もしくは管理画面から設定できると言いますが… 管理画面から設定するのって項目が多すぎて逆に分からんのです…。だったらCSS書くわ！！ってなる気持ち、わかってもらえたりします？

かずひ@フロントエンジニア 14時間前

Webデザイナーさん、フロントエンドエンジニアさん達に教えて欲しい🙇‍♀️ CSSの設計手法は何を使ってますか？？（以下をベースに会社・個人でカスタマイズしている場合も含む） #CSS #BEM #OOCSS #SMACSS #Webデザイナー #フロントエンド #Web制作

魔法使いの𝙬𝙚𝙗マーケティング@中田 14時間前

こりゃあありがてぇ…！bootstrapのCSSカスタマイズのミニチュートリアルまで記載がある。 Bootstrap 4 完全マスター - Qiita qiita.com/higuma/items/f…

トレンドツイートトルネードのツイートをふきだしにするための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%;/*ツイートの上下の文字間隔*/