Googleサーチコンソールに登録したのだけど、そこに速度測定できる機能というか、速度測定サイトへのリンクがあるんだけど、 結果を見てると面白い。

PageSpeed Insightsっていうサービスなんだけど、 ページの表示スピードと評価がPC向けとモバイル向けそれぞれに表示されるのね。 で、その中に、「CSSはインラインに書くと速くなるよ」みたいなこと書かれてて…。 風の噂には聞いていたけど、インラインCSSの風潮が一部で戻ってきているとか。 確かに、外部CSSを読みにいくことに比べれば、場合によっては速いだろうけどさ。 けどさ。

あんなにみんなで外部CSSにしようね、って決めたじゃん…！笑

色々トレンドが移り変わるのはしょうがないし、どこに主軸を置くのかは難しいとこだけどさ、

• HTMLは文書構造を簡潔に書こう
• 装飾は外部CSSで指定しよう
• よって、インラインCSSはなるべくやめよう

っていうとこに落ち着いていたはずなのに。

twitterのウィジェットを設置してみたんだけど、なんかそこだけゴシック体になっちゃってなんだかなー…と思ったので、無理やりフォントを変えてみたよ。

ウィジェット自体はみんな大好きなiframeで生成されてるんだけど、JavaScriptを使って、そのiframeのhead部分にcssファイルを追加して読み込ませてしまおうという手法です。 外部cssファイルそのものを参照させてるので、cssを書ける人であればかなり柔軟にカスタマイズ可能です。

同志のためにソースコードを貼っておくけど、まず準備物から。

• twitterアカウント
• ウィジェットコード(ここで取得できるよ)
• カスタマイズ用のcssファイル(外部参照するため、自身のサイトの空きスペースにアップロードしてURLをメモっておいてください)

以下、ソースコードとなります。※利用は自己責任でお願いします(ないとは思うけど、twitter側から怒られても当サイトは一切責任を持ちません/笑)