いたる 
目次
TTTテーマを使ってTwitterまとめサイトを作ると、どうしても同じようなデザインになってしまいますよね？
少しでもサイトを訪れた人に興味を持ってもらうためにデザインを差別化したい！そんな方のためにツイートをふきだし風に装飾する方法を紹介します。
トレンドツイートトルネードでこのようなデザインのふきだしが作れます！
試しに「CSS デザイン」でツイートを抽出してみました。
@1582Anch !important を使うシーンがあるってことは割とCSS設計が破綻してるかもですね🙄 ライブラリを使用する際にライブラリのソースをカスタマイズしてから取り込めばいいのではないかな
【0からはじめるブログデザイン】CSS初心者でも活用できるこだわりデザインカスタマイズの記事を集めました！ - 週刊はてなブログ ow.ly/sO6n50DaDOC
けっこう実装に手こずった点【その②】 Snow Monkey Blocks の アコーディオン を、リンクから飛んできた場合のみデフォルトでオープン。 （普通に開いた場合は、クローズ）※動画参照 ちなみに、CSSカスタマイズのみで実装しております。 CSSの魔術師って呼んでください。 #wpsnowmonkey twitter.com/urayoko1/statu…
先日納品したサイトです☺️https://t.co/asMWil4qeF
— よこ🌴 Photoshop好きのWeb屋 🌴 (@urayoko1) January 25, 2021
協力してくれたお2人。仲間がいたからこそできたHPです✨本当に頼りがいあり、そしてめっちゃ頼りました！
よしおさん @yesmyoshi （ページ構築）
ユカリさん @design___b （図解・バナー制作）
ありがとうございます😊#wpsnowmonkey
CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた cultureacademia.jp/webcreate/303/
ココナラで出品したサービスが購入されました！ 「WEBサイト、ワードプレス修正＆カスタマイズします html,css,php,javascriptスマホ修正対応」 #ココナラ coconala.com/services/13236…
トレンドツイートトルネードのツイートをふきだしにするための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%;/*ツイートの上下の文字間隔*/ |
これで、ツールを使ってツイートを抽出した無機質なイメージから、
アイコンがしゃべっているような生き生きしたイメージに代わるのではないでしょうか？
ぜひ、サイトを差別化したい人は試してみてくださいね。
