ひtoりgoと

二ヶ月も記事を書かなかったけど、例によって Web サイト全体の改修に忙しかったのである。

ダークモード

iOS 13 より一足早く macOS Mojave で登場したダークモードだけど、暗い世界に目が慣れた状態で未対応の App や明るい Web サイトが表示されるとつらい。“ひ to り go と”は謎の背景カラーなので関係ないものの zumuya 全体はフラットなデザインにリニューアルしてからは iOS っぽくホワイト基調になっていたから眩しいはず。

ダークモードは世の中を見回してもまだまだ対応が進んでいないけど、Apple プラットフォームを最優先にする開発者であればこういうときにいち早く手を入れなければいけない...ということで対応させました。

最新 CSS など

ほとんどの Web ブラウザが半強制的にアップデートされていくこの時代。昔ほど過去ブラウザとの互換性を気にしなくてもよくなったので、display: flex、border-image、position: sticky などの機能を使うことに。

特に記事の囲みを border-image にしたことによって最大幅もより広くできた。テクスチャや立体感のあるデザインを維持したままレスポンシブなレイアウトにするのは想像以上に大変なのだ。

地味な点では iPhone X のセーフエリアに対応させたりしたほか、DOM 構造も大きく整理していて、body > .contents が main になったりしているので PHP も CSS も JS も総書き換えしている。

ページ遷移なしの“続きを読む”ボタン

“ひ to り go と”では“続きを読む”ボタンを押してもその場で続きが読み込まれるようにしてみた。

9to5mac がシームレスに複数の記事を読みながら移動できて読みやすいので影響を受けている。

このあたりは実験中なのでまだ手を入れるかも。

zumuya.com/hitorigoto → hitorigoto.zumuya.com

一番大きいのはこれかもしれない。“ひ to り go と”の URL をサブドメインに変更！

“ひ to り go と”はこの Web サイトの 1 コーナーでありつつ独立色も強い¹ので、階層が深いよりも直接の玄関がある方がよいのではという判断。

記事も、ちょっとずつ、増やさないと...