もうゴールして……ダメか……？
ダメ？？？？？ダメか？？？？？？？ゴールしちゃまだダメか？？？？？？？？？？？
もうゴールしていいよね？？？？？？を軽量化しました。
見出し用CSSセレクタの範囲を縮小
問題と原因
クソ雑魚回線またはレガシー端末にてページをロードすると、「ーーーもう、ゴールしていいよね。」の文字の表示が一瞬崩れてしまっていました。
▼これが本来の姿。
我ながらこのポスターめちゃくちゃいいな。画像がいいな。な？
原因は別々に記述されたCSSを読み込むタイムラグのアレです。
始めにブログ全体に係るCSSをロードし、その後で記事内に記述されたCSSを読み込むために、クソザコ回線だと記事内のCSSを読み込むまでに時間がかかってデザインが崩れるんですね。
解決編
解決策はこうです。
①もうゴールしていいよね？？？？？？を記事ページから固定ページへ移動する
②ブログ全体に係っているCSSを記事ページのみに限定する
これで固定ページを読み込む時には見出しに何のCSSも係ってないので、記事内に直接記述された分だけを読み込めばよくなるというわけです。
副次効果として、記事ページにいた時に読み込んでいた他の余計で膨大なCSSたちも無視できるのでさらに早くなるはず。
では順番に解説するンゴね。
①もゴいねを記事ページから固定ページへ移動
まあこれは簡単。
もゴいねの記事の全文をコピーして、作成した固定ページにペースト。おわり。
②CSSを限定化
はてなブログの記事ページには、page-entryというクラスが付与されています。
このクラスをセレクタに含めれば、記事ページにだけ係るCSSを記述することができるんですね。
▼こんな感じ。
ブログ全体の見出しを装飾 h2{ background-color: white; } 記事ページのみの見出しを装飾 .page-entry h2{ background-color: white; }
僕はこれの上みたいな感じで見出しを指定していました。（ほんとは.entry-contentつけてたけどど。まあ。）
そう、
指定してい ましたんです！
してい！してい ましたのんですね！！！
まあ普通にブログする分には何の問題もないんですが、CSS大好き倶楽部に所属するみなさんには少し不便ですよね。
なぜなら、記事ページごとに見出しのデザインを変えたい！とか、白背景なのに見出しの背景に白を指定しても何も変わらない！（吸引力か！？）という時に、邪魔もしくは無意味な記述になっているからです。
ということで、見出しセレクタ（h2）の前に.page-entryを追記しました。
ちなみに固定ページにはstatic_なんとか（は？（忘れた（PC開くのめんどい））とかいうクラスが付与されているので、固定ページオンリーに係るCSSを記述することも可能です。
いい感じに活用してくれ。
結果
見てくれ。
軽量化前は上の画像のようにイイカンジになるまで5秒くらいはかかった。
ところが、なんということでしょう。
ノータイム。完全ノータイム。
軽量化前は重すぎたのでローディング画面を挟んでたけど、いらなくなっちゃった。すごい。
CSSってすげえや。
よく考えて書かなきゃね。
おわり
おわりだよ。
正直3個くらい書こうと思って書き始めたけど1個しかなかった。何を言ってるのか分からねえと思うが。
答えはいつだってシンプルってやつなのさ。
おわり
