Hatena::Groupsubtech

おれ ここ めも かきなぐる おまえ ここ よむ なぐる

|

May 19, 2011

記事共有ボタンの先頭のマージンを消す

21:15

はてブのボタンにmargin: 0 3px;とか指定してあって3pxインデントされるのでそれを直す。

.share-button *:first-child {
    margin-left: 0 !important;
}

*:first-childにしておけば共有ボタンの順番変わっても安心(な気がする)。


mail.pl

18:49

Blosxomのエントリの書き方と合わせた感じの一行目が件名、以降が本文になるメールスクリプトで投稿するようにした。UTF-8まんまだとはてグで文字化けしちゃうのでencode("MIME-Header-ISO_2022_JP", $str)せざるを得なくて美しくない…。と思ってたら、やっぱりEmail::MIME::Creatir-ISO_2022_JPとかいうラッパーモジュールあるんだな。あとで書きなおそう。


日付の左右に線を引く奴

17:16

http://hail2u.net/pub/test/264.html

preのアレアレンジです。意外に使いどころ多そう。

pre飛び出させる奴の別解

11:08

@nanto_viより。

http://j.mp/lNn1mc (長いURLなのでj.mp使っておいた)

  • pre要素をposition: relative;しないことによって、pre:beforeとpre:afterがleft: 0; right: 0;でコンテンツエリア全体になるようにする
  • topとbottomを無指定にすることにより、pre:beforeの位置をpre要素の上端と、pre:afterの位置をpre要素の下端と合わせる
  • pre:afterでコンテンツエリアと同じ背景を指定することによりpre要素から飛び出した部分を隠す

という仕組みになっている。最初、全然理屈がわからなかったのは内緒だ。

パッと思いつく問題点は、pre:afterのはみ出す部分をどう隠すかというURLで触れられてるのと、

  • コンテンツエリアの背景画像なんかと相性悪そう(繰り返し画像なんかだとずれそう)
  • preの背景にrgba()カラーが使えない(pre:beforeと混ざる)

あたりか。

http://hail2u.net/pub/test/246.html

こういう解もありますよね。まぁ使おうとは思いませんが。

May 18, 2011

Vimでバッファの内容を外部プログラムに流す

22:13

normal! ggVGとかやってたのは黒歴史。

command! Subtech :silent write !mail.pl john.doe@example.com

writeで良かったんですね…。

上書き #2

21:52

ぁぅぁぅぁー。

上書き #1

21:48

ぁぅぁぅぁー。

ActivePerl 5.12 x64用のdmakeとMinGWのppmパッケージはない

21:26

ActivePerl 5.12cpan叩いたら、いつもならdmakeとMinGWのインストールが始まるはずなのにppmパッケージがなくインストールされなかった(x86用はあるっぽい)。cpanmなら…とかそういううまい話は絶対にないと思うので、x86版入れたほうがよさそう。


GitHub WikiでHomeのタイトルを変える

17:10

Homeで固定なのかと思ってて、タイトルわかりにくいなーとか思ってたけど、

Blosxom Starter Kit
===================

とかh1見出しを書いとく(Markdownでの例です)と自動的にそれがタイトルになるらしい。一つ賢くなりました。

Google翻訳のTTS API

14:38

http://translate.google.com/translate_tts?ie=utf-8&tl=ja&q=%E3%82%86%E3%82%8A%E3%81%8B%E3%81%94%E3%81%8B%E3%82%89%E5%A2%93%E5%A0%B4%E3%81%BE%E3%81%A7

とかでいけるんだけど、リファラかなんかで制限があるっぽくてまともに叩くことができない。

http://hail2u.net/pub/test/263.html

ローカルでは普通に動くのでAIRアプリやChromeアプリなんかでは使えそう。

May 17, 2011

Slab Serif

19:25

http://www.google.com/webfonts/family?family=Copse

とかMuseo SlabなどのいわゆるSlab Serifのフォント・スタックでserifにするかsan-serifにするか迷う。

というボヤキ。

Copse結構良い。

http://www.usabilitypost.com/

の見出しなんかで使われてる。合う日本語フォント無いけど(いつもこれだ)。

May 16, 2011

Pro Git日本語版PDF (2011-05-06)

18:26

http://goo.gl/I7byZ

Snipurlで作った短縮URLがなぜかスパム扱いされるようになってたのをコメットで報告貰った。直せないので2011-05-16時点での最新版のリンクを張っておく。今後も更新したらここにちゃんと書くます。

Convert Shade to Transparency

15:01

http://hail2u.net/pub/test/262.html

昨日メモとして書いた濃淡を透明度に変換する奴のアクションと処理例。

Photoshopのアクションとかパターンとかの管理がクソすぎて腹がたつ。

May 15, 2011

HTML TidyでHTMLの新要素をサポートする

17:52

doctype: "<!DOCTYPE html>"
new-blocklevel-tags: section,article,aside,hgroup,header,footer,nav,figure,figcaption,video,audio,source,embed,mark,progress,meter,time,ruby,rt,rp,bdi,wbr,canvas,command,details,summary,datalist,keygen,output

とかファイルに書いてやって、-configオプションでこのファイルを指定するとsectionしらねーよとかいうエラーは出なくなります。

画像を(中略)する方法

16:10

適当な画像をグレースケールにし、その濃淡を黒の透明度とした画像に変換するPhotoshopの操作法のエントリでも書こうかと思ったけどスクリーンショットを撮るのが面倒になったのでメモとしてここに投げておきます。

  • イメージ→モード→グレイスケール
  • レイヤー→レイヤーの複製
  • 選択範囲→すべてを選択
  • 編集→コピー
  • レイヤー→レイヤーマスク→すべての領域を表示
  • (チャンネルパネル)グレーを不可視にし、レイヤー 1マスクを可視にする
  • 編集→ペースト
  • イメージ→色調補正→階調の反転
  • (チャンネルパネル)レイヤー 1マスクを不可視にし、グレーを可視にする
  • 元のレイヤーを削除

流行りののsubtleなパターンを自分の好きな色で作るのに便利。元の画像は紙やら金属やら木やらのテクスチャやパターンとして配布されている様々な色の画像を使います。この作業をするとそれらから特徴的なパターン部分やノイズ、汚れなどをきれいに黒のアルファスケールに変換して取り出せます。あとはそれを好きな色に重ね、塗りを下げたり描画モードを変えたりして混ぜます。元の画像がシームレスじゃない場合にシームレスにするのは結構大変ですけどね!

GitHubで公開されているコードの一部をハイライトする

08:29

https://github.com/hail2u/jquery.harmonize-text/blob/master/jquery.harmonize-text.js#L69-L94

というようにソースへのリンクに#L69-L94とハッシュをつけると69行目から94行目までが薄い黄色でハイライトされるということを知った。引用する時の引用元のURLに使ったり、コードにツッコミを入れる時にコメントフォームで使ったり色々便利そう。

May 14, 2011

img::before/::afterが云々

05:43

http://jeffreyfrancesco.org/weblog/2011051101

img要素への::before/::afterの話。ブラウザーによって挙動が違うというのは間違ってないですが、仕様の話としてはエントリでも触れられている、

http://www.w3.org/TR/CSS2/generate.html#before-after-content

のセクションの最後にNote.として置換要素に対して指定した場合の挙動はまだ決まってないと書かれており、CSS2系的にはどっちでも良さそうです。

また、空要素だから…という説明は微妙な気がしますね。それでは「じゃぁなんでtextarea要素でも利用できないの?」って聞かれても説明できないですし。

CSS3では、

http://www.w3.org/TR/css3-content/#replacedContent

Replaced elements do not have '::before' and '::after' pseudo-elements

置換要素はこいつらを持たないということになっており、::outside::before/::after実装してねということになってます。

Webフォントとwindow.onloadの発火タイミング

04:51

を調べようとしてるが面倒になってきた。ブラウザーのWebフォントの適用タイミングとかそっちの方を拾う方法を考えたほうが良いような気がしてきた。

May 13, 2011

FitText

09:55

http://hail2u.net/pub/test/257.html

まぁ係数調整すればフィットしますけど…。

jQueryの.contents()

00:31

contents()は子供をテキストノードやコメントノードも含めて全部取得するもの。初めて使った使った記憶が消えていた

$(".foo").contents().appendTo("body");

bodyに.fooの子が*移動*される。コピーしたい場合は

$(".foo").contents().clone().appendTo("body");

とclone()を挟む。

|