いたる 
目次
TTTテーマを使ってTwitterまとめサイトを作ると、どうしても同じようなデザインになってしまいますよね？
少しでもサイトを訪れた人に興味を持ってもらうためにデザインを差別化したい！そんな方のためにツイートをふきだし風に装飾する方法を紹介します。
トレンドツイートトルネードでこのようなデザインのふきだしが作れます！
試しに「CSS デザイン」でツイートを抽出してみました。
#ワードプレス でトップページをサイト型にカスタマイズする方法を以前書いていて #cocoon でも記事のCSSコピペで使えましたので報告です。「wp show post」プラグインを使う方法ですが、cocoonなら「new_list」ショートコードがあったんですね。そっちの方が楽かもです！ overland25.com/blog/wordpress…
@soundorbis まぁWordPressのカスタマイズとかに挑戦されていたのでhtmlとcssはちょっと退屈かもしれないですねw 実際自分もhtmlとcssのコースは触ってませんw
ワードプレスのカスタマイズができるといえばデザイン変更の依頼が圧倒的に多い。僕の専門はプログラムなんだけど。部分的なcss調整とかは効率良いが大掛かりなのは…そもそもプログラム側のカスタマイズかどうかは一般の方には判断つかないもんなー #副業 #ココナラ #wordpress
CSSコピペでOK！カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ！ rough-log.com/1670 見やすいリンクボタンのカスタマイズは、 ユーザー・ファーストの第一歩。＾＾♪ さっそく、使わせて頂きました。(^^ゞ
WordPressでTOC+目次をカスタマイズするCSSチップ集についてまとめましたプラグイン設定から変更できない位置調整のやり方（ほとんどコピペでOK）がメインです fukuro-press.com/tocplus-custom…
AdSense自動広告設定で表示が崩れるときのCSSカスタマイズ - はるなぴログ bit.ly/2IL6XCX
ふむふむと読んだけど、実際に自分でやるとなると自分にはややこしそう。 / 他9件のコメント b.hatena.ne.jp/entry/s/www.ha… “AdSense自動広告設定で表示が崩れるときのCSSカスタマイズ - はるなぴログ” (19 users) htn.to/2ywpnR5MpA
AdSense自動広告設定で表示が崩れるときのCSSカスタマイズ - はるなぴログ halu7.com/entry/autoad-c…
トレンドツイートトルネードのツイートをふきだしにするための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%;/*ツイートの上下の文字間隔*/ |
これで、ツールを使ってツイートを抽出した無機質なイメージから、
アイコンがしゃべっているような生き生きしたイメージに代わるのではないでしょうか？
ぜひ、サイトを差別化したい人は試してみてくださいね。
