いたる 
目次
TTTテーマを使ってTwitterまとめサイトを作ると、どうしても同じようなデザインになってしまいますよね？
少しでもサイトを訪れた人に興味を持ってもらうためにデザインを差別化したい！そんな方のためにツイートをふきだし風に装飾する方法を紹介します。
トレンドツイートトルネードでこのようなデザインのふきだしが作れます！
試しに「CSS デザイン」でツイートを抽出してみました。
大変申し訳ないのですが、こちらアップデートすると小テーマのCSSが読み込まれない不具合が発生してしまっているようでして、小テーマでカスタマイズされている方はアップデートを控えていただけたらと思います…！ 明日の朝には修正版をリリースさせていただきます！ twitter.com/ddryo_loos/sta…
【SWELL ver. 1.3.6 をリリースしました】
— 了@SWELL開発者🌊 (@ddryo_loos) December 7, 2019
コンテンツ幅の調節機能や新ブロックの追加、既存機能の改善などなど...。
※ シェアボタンなどの一部コードに大幅な変更があるため、カスタマイズしてご利用されている方はご注意ください。
詳細は記事に書いています！https://t.co/T0D457qLB2#wpswell pic.twitter.com/26ZLNr8ma1
他の方もDIVERでこんな素敵なサイト作ってます🙌 デザインカスタマイズ性が良くてHTMLやCSSの知識ゼロでも綺麗なサイトが作れるのがDIVERの特徴です 聖帝日記 これからのカネと女の話をしよう 聖帝.com 人生は整理整頓 j-dress.biz VAPEformen vapeformen.jp
今この状況。 もう割とできると思い込んでたHTMLとCSSで苦戦してる。 やっぱり自分で1から作るとなるとかなり難しい。テンプレ使えばカスタマイズするだけだけど1から作るのはほんと難しい。 #30DAYSトライアル #駆け出しエンジニアと繋がりたい twitter.com/koresuke1010/s…
始めたばかりの人は、
— これすけ＠プログラミング / 新米パパ🔰 (@koresuke1010) December 6, 2019
HTMLとCSSに苦戦すること多いのではないでしょうか💦
僕もいまだにCSSで
時間かかることが多いです😵
最初に学ぶから1番簡単だろう。
と思われがちですが…
1番奥が深くて難しいのは、
HTML/CSSだったりします🙆♂️
ですので…、焦らずに
自分のペースで進めてみてくださいね☺️
トレンドツイートトルネードのツイートをふきだしにするためのCSS
TTTのツイートをふきだしにするには、カスタマイズ画面の追加CSSに以下のコードを記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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%;/*ツイートの上下の文字間隔*/ |
これで、ツールを使ってツイートを抽出した無機質なイメージから、
アイコンがしゃべっているような生き生きしたイメージに代わるのではないでしょうか？
ぜひ、サイトを差別化したい人は試してみてくださいね。
