サイト改装覚書
サイト改装しました。
主な改善点としては、
・視認性の向上。
・ボックスリンクの導入。
・少しオシャレに。
以下は改装にあたり思ったこと、気付いたことなど。
前のCSSは行き当たりばったりで作ってあるので、まずはいくらか整理。
そこから、まずはPC用のサイトを改装するところから着手しました。
とにかく視認性・ユーザビリティを向上するためにボックスリンクの導入が柱にあり、そこからどのように改善していくかを決めました。
個人的に1カラムが好きなのと、スマホ用にする時に簡単だからという理由で基本はそのまま、「フォントをMSゴシックからメイリオへ」、「コンテンツを中央に据える」、あとは「現在散らばってるCSSをサイトトップ用と小説ページ用のみで管理できるようにする」など。
リンクに関しては.hutuuというクラスを作って、ボックスリンクにしたいヤツに適応させていくことにしました。なんで普通なのか。.boxとかにしなかったんだろう。コンテンツの少ない今ならまだ変えられるか。
そこからサイトトップの画像やら影・角の丸の処理を付け足し。地味なりにメリハリをつけ、いくらかノートっぽいデザインに。
ついでにリンクに色を付ける。これはなんかダサいので後で調整する。
それで出来上がったのがこちら。
これをスマホ対応にします。
そしたらPC用CSSをコピーして、それを編集しました。
画面幅を800pxから可変にしたり、ボックスリンクの幅を調整したり。コンテンツ下の影は消して、代わりに背景色を少し暗くしています。
それがこちら。
基本のCSSが完成したので、これを小説ページ用に改変しました。
基本はほぼ同じですが、行間やpaddingが変更されています。
今回はここまで。
今後の課題は
・小説ごとに背景色を変えたい
→これは各自背景色とリンクの色を変えたCSSを作成すればOK。問題は配色センスのなさ。
・小説一覧のところのリンクをもう少し何とかしたい
→デザイン上の都合があってボックスリンクに対応させていない。うまくいかん。
あるいは「背表紙」として各々の画像を作成してリンクにするのもいいかも知れない。問題はデザインセンスの以下略。
→言葉から色を解析するサイトで二色バーを作ってるところがあったような。そうすればそこにタイトルを入れれば大丈夫か。
・同じ理由で小説ページの下部にあるページ送りもボックスリンク非対応。グローバルナビを流用するしかないか。floatで右に寄せる。
・グローバルナビの背景色をそれぞれ変えたい。
→それぞれクラス作れば対応できるか？
