eternal_girlyのブックマーク - はてなブックマーク

デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり） - Design Color

レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタンスクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。まずは、ある程度スクロールするとフェードインして現れるjQueryコード。  <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th

eternal_girly 2015/09/18

リンク

SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color

もくじ PHPでSNSシェア数を取得するオリジナルSNSボタンを設置するシェア数取得〜SNSボタン設置までの流れおまけ：cssでフキダシの作り方仕上がりイメージ仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。今回もサンプルを作ってみましたよ〜。サンプルお世話になった記事今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ

eternal_girly 2014/08/18

リンク

デザイン時に注意したい角丸の使いかた - Design Color

もくじ大きな角丸はあまり使わないほうがいい理由要素によって角丸の大きさを使い分ける理由大きめの角丸でもおかしくない場合は？角丸の大きさを後から調整するPhotoshopプラグインはじめになんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。少ない手間と知識でそれなりに見せる、ズルいデザインテクニック大きな角丸はあまり使わないほうがいい理由「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニックたしかに、私も以前に、デ