今までサイトのレイアウトはPCをベースに 各種サイズをpxで指定してたのですが、 フォントサイズを基準にしたemで設定し直しました。
スマホとかタブレットは年々表示サイズが大きくなってるのに 今さら気が付いたので、基準となるフォントサイズを 計算で出して最小値と最大値もついでに設定。 CSSもだいぶ進化しましたね。
clamp(1.4rem, 100vw / 26, 2.0rem)
具体的には上記のように。横390pxだと15pxになります。 タブレットだと大きくなりすぎるので上限を設定。 ヘッダーのボタンとイラストのサイズも スマホとタブレットで別々に設定してます。
AIイラストやリベサガプレイ日記のページもなるべく 画像が大きく表示されるように調整。 ここもPCベースのサイズだったからようやく改善！
私はいわゆる個人サイトを2000年から作って公開してます。 サイト名やらドメインやらサーバーやらコンテンツは その時々で変わってますけど。
まだやってたの という友人からの心無い言葉にもめげず、 なんだかんだ四半世紀もやってる。 続けてこれたのは多分、自作のブログツールがあったから。 これは改良しつつ今も使ってます。
サイト更新HTML手打ちは面倒だな……
そうだ 京都、行こう ブログツールを作ろう。
いやいや そうはならんやろ……なっとるやろがい！！
私なら作れちゃうからね。仕方ないね。
当時WordPressはメジャーではなかった気がする。 数年後にWordPressへの移行を考えた時期がありましたが、 オブジェクト指向で書かれてなかったのでやめました。 オブジェクト指向大好きだからね。仕方ないね。
これから個人サイト、ブログ的なのを始めたい人は今だと note とか Wix とか Tumblr とか Studio とか Jimdo とか色々サービスがあるからこういうのが手っ取り早いし、 デザインのテンプレートも用意されている。 デザインに凝りたいんだったら自分で作るしかない。 私の場合は面倒さより楽しさが勝ってる。それだけ！
先日スマホ向けのサイトデザインを変更しましたが その詳細を備忘録として残しておきます。参考まで
デザイン的に古いと判断。 無難なデザインだったがやや圧迫感があった。
丸ボタンのリンクを3つのみ表示するようにした。 必要なナビゲーションはこれだけだと判断。
ブラウザのフリック移動が標準で搭載されるようになったから。 OSの機能かもしれない。
恐らく需要が低い上に見て欲しい度も低いから。 HOMEの表示とも繋がるので。
絵描きを目指す者として結局見て欲しいのは絵。 初見時のインパクトを出したかった。
さりげなく名前をアピール。 セルフブランディングの一環。
現行のiOSで「ヒラギノ丸ゴ ProN」という いい感じの標準フォントがあったから。 Androidは知らん。サイズも少し大きくした。
レスポンシブに対応してから肥大化していたので メディアクエリーで完全に分離させた上、 セレクターをなるべく減らしてダイエットした。
FOUCとは何ぞやというと Flash of Unstyled Content の略でWebページを表示する際にCSSが適用される前の 素のHTMLが一瞬表示される現象。チラついて見えます。 経験上、Firefoxで発生しやすい気がする。
先日のリニューアルで当サイトも発生してしまうようになりました。 PC版のFirefox限定ですけどね。 3日かけて調べて色々試した結果、 何とか解決したので備忘録として残しておきます。 Firefoxのページ右クリック→調査のコンソールで以下の文章が出たり出なかったり。
ページの読み込みが完了する前にレイアウトの開始が強制されました。 スタイルシートがまだ読み込まれていない場合、 スタイル付けされていないコンテンツがちらつく原因となる可能性があります。
要するにCSSのパースが終わってないのに レンダリングが始まっちゃうってこと。 どう直せばいいのかも教えてよ。 通常はhead要素内で外部CSSを読み込むとレンダリングが ブロックされるはずなんですが、されない。 なんでやねーん……
結局原因は何だったかというとスマホ向けのポリフィル（JavaScript）でした。 これが60KBもあるので悪さしてるっぽい。 script要素にもmedia属性が付けられたら 良かったんですが残念ながら無理です。
で、どうしたかというと ポリフィル＋アニメーション設定 の部分を別の.jsファイルに分離して スマホのみページ読み込みの最後で呼び出すようにしました。
「load」イベントだと戻る、進むの時に発火しないので 「pageshow」イベントを設定。 createElementでscript要素を作成してbody要素の最後に追加で完了。
あー疲れたー！！
というわけで今まで無難に作って騙し騙し 使っていたスマホ向けのサイトデザインを 大きく変えることにしました。
自分がスマホあまり使わないので（ロマサガRS以外） 優先順位が低かったものの、 さすがに本腰を入れる時期ではなかろうかと。
私は仕事柄WebデザインやスマホアプリのUIデザインを やったりすることがあるのですが、 今まで「私はデザイナーではない」という免罪符で 凝ったことは出来ませんなスタンスでした。
が！ 今回はもう「これが私のセンスだ、文句ある？」 と開き直ることにしました。
秘技『消えるヘッダー』！！
まぁ変えたのはヘッダー部分だけなんですけど 結構印象が変わるものですね。 最初はボタンもにゅって動く予定でしたが、 スペースの都合とか2回目以降はうるさいんじゃね？ という懸念があったので今回は見送り。
スクロールするとヘッダー画像とボタンの テキストが消えて見やすくなります。 ふふふ……真似しても良いですぞ？
この機能最初はCSSで実装したんですが iOSのSafariもChromeも動かないので、 JavaScriptで実装し直してポリフィルを 追加したことでようやく実現出来ました。
特定条件下で戻る、進むの時にチラつくことがある とかバグがあるのはご愛敬。数年後にCSSに移行すれば 直るのでは？ と期待してます。
で、肝心のヘッダー画像ですけどまだ全然途中だったりw まぁじわじわアップデートしていくのも楽しそうだなってことで。 モチベーションも上がるしね。 最終的に色まで塗れたらいいな、とは思ってますが果たして。
スマホのサイトデザインから逃げるな！
久しぶりのアップデート。細かい部分ですが 今まで端末機種をキャリア（型番）別に分けて 表示してたのを同じモデルは合算して 表示するよう変更しました。
あと配列周りの古い書き方をモダンな書き方に変えたり、 一部関数をより高速な関数に置き換えたりして最適化しました。
主な変更点は以下