モバイルフレンドリー
なんだかとってもストレスフル。
気温変化も激しく頭痛は酷いわ、仕事は限界突破的にキツイわ……。
というわけで、苛ついて眠れない秋の夜長にもうちょっと自サイトをいじることにしました。
訪問者なんてほとんどいない辺境なので、完全な自己満足ですが。
素人が趣味全開手慰みに作っているサイトなので、好きにやりますよ。
最近の平均睡眠時間は3時間30分前後……。うん、それは体力落ちまくるにきまってるよね。
それはともかく。
とりあえず、ブログ周りとか、小説ページ周りとか気になっていたところは一通りなんとかしたので、本格的にモバイルフレンドリーに取り組んでみました。長くなるので続きを分けます。
BootStrap 使ってるぐらいだし（だから無闇矢鱈とサイトが重いのですが）モバイルフレンドリーなんて楽勝だぜ！
とか、思って手をつけたのですが。あれ？ 私、よく考えなくても BootStrap の機能ほとんど使ってなくない？
まともに使ってるのって、Toasts と小説ページの TABLE ぐらい？
でも、その TABLE も中途半端で各項目の表示がそろってなかったりしてたよね？（修正済みです。TABLE はグリットシステムで幅の固定化ができなかったんですね。まさか width の％設定が必要だったとは。今更知りました）
一応、これを使わなくちゃ意味ないでしょ！な、グリットシステムも入れてますが、導入当初あまりにも使い勝手が悪いと感じたのでうっかり flexbox でごまかしてしまったり、モーダルは気に入った JS を余所から持ってきてしまっていたり。
そもそも BootStrap の CSS すら全部読み込んでいませんしね。
※私が作成したときに参照したのは違うサイト様でしたが、こんな感じで機能絞ってます。
おかげで初導入しようと思った Badges が使えなかった。
該当のスタイルシートをを読み込めば良いだけなのですが、色も好きに設定できますし使う部分だけ書いた方が早いので結局自作の SCSS を弄りました。
ブレイクポイントも自分で設定（こちらのサイトの説明がすごく良くて便利でした）済みですしね。
これでは導入した意味がないので、今回、もうちょっと頑張って機能使ってます。
といってもブレイクポイントぐらいなのですが。そこそこ便利でした。
BootStrap は関係ありませんが、モバイル対策にあたり、非常に活躍してくれたのが こちらの clamp です。フォントサイズにも幅の指定にも用いてます。
なんと、自動計算してくれるサイトもあるのですよ。
ただし、Sass ではエラーが出るので、unquote("＊＊＊"); で囲わなければなりません。
css に変換後は問題なく使えます。
途中、PCでは動くのに、何故か iPad mini が反応してくれないケースがすごく多くて何度もやり直しする羽目になりましたが、なんとかGoogleさんに認めてもらうところまできました。
余談ながら Google Chrome のデペロッパーツールで一番小さな画面は 280×653 となっています。
調べたら二つ折り携帯の片側のサイズみたいですね。
今時こんな小さな画面使ってるやついるのか？ とか呟きつつ、動作確認は愛用の INFOBAR XV で行いました。
表紙のロゴ表示遅い、メニュー画面がスクロールができない（追記：あんまりなので修正しました）という微妙なできばえですが、一応全ページ最低限の可読性確保は終わっています。
がんばりました。