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

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

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

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

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

https://www.thoughtbuzz.net/solutions

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

Thought Buzz

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

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

うっちょん2号 14時間前

その２が完成しました。まだまだ終わらない。初心者なりに頑張ります。 #note #javascript #jquery #CSS #html #はてなブログはてなブログの「アーカイブページをアーカイブするカスタマイズ」のjQueryを1つづつ解析してみた：その２｜note（ノート） note.mu/ucchon/n/n8bae…

ちづる 23時間前

SUNABACOに行く前に、ECサイトのカスタマイズを相談された。どういう仕様か見てみたら、出品は簡単にできるけど、独自のページらしく作るにはHTMLとCSSが必要みたいで、「できるにはできますが……」という返事をしてしまった。今なら喜んでその仕事する。 #えべつps1st

D4ISK 1日前

考えているスキルアップのルート 1. PHP, HTML&CSS, Javascript, DB周辺のスキル 2. Wordpressのテーマ、作成、カスタマイズなど 3. Laravelなどのフレームワーク 4. WEBサービスネタがあれば方向修正はあり。どこかで金銭の絡む仕事としてやれればいいなという感じ #PHP #プログラミング学習

taks 1日前

【WEBLOG過去記事】WordPressテーマSimplicityをカスタマイズする！見出しのCSSスタイルを変更 buff.ly/2GJItdb

ふねぷとん@Web・グラフィックデザイナー時々スイッチャー 1日前

WordPressをカスタマイズしてますが、今日はカスタム投稿をお知らせ用と作品紹介用に作り、archive.phpでそれぞれの一覧を作成しました。動画やググりながらですが少しづつ理解できて来てる気がします！細かなレイアウト調整やデザインは最後のほうでCSSなどで調整します。＃WordPress

ドレッド 2日前

JINのテーマで、Amazonのフォローミーボタンを追加するカスタマイズが成功。CSSだけ何とかしたかったけど、結局テンプレートファイルも編集してしまった。クリックすると、欲しいものリストが開きます（笑

魁堵（かいと）＠サブカルブロガー 2日前

@nintengame いろいろ調べたら出てくるかと思います(*´꒳`*) そうですね！色々と細かく変えてはいますがカスタマイズできるテーマを選んでCSSで色々設定を触っている形になります！PROの方が色々と自分の好きな様に変えられます！

うっちょん2号 2日前

jQueryの知識がない人間が、必死に調べて纏めています。同じ初心者の助けになれば、幸いです。 #note #javascript #jquery #CSS #html #はてなブログはてなブログの「アーカイブページをアーカイブするカスタマイズ」のjQueryを1つづつ解析してみた：その１｜note（ノート） note.mu/ucchon/n/n0a89…

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