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

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

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

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

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

https://www.thoughtbuzz.net/solutions

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

Thought Buzz

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

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

へびさん 6時間前

日本語ページがなくてアレだけど、基礎的なCSSの理解度を、WEB用名刺カードを作りながら確認するテスト。Githubに初期状態と完成系のソースがある。emあたり理解がゆるふわだったからやって良かった。カスタマイズして勉強会で使うつもり😊 developer.mozilla.org/en-US/docs/Lea…

Tiny Mouse 8時間前

concrete5 のカスタマイズ。PHP プログラムや CSS ファイルのオリジナルは触らず変更したい内容だけ適用できる仕組がある。

Tiny Mouse 9時間前

concrete5 のサイトをカスタマイズ。①アドオンやテーマを導入する。②PHP プログラムや CSS ファイルを編集する。

🍶あトん 9時間前

@AzuLitchi ブログカードのiframeはカスタマイズしましたが、内部cssでは色は変更できませんでした。らいちさんの方法だと変更出来そうなので、素晴らしいヒントを頂きました。

豆吾郎 - メディアクリエイター 10時間前

何でもそうだけど、やり始めはすごく楽しいんだけど、終盤になると飽きるんだよなぁ今回のテーマもそうだけど。本当はカスタマイズも作りたかったし、CSSもキレイにしたかったんだけどなー。モチベ継続する方法おしえてほしいわー。

gakuton 10時間前

・プラグイン入れなくても文字やレイアウトを割と自由にカスタマイズできる・ビジュアルはシンプルでモダン・必要に応じてページにCSS当てられるこの辺りが条件かな。コード書けなくてもある程度自由に使えることが重要

かまぼこ家 12時間前

elementの所感全部まとめて面倒見てくれるわけではないカスタマイズ前提のcss framework ただデフォルトである程度は用意してくれるので使いやすい感はある el-elemntというオリジナルのタグがあるのでelementの所有物がわかりやすい

komugi 16時間前

@beaglekensa はじめまして！ひつじさん(@hituji_1234)に聞いたところ、どこか設定が間違っているか、吹き出しのカスタマイズをしているかが考えられると教えてもらいました💡私の場合はカスタマイズしていたものを一度消して再度やり直したら表示されました(*˙˘˙*)CSSがおかしくなっていたようです！

はづき@書き方レシピ管理人 17時間前

@punigibyoumoti ダッシュボード→外見→カスタマイズ→一番下の追加CSSを開いて、希望のコードをコピペ後、「公開」を押すと反映されます。試してみてください。☺️

はづき@書き方レシピ管理人 18時間前

@punigibyoumoti CSSのカスタマイズ、ゼロからやるのは大変なので、「コピペしてもいいよ」という人のコードをコピペするのが一番早いです。そういう人はたいてい、貼り方も説明してくれていますよー。

相原美柑@バーチャルブロガー 18時間前

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%;/*ツイートの上下の文字間隔*/