css clip rect 小技 nojs

blogger

Bloggerでサムネイルの微調整にCSS/clipを利用する。実際にはロードされる画像のデータ量は変わらないので注意。

ここはjavascript不使用でのお話。javascriptでロード元APIを叩く場合は画像URL.replace(/s72-c/,'s32-c')などで可能。

Bloggerのwidgetで画像サイズを指定する方法は今のところ無いので、data:psot.thumbnailUrlで拾ってきた画像をCSSで調整する。

要素に絶対値

CSS/clipの仕様として面倒な事にその要素が{position:absolute;}であること。画像を右か左か、とにかく固定する場所を決める。

親要素に{display:block;position:relative;}ほぼ確定。inline-blockだとかは環境次第。

{clip:rect(TOP RIGHT BOTTOM LEFT);}で指定した範囲を切り抜く。

設定例

{clip:view(x,y,w,h)}という風になって欲しいもの。