ダークモードに対応

このサイトもダークモードに対応しておこうと思い、prefers-color-scheme を使って配色を分けるようにしてみた。

基本的な方法を解説しているブログは多数あるので、その上で必要だった工夫をメモ。

全体の構成の方針としては、CSS変数を活用してライトモードとの重複コード、または漏れを防ぐようにした。

以下はCSSの構成イメージ。

Blogger Accessibility Performance改善

以前改善してからまた時間がたったので、改めてLighthouseの点数改善にチャレンジ。

なお、Chromeでログインして拡張機能でLighthouseを使っている場合、シークレットウィンドウからの実行を許可した上でシークレットウィンドウから実行しないと、キャッシュが使われてしまい正しい結果が出ない。
lighthouse の npm コマンドで実行するのが無難。

Blogger 高速化

自分で構築すればもっとシンプルで楽にできるのかもしれないが、長らくこのドメインでやってきていることもあり Blogger を続けようと思っている。
ただ、Blogger の「テンプレート」にはいろいろムダなものが入っていて、ページの表示が遅かったりする。ブログ再開を機に更新することにした。

Lighthouse の Chrome Extension での計測で、以下のように改善。

項目	変更前	変更後
Performance	75	90
Progressive Web App	58
Accessibility	44	65
Best Practices	79	93
SEO	100	100

PageSpeed Insights だとモバイルが 91 点、PC が 100 点に改善した。

実際に表示した場合のあるときの数値は
69 リクエスト、652 KB、5.9 秒から
38 リクエスト、325 KB、3.1 秒に改善 (ばらつきはある)。

以下では、その改善のための変更内容について説明。

Bloggerでモバイル表示時に横スクロールが発生...

PageSpeed Insightsを使ってこのブログを色々改善しようと考えた。
それなりに改善したものもあるし、Bloggerを使っている限り難しそうなものも多いので諦めているものもあるが、その中で「なぜ？」というものがあった。
下記の警告。

コンテンツのサイズを表示域に合わせる
ページ コンテンツの幅が表示域に対して広すぎるため、水平方向へのスクロールが必要になります。ユーザー エクスペリエンスを向上させるためにページ コンテンツのサイズを表示域に合わせてください。
ページ コンテンツの幅は 360 CSS ピクセルですが、表示域の幅は 320 CSS ピクセルしかありません。次の要素が表示域から外れています:
要素「<div class="widget-content"></div>」が表示域から外れています。

確かに、モバイルのエミュレーションで確認すると右側に余白ができており、横スクロールが発生している…。

StackEditで投稿してみる(3)

StackEditでMarkdown形式で編集し、シンプルなHTMLを投稿した上で
CSSによるデザイン調整ができればかなり良い。
preタグ、codeタグは何とか表示できたので次は引用。

引用するとblockquoteタグとpタグが入るようだが、
pタグは行単位に入るのか？

というのを確認したかった。

追記：
上記を一度投稿して確認してみると、blockquoteの後にpタグは1つしか入らなかった。
この前提でレイアウト調整してみよう。

Written with StackEdit.

StackEditで投稿してみる(2)

投稿された内容がどうなっているのかなと編集画面を開いたところ、色々変換されてしまったらしい。

レイアウト調整のためにタグの関係などを確認してテンプレート編集画面で調整していたのだが
なぜか反映されず、どうなっているんだ？と改めて投稿編集画面を開いてみると、
タグの構造が変わっている。。。

<p>タグがなくなり、すべての行末が<br />タグに変わっていた。

追記：
改めてブログを再読み込みしてみると修正されていた。。
テンプレートをいじっていたのが原因か？？

Written with StackEdit.

StackEditで投稿してみる

Bloggerへの投稿でMarkdownを使えたら良いな、と思い調べてみると
StackEditが良いというのを見つけたので試してみた。

Bloggerだとソースコードを貼付けたい場合に「作成」ビューで貼れば問題なく表示はできるが、
スペースをすべて&nbsp;に変換したりとかなり無駄ができている。
「HTML」ビューならHTMLコードを書くことで対応できるが非常に面倒。

これがStackEditだとMarkdownなのでインデント(4スペース分下げる)で
ソースコード表示(というか引用？)になるが、これをBloggerへHTMLとして投稿すると
<pre><code>というタグで囲まれた形に変換されるらしい。
このタグをカスタマイズしたCSS(テンプレートを編集)でデザイン調整すれば良いかもしれない。

コードはこんな感じ：

public static void main(String[] args) {
    System.out.println("Hello, world!");
}

Bloggerはともかく、StackEditで編集した内容はDropBoxやGoogle Driveとも連携できるし
スタイルがついた状態でPDFに出力したりもできるようなので使い道がいろいろありそう。