icon

なるほど…「transform-style: preserve-3d」をスクロール枠まで維持すれば、ヘッダー画像に視差効果を適用できるんだ。途中の「overflow」は消さないといけないし、背景色の奥に沈んでしまうのも回避しないといけない。そもそもヘッダーを覆い隠したいわけではないんだよな。利用者が選んだ色合いを本文の背景に影響させたいだけであって。

icon

ヘッダー画像をクリックまたはタップで押し続けている間、重なっている文字などが下へ退避して、ヘッダーを鑑賞できるようにしてみました。(それなら元から重ねないでおけばいいのでは、という感もなくはないけど…。)

icon

「どかせるんだったら、かぶせても大丈夫」という判断で、もっと大胆に本文と重ねてみました。駄目かな…。読みにくかったらまた調整します。あとメモ欄は後方へ移動しました。

Attach image
icon

表示領域の横幅が狭い場合を別途考えた方がいいかも。ヘッダーは原則的に横長という事になってるので、根本的に馴染んでない。(そもそもボタン類の表示が窮屈という問題もあるけど…。)

icon

横幅が狭い場合は、あまりヘッダー領域を縦に伸ばさないようにしました。

icon

ヘッダー画像の見せ方をこんなに勝手に変えていいのか、とも思うけど、そもそも ActivityPub でやり取りされる色んな情報は相手側で想定通りに表示される保証がないからなあ。プロフィール画像すら正方形なのか円なのか不定だし。ヘッダーについてはツイッターでの表示も変遷したし。一般論としてヘッダーは外周が切り落とされる可能性が高いから、見せたい被写体を中央に寄せて、周りの余白を大きく取った画像がいいと思います。

icon

マストドンのプロフィール設定画面は縦横比 1:3 の画像を期待している雰囲気だけど、連合タイムラインの人々のヘッダーを見てみると全然そうなってない(そこまで細長いのを用意してる人は少ない)。寸法について何も前提を置けないので、大雑把に敷くしかない。

icon

Mastodon v4.1 の初期状態では、表示領域が広い場合のヘッダー画像は「縦 145、横 578」の寸法で表示されてる。つまり約 1:4 なので元々一貫してない。

icon

ヘッダーが背景に敷かれる領域に「backdrop-filter」で曇りガラスの効果を掛けました。画像の内容が騒々しくても読みにくさを抑えられたと思います。(最近の CSS は便利だなあ。)

icon

@tizerm やはりソフーでしたか。私はどう描けばいいかすごく迷ったな…。

icon

このあと だいちゃん(@daibaka)から正式に告知されると思うけど、しふたろうさん(@shiftal_on)に描き下ろしていただいた絵を mofu.kemo.no の表紙に飾りました。

mofu.kemo.no/about

かわいらしくて楽しくて大変よい感じ ! 象の形の乗り物がマストドンサーバーを表してるわけですね :blobcataww:

Web site image
もふけもの。
icon

ていうか「告知はお任せする」と言いながら私が先に書いてるのごめんね、だいちゃん。

icon

ニュージーランドで 2050 年までに侵略的な外来種を根絶できるだろうか、という話。半島の先からネズミ不在地帯を広げつつある。

『This is “impossible”, but New Zealand is trying anyway.』
youtu.be/wcp1BfPUeOc

YouTube Tom Scott CBD / Airport / Miramar Google Earth
Attach image
Attach YouTube
icon

ずっと絵を描いていないので辛い。さゆぬって絵を描かなくても成り立つのか。

icon

@tizerm 半年以上前に作った物なんか何の足しにもならん…。

icon

さっき Misskey.io で ぼやいて来ました。

misskey.io/notes/9brtroayxy

Web site image
白湯さゆぬ (mio) (@sayunu)