2014年8月6日水曜日

ゴーファーのイラストを描きました。

Illustratorの練習でゴーファーのイラストを描きました。

















Tシャツほしいという方がいたので、suzuri.jp を初めて使ってみました。便利ですね。

https://suzuri.jp/yanzm







もともとの Go gopherRenee French さんによってデザインされています。
(上のはぬいぐるみのゴーファーがベースなのでオリジナルにはあんまり似ていないです。ぬいぐるみのゴーファー好きなのです。)


2014年7月28日月曜日

Material Design のハンバーガーアイコン

ハンバーガーアイコンは Navigation Drawer を使うときに左上に表示する三本線のアイコンのことです。



Icons - Style - Google design guidelines にも Resources - Google design guidelines にもアイコンリソースが無かったので、Icons のページにあった絵と線の太さが2dpであるという情報からハンバーガーアイコンをaiファイルに起こしました。

ちなみに設計図は次のようになります。1マスが1dpです。



画像のサイズは 48dp x 48dp で、アイコン部分は 24dp x 24dp に収まるようにします。

aiファイルも置いておきます。



2014年7月23日水曜日

Polymer <a> 内の <content> は Chrome ではリンクにならない

リンクテキストの右側にアイコンを付けるだけのコンポーネントがあるとします。 <link rel="import" href="../core-icon/core-icon.html"> <polymer-element name="icon-link" attributes="href"> <template> <style> a { color: #0277bd; text-decoration: none; } </style> <p> <a href="{{href}}" target="new"> <content></content> <core-icon icon="launch"></core-icon> </a> </p> </template> <script> Polymer({ }); </script> </polymer-element> これを、こんな感じで使うと <icon-link href="http://y-anz-m.blogspot.com">Y.A.Mの雑記帳</icon-link> Chrome(Version 36.0.1985.125)では <content></content> に挿入される文字がリンクになりません。




一方、Firefox(31.0)ではリンクになります。





次のように <content> ではなく、attributes を使うと Chrome でも文字部分がリンクになります。 <link rel="import" href="../core-icon/core-icon.html"> <polymer-element name="icon-link" attributes="href label"> <template> <style> a { color: #0277bd; text-decoration: none; } </style> <p> <a href="{{href}}" target="new"> {{label}} <core-icon icon="launch"></core-icon> </a> </p> </template> <script> Polymer({ }); </script> </polymer-element> <icon-link href="http://y-anz-m.blogspot.com" label="Y.A.Mの雑記帳"></icon-link>


Web Components に詳しくないので、よくわからないのですが Chrome の挙動は仕様通りなのかしら?


追記:実際に見れるリンクないの?と言われたのでつくりました。http://www.yanzm.net/sample1.html

追記2:Chrome 38(Chrome Canary)だと直っているそうだ。

追記3:以下のように<span>で囲むと Chrome 36 でもリンクとして動作する。 <icon-link href="http://y-anz-m.blogspot.com"><span>Y.A.Mの雑記帳</span></icon-link> しかし、マウスカーソルの形はホバーしても変わらない。。。たぶん、https://code.google.com/p/chromium/issues/detail?id=314488 の問題。