UNORTHODOX WORKBOOK

2014.10.27 Mon

SNSのアイコンやロゴをSVGで作った(ダウンロードあり)

ソーシャルメディアのアイコンやロゴを使用する際、Font Awesomeとかのwebフォントを利用させてもらっていたんですが、日本のSNSだったりすると用意されていなかったり、色とか柔軟に扱えなかったりしてちょっと不便を…

2014.10.16 Thu

マウスオーバーで波紋を広げる

波紋が広がりそうなタイトルですが、CSSの話で、事が起こるほうの波紋ではありません。 Dribbbleをぼーっと眺めていたら、きれいに波紋が広がるアニメーションがあって、CSSでできそうだったのでやってみました。 デモで…

2014.10.13 Mon

カラーミーショップで標準機能とは別に特定の商品をトップページに表示する

以前、カラーミーショップでPHPのfor文のような繰り返し処理という記事を書いて、これを使って何か面白いことはできないかなと考えていたんですが、使えるようで使えないようなことを考えついたので、備忘録としてメモ。 やること…

2014.10.12 Sun

カラーミーショップで特定の商品(カテゴリー)のみカートを非表示にする

例えば、メーカーや仕入先との契約上、インターネットでの販売が禁止されていて、表立って売ることができないけど、商品の取扱いや在庫があることはアピールしたい場合に便利な方法です。 表面上は売ってないことを装い、問合せから売っ…

2014.10.10 Fri

CSSのみで背景を全体的に斜めにして傾斜をつける方法

最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方…

2014.10.01 Wed

インラインSVGで、alt属性のような画像の代わりになるテキストを指定する方法

最近よくSVGを使っている。何かと便利なので、IE8を考慮しなくてもよい時は、写真以外の画像は全てSVGにしてしまっている。IE8さえなければもっと大胆に使えるのに…。滅びろIE8…。(IE6,7はもう既に完全に何も考え…