はてなブックマーク

どうも、すんです。 最近、レスポンシブ対応のサイトで多く使われている横からぬるっとでてくるメニュー、ありますよね。メニューボタンを押すと出てきて×印をクリックするといなくなるやつ。どうやらそれ、ドロワーメニューっていうらしいです。そんなドロワーメニューが簡単に実装できるjQueryプラグイン「Drawer」というものがあるらしいので、試しに使ってみました。 Drawer:ダウンロード 公式サイト：http://git.blivesta.com/drawer/内に、「Download on Github」というボタンがあります。ここから、必要なファイルのダウンロードが可能です。 ただしこのDrawerは、その必要なファイルがすべてCDNで提供されていました。なので、わざわざファイルをダウンロードしなくても以下コードをHTMLに記述する形でもOKです。 【CDN】 <link rel="sty

どうも、すんです。 例えばECサイト(ネットショップ)のデザインをするときに、「新商品」や「おすすめ！」など、商品にラベルや見出しをつけたくなることがあると思います。 こんな感じのシンプルなデザインだと物足りないというか、ちょっとさびしいですよね。 でも、色々な種類のラベルをつけたいけど全種類画像にして切り出してサイトに当てるのもめんどくさいな〜なんて思ってしまったり… 今回は、そんな時にcssのみで簡単に実装できちゃうラベルデザインを紹介していきたいと思います。 三角形のラベル /* 商品に見立てた枠 */ .triangle { background: #fafafa; width: 250px; height: 250px; border: #eee 1px solid; margin: 0 auto; position: relative; } /* ラベル部分 左上に表示 */

メイキング・オブ・「SEOで売り上げアップ？」 こんにちは。 漫画は人によって色々な描き方があると思いますが、私の場合下書き〜ペン入れまでアナログで、トーンとベタをPhotoshopで行います。 そしてその方式でつくった漫画がこちらです。 この二つはショップやサイトを持っていたり、作ろうと思っている方へ向けたページです。 今回は、「SEOで売り上げアップ？」のページができるまでの簡単な紹介とともに、漫画のトーンの貼り方を紹介していこうと思います。 1.まずはプロット こちらはsayaさんが書いてくださったものです。 sayaさんが考えて打ち込んでくれたストーリーや台詞のプリントです。 「これを漫画にして読みやすくしよう」という話から始まりました。 そこに直接メモを書き込んでいます。 2.それを元にネーム きたないです。 3.いよいよトーン貼り ペン入れしました。（お花は素材） さあ、ここか

こんにちは。 絵を書く皆さんも描かない皆さんも、一度はアニメーションに憧れた事があるのではないでしょうか？ 自分の描いたキャラや物が動いたら楽しい…！ だけど通常は何十枚何百枚も少しずつ変化させた絵を描かないといけませんよね。 そんなときAfter Effectさえあれば、とても簡単にキャラクターや物を動かして遊ぶ事ができます。 本格的なアニメではありませんが、ちょっとした動きをつけてみたいとか、AEを触った事が無いけど試しに遊んでみたい人向けの記事です。 用意するもの 一枚の絵（写真） AfterEffect 今回はこの記事のためにSEO漫画のA子さんとSEOくんを描いてみました。 キャラクターの背景はこんな感じであらかじめ透過しておいてください。 1.AEに素材を読み込ませる AEを開きます。 ファイル▶︎新規▶︎新規プロジェクト を押して、新規プロジェクトを作成します。 次に素材を読