さきほど、Gumroadにユーザー登録してみました。
どうやって活用していくか全然考えてないのですが、どんな感じなのか知りたかったので、登録&販売商品を登録してみました。
ユーザー登録から販売までが数クリックで完了するので、実に簡単でした(・∀・)
WEBの知識が無い方でも簡単にネット上でダウンロード販売出来る感じです。
ユーザー登録
メールアドレス、パスワードを入力し、登録をするだけです。登…
ツイッターのプロフィールウィジェットを入れているサイトで、CSSでデザインしていたら、h3やh4の設定がTwitterのウィジェットにまで反映されて、困ることが時々あります。(私は・・・)
今回はそれを直したかったので、調べて見ました。Twitterのウィジェット
当サイトでは、Twitterが提供しているコードをそのまま設置していますが、以下のようなコードです。<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 10000, width: 'auto', height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: true, live: true, behavior: 'default' } }).render().setUser('apr_20').start(); </script>これがHTMLとして表示されると、以下のようになっています。複数のつぶやきが含まれていて複雑だったので、余分な箇所は適当に省いています。
HTMLソース
<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile"> <div style="width: 100%;" class="twtr-doc"> <div class="twtr-hd"> <a class="twtr-profile-img-anchor" href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank"><img src="http://a2.twimg.com/profile_images/1308881356/twitter_normal.jpg" class="twtr-profile-img" alt="profile"></a> <h3>apr20.net</h3> <h4><a href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank">apr_20</a></h4> </div> <div class="twtr-bd"> <div style="height: 300px;" class="twtr-timeline"> <div class="twtr-tweets"> <div class="twtr-reference-tweet"></div> <div id="tweet-id-21" class="twtr-tweet" style="opacity: 1; height: 108px;"> <div class="twtr-tweet-wrap"> <div class="twtr-avatar"> <div class="twtr-img"><a href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank"><img src="http://a2.twimg.com/profile_images/1308881356/twitter_normal.jpg" alt="apr_20 profile"></a></div> </div> <div class="twtr-tweet-text"> <p> <a class="twtr-user" href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank">apr_20</a> ブログ更新 : Zencartの文字化け対策 - <a rel="nofollow" urlentities="" target="_blank" href="http://t.co/sOSednM8">http://t.co/sOSednM8</a> <em> <a href="http://twitter.com/apr_20/status/166476887701467136" time="Mon Feb 06 11:02:37 +0000 2012" class="twtr-timestamp" target="_blank">5 hours ago</a> · <a href="http://twitter.com/intent/tweet?in_reply_to=166476887701467136" class="twtr-reply" target="_blank">reply</a> · <a href="http://twitter.com/intent/retweet?tweet_id=166476887701467136" class="twtr-rt" target="_blank">retweet</a> · <a href="http://twitter.com/intent/favorite?tweet_id=166476887701467136" class="twtr-fav" target="_blank">favorite</a> </em> </p> </div> </div></div> <!-- tweets show here --> </div> </div> </div> <div class="twtr-ft"> <div><a href="http://twitter.com" target="_blank"><img src="http://widgets.twimg.com/i/widget-logo.png" alt=""></a> <span><a href="http://twitter.com/apr_20" style="color:#ffffff" class="twtr-join-conv" target="_blank">Join the conversation</a></span> </div> </div> </div> </div>
CSSを適用する
上記のようなHTMLソースがわかれば、あとは変更したい箇所にCSSを適用すれば完了です。私の場合は、ウィジェットのヘッド部分にあるh3,h4を修正したかったので、以下のように指定しました。.twtr-widget h3,.twtr-widget h4{ /*ここにCSSの設定*/ }
この投稿へのコメント
コメントはまだありません。