はい。改装しましたー! 第5世代ってやつですね!
Historyのデータを新htmlに移して挙動を確かめようとしたら7月27日がてこまいの18周年ってことに気づいて、急いで27日に間に合わせて更新した次第です。基本はできてたんだけど後述のCreate/Other関係は更新直前に気づいたんで結構バタバタになっちゃいました。
改装に対しての思いは前回の記事でつらつらと書いたので、今回はインデックスだけ改装することによる暫定対応の苦労についてをつらつらと。
個別ページ(第4世代)の暫定対応
最終的にはすべてのページをインデックスと同様に新しくするつもりなんだけど、中の個別ページについてはまだレイアウトが決まってなくてできてないんすね。なのに今回は結構アクロバティックに中のページを組み替えてるんですね。なのでインデックスを新しい分類にしつつ、中の各ページもゆくゆく1からhtml書き直すけどとりあえず新しい分類に暫定対応しないといけない。そんな面倒がありました。まぁ18周年に間に合わせようなんて思いついたのがいけなかったんだけどね。
と言うことでこの辺の苦労をダラダラと書いて行けたらなぁと思います。
今回の改装にあたっては、(1)インフォやリンク集があるゼロ年代式の雰囲気を払拭、(2)見られてないだろうページかつ放置状態になってるページは配統合、(3)いうてもやっぱイラストサイトなのでイラスト系コンテンツを前面にするといった企てがありました。なので、各ページの構成をこんな感じに…。
前回の記事でも書いてますが、2020年の個人サイトってこうだろうってのがあったので、リンクのルールとか、キリ番とか、カウンター素材みたいな古くさい文化はある程度切り捨ててます。
あとイラストサイトらしさを出すため、これまでは2クリックしないと見られなかったcomicをindexから一発で行けるように昇格。
てな感じでインデックスより先の未改装ページにも手を入れる必要がありました。
これまでの各ページは上にリンクを付けてたんですが、そのリンクは透過PNG化した画像でやってたんですね。ただ、これまでも作るたびになぜか画像の雰囲気が変わっちゃっててあんまり勝手が良くなかった。てことで今回の改装では、
GoogleFontsでフォントを整えつつ文字にcssのbox-shadowを使って影を落とす! これで文字を変えたくなったときもいつでも変えられる! …まぁそんな頻繁に変える部分じゃないんだけど暫定のものなのでテキストで落とせたほうが楽だしなーという方が本音だったり。ちなみにGoogleFontsを使う必要はなかったんですが、もともと使ってたFrutigerと同等か及第点程度の文字じゃないと満足できなかったので指定しました。この書体でとりあえず、ぼく満足!バー。
なにげにこの画像をスクショした直後にFont&OtherをFont,etc.に変えてたので早速恩恵をうけてますね。いやCreate内にIllustとComicとOtherがあったら絵でも漫画でもない創作物ってわかるけど、Createのくくりを外したら何に対してのotherかわかんなくない?と思って変えました。えへっ。
これの適用は、もともと各ページのメニューを一括で更新できるようにSSI化してたんで1つ変えるだけですみました。画像左のタイトル部が古いままなのは勘弁してください(><)
あとコンテンツの割り振りが変わったのについては、だいたいindexに収めるだけだったのでindexを作成してる最中にだらだらと進めてました。Information、昔は管理人に100の質問とか、管理人プロフィールページとかあったんだけどね。プロフィールページなんかどこのサイトもこってて、てこまいは井上喜久子さん方式の年齢表示とかやってましたし。17歳220ヶ月みたく表示されるやつ。うーん時代ですねぃ。
Bookmarkも、今どきにしては珍しくこつこつ個人サイトを更新し続けてる人をリンクしたりしてんですけど整理してしまいましたね。リンクは剥がしたけど個人的に見に行くからね。
それとFontとCreate/Otherが合併しました。これまでFontページは全体的にまふまる体で表示するようにしてたんですが、Otherと合併させるにあたってとりあえずその部分だけまふまる体の表示になるようにしました。リニューアルしたらちゃんと配置するんで…。
これでうまく収まったと思ったら、そういえば貰い物イラストを置いてるCreate/Presentの存在を忘れてた。Illustは自分の絵を置くページであるべきと考えるんでそこには置けないし、最近はTwitterで相手の名前に@付けて普通にツイートするからサイトに載せる流れになる貰い物イラストってないなーと。そうすると今後ここに増える絵は無さそうなので貰い物の絵もOtherに吸収させました。
そんなこんなでOtherのボリュームがすごいことになってきたので、さり気なくweb素材を消しました。カウンタ画像とか800×600時代の壁紙とか当時からして使いみちが怪しかったものたちですが、存在することで問題が起きたりしなかったんで残り続けてました。けど邪魔になったので削除。
てことでweb素材使用サンプルページにこっそり書かれていたうちの恋愛小説もどきは晴れて世の中から消え去ったのです。よかったよかった。
ちなみに前回の記事で書いた「古い端末を切り捨てる大胆な設定」とは、スマホ対応の方法でして、普通のサイトはviewportを「画面幅が768px以下ならスマホ表示」とかするんですが、iPadの横表示をPC表示に合わせたかったんだけどやり方が分からなくて結局「画面の比率が縦長ならスマホ表示、横長からPC表示、ただし幅が1200px以上あったら縦長でもPC表示」って感じにしました。うちのPC(MacMiniと24インチモニタ、MacBook)、スマホ(android)、タブレット(iPadmini、iPadPro)では今のところ不都合無いですが、キーボード外せる小さいWindows10(1366×768)は縦表示にすると端が見切れちゃいました。初代surfaceとかそこいらが問題ですがまぁ無視。てことで大胆。昔からこういうサイトです。せっかくだからパソコン買い替えましょう。
てな感じで、リニューアル前の既存ページにも色々手をかけたよーって話でした。
個別ページのリニューアルは
実は全然見えてない状態です。
個別ページの枠とか見出しのレイアウトはindexのと同じのを使うつもりなのでいいんだけど、メニュー部が決まってない。
一時期ハンバーガーメニューに憧れてたんですよ。
スマホで見ててもじゃまにならないし、動いて面白いし。面白いものは導入したいと思ってました。
でもハンバーガーメニューにも色々あるらしい。
ハンバーガーメニューやめてみようと思った件(サイドスリーブログ2020/02/10)
三本線がメニューってわかんない人だっているよね??って話とか代替メニューの提案とかされてますね。
「ハンバーガーメニューはもう古い」は間違っている(Web Design Trends2017/09/25)
こっちでもメニューだって気づいてもらえないとか、展開するまで何が入ってるかわからないって書かれてる。まぁ古いってのはちょっと違うと思うけどな。新しければ何でもいいってわけじゃあるまい。内容はハンバーガーメニューを適切に使い続けるのがいいというもの。
つまりは適材適所、っていう調べた意味があまりない結論になっちゃったわけで。
まあでも、どっちの記事もスマホは画面の上の方は押しづらいって書いてある。そんな中で画面が広く使えるのがハンバーガーメニューってことなんだけど、まぁ最近のスマホって大きいし、そんなに表示領域を欲張らなくていいかなーって。あと指の届かなさについても下にメニューを固定することで解決させたいなと思ってます。漠然と。
ただ問題はPC版。先代(第4世代)、先々代(第3世代)から上メニューを使い続けて勝手の良さは折り紙付きなんだけど、やっぱせっかくだから変えたいと思ってしまう。PC版は幅を1000px固定で作ってるんで大抵のPCモニタの幅は持て余しちゃうんだけど、もし幅1024pxのPCの人がいるとこれ以上広げられないんで、むしろPC版にだけハンバーガーメニューを導入するなんてことに…?? いやーPCの大画面でこそあの三本線は見つけられないと思うしなぁ。
みたいな悩みがもんもんと漠然とあります。多分ちょっと本気で色々探せば良いサイトが見つかったりすると思うんだけどまぁそのうち。
あとイラストページをどう作るかですよね。縦横比もサイズもバラバラの画像が100程度あって、サムネイルをどう作って並べるかとか、1枚ごとのページをどうレイアウトするかとか。多分1枚ごとのページは画像クリックで暗転して画面いっぱいに拡大するあれを使うと思うんだけど、ブラウス方法をなんか今どきっぽくできないかとこれも漠然と悩んでます。すごいよね。クライアントが雑な指示で下請け困らせるアレを一人でやってる。
といった感じで、結構考えが煮詰まらない期間が長そうで、ここから進展するのにちょっと時間がかかりそうですが、またお付き合いいただければ。