先日の振り返りでも言っていたように、 ここの所はてなブログのデザインを作り直していたのですが、昨日今日で実装と適用・微調整も完了し、 無事新しいデザインへの移行できたので、今回はその話をします。
ちなみに今回のデザインは下のような感じで、はてなブログに移ってくる前のデザインに寄せつつ、 その上ではてなブログへ合う形で再編する、という様な見た目にしました：
デザイン変更の動機
これについてはなんとなくのダサみを感じていた点と、
インラインのマークアップ（
strongやem、bなど）の使い分けが上手く出来てないよな……
という反省点から、その辺りを改善したデザインを作るかーと思い立ったことが切っ掛けです。
また今回のデザイン変更に際し、HTMLにおけるインライン要素のマークアップ適切化については下記の記事を参考にしました：
strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった
何を使ってデザインを作ったか
今回のデザイン変更のために使ったモノは下記の二つです：
- 既存のテーマが一切適用されていないサンドボックス用はてなブログ
StylusというUserCSSを管理するためのブラウザ拡張
Stylus – 🦊 Firefox (ja) 向け拡張機能を入手
Stylusを使った理由としては、はてなブログ付属のカスタムCSS用エディタでCSSを書き上げることはツラそう、 と言う事と、Stylusを使った方がCSSの書き上げには便利なんじゃね？と踏んだからですね。
またStylusにはUserCSSをリアルタイムで反映する機能も存在するため、 そう言った機能もはてなブログのCSSを作る際に便利かな？と思ったことも理由の一つです。
あとこれは今回のデザイン刷新を終えてから思い付いた手法なのですが、 既存のはてなブログのデザインを変えていく場合、
- 既に適用されている既存のカスタムCSSをuBlock Originなどでブロック
- StylusなどのUserCSSマネージャで新しいCSSを適用
- 最後にモノが出来上がってから新しいカスタムCSSを適用する
と言った流れで作業をやっていくと、より確実に現物を見つつCSSを編集できるのでは？ と思いました。（※ただしこの場合、サイドバーの編集などには対応できません）
どのようにCSSを書いていったか
具体的には、
- 何もテーマが適用されていないサンドボックス用はてなブログを用意する
- サンドボックス用はてなブログにサンプル記事などを突っ込む
- その上でStylusを使ってUserCSSとしてデザインを構築していく
と言った流れになります。
今回の要としてはStylusを使ってCSSを書くというところで、 先にも述べた通りStylusを使った方が、はてなブログ組み込みのカスタムCSS用エディタを使うより便利だ、 と判断したため今回はそちらの手法を取ることにしました。
そのため今回のデザイン刷新では、はてなブログ組み込みの編集画面は最終版の適用だけに使い、 その過程・道中でのCSS編集にはStylusを使って、逐次、実際の画面を確認するというスタイルで開発を進めています。
どのような流れでデザインを作ったか
デザインそのものは自由な発想で型に囚われることなく……と言えば聴こえはいいですが、 現実としては行き当りばったり、
うーん、まぁここはこうすれば良い感じじゃね？
という野生の勘だけで作りました。なのでデザインじゃなくてアートだろそれ。
とは言えカラーテーマについては、以前、アクセシビリティへの配慮も込みでかなり真面目に作ったものがあるため、 色の選択に関してはそれを使いました。そのため色に関しては適宜気にいったものを使っていてもアクセシビリティを損わない状態になっています。
ちなみにこのカラーテーマ、CSS定義自体は次のリポジトリから引っ張ってきていて、 GitHub Pagesから該当CSSを読み込む、という形でこのブログから使っています：
nyarla/website-assets: The common assets files for my hatenablog
ただこのカラーテーマ自体、lch色空間から色を切り出したものなので一応他の色も算出できる代物ではあるのですが、 算出方法などの切り出しをサボっているため、現状では手元にしか算出方法が無い状態となっています。 そのためその辺りはちゃんとモノを出しましょう、という感じですね。
あと今回のデザイン刷新ではReset cssの類いは使っていません。
これはReset cssの類いを下手に適用してしまうと、はてなブログ本体側が持つ特定の要素へのスタイルもリセットされてしまい、 はてなブログ側の機能が壊れるといったことも起きるため、そこを防ぐという意味でもReset cssの類いは使いませんでした。
そのため恐らくブラウザによってはブログのデザインに若干の差異がある、 という状態にはなっていると思うのですが、基本的な部分は崩れないだろうし、 まぁブラウザ間で完全に見た目が一致せんでもええやろ、みたいなノリでそこは見なかったことにしています。
以上
とまぁそう言ったような流れで今回のブログデザインの刷新を行ないました。
ただ、実際のところデザインはともかくとして、CSSを作る事に関しては手戻りが発生しており、 一度書き上げたが混沌としてしまったCSSを、もう一度綺麗なCSSとして書き直した、という事が起きています。
またモノが出来上がってから本番へ適用した際にも、想定漏れがあったりした部分を直していたりもするので、 そこも含めてやっぱり行き当りばったりかなーと思うところです。
まーとは言え個人ブログは行き当りばったりでなんぼのもんじゃい！という所でもあるので、 その辺りは気にしない方向で今後もやっていくと思います。
