ブログを白背景から黒背景に変更して苦労したこと気づいたこと

みなさんのコメントを拝見するのもダークモードに切り替えたりしてました。なら最初からダークにしとけよ、ということでしばらくダーク背景で行こうと思います。説明なんかが多い場合は白背景が適切というのは承知の上ですがすみません。同じように白背景から黒へ変更したい方がこれから増えるかもしれませんね。夜間のスマホ使用でトーンを落としている(ナイトモード)方も多いでしょうし。

という流れで、私自身が切り替えの際に苦労した点、気づいた点などをまとめようと思います。記事内でhtmlを使い倒している人ほど移行が面倒 という記事内容です(笑)

文字色指定に注意

「私は絶対白背景しか使わないわ。」と思ってても変えたくなることってありますよ。人間なんてそんなもの。あまり頑なにならずー (´・ω・｀)
で、まず注意したいのは エディターツールを利用した文字色指定 ですね。

ツールを使わずに直接色指定しても同じですが多くの方はツールを利用しているだろうと思います。なにせ白と黒は反対色なのですから、白背景で見やすかった文字がまるっきり見えなくなってしまうこともありえます。

この文字は青色です この文字は青色です

全くわかんねー

この指定がこうなってればセーフ ↓

<span class="xxx">テキスト</span>

この場合は色指定をスタイルシート側で行っていますので、xxxセレクタに別の色を指定し直せば良いだけの話です。ところが多くの方、エディターツールを利用する方は以下の形です ↓

<span style="color: #000066">あいうえお</span>

これはFC2ブログのエディターがこの形で吐き出すから仕方がない。span要素の style属性 に直接色を指定しています。CSSには優先度があり、つまりは強制力のことなんですが、style属性でのCSS指定(インラインCSS)は優先度が高いので仮にスタイルシートに指定があったとしてもstyle属性の方が適用されます。

例) スタイルシートで白文字が指定されていても黒文字になります

<span style="color: black;">あいうえお</span>

span {color: white}

この場合は以下のようにすると優先度が移動します。

<span style="color: black;">あいうえお</span>

span {color: white !important}

important は最優先指定ですからこうすれば白になります。ところがこれは理論値だけで、実際のページは同じ要素(この場合はspan)で別の色指定が行われているなんてのは当たり前です。ですから全く現実的ではない。

この件については「気をつける」「常に反対色の脳内シミュレートをする」しかないですね。私は割とやっていた(つもり)なので該当は殆ど無かった、というよりも テキスト内のあちらこちらで色変更をしている ということ自体が問題だと思いますよ。ん？こういうことしてないですか？ ↓ (文章はダミーです)

どこは当時いくら大きな始末院という事のためを取り巻かだった。同時に以後と所有者は同じく！この認定ましょたなどから済んけれどもいるませには招待しでしょたて、実際には見えたあるたあり！

どこは当時いくら大きな始末院という事のためを取り巻かだった。同時に以後と所有者は同じく！この認定ましょたなどから済んけれどもいるませには招待しでしょたて、実際には見えたあるたあり！

背景「白」と「黒」では見やすい文字色がこれだけ違うんですね (´・ω・｀)

背景色を指定したら文字色も同時に指定

これは私自身ところどころ怠っていました。基本の文字色というのは通常テンプレート側で指定されています。記事背景が白ならば文字色は black あるいは rgb(50,50,50) など黒系統の色が指定されているはずです。例えば記事内で以下のようなボックスを利用したとします(スクショ)

白背景の場合

黒背景の場合

「あいうえおかきくけこ」は記事に直接書いてあり、色の操作はしていませんのでテンプレートの基本色指定に倣って白背景では「黒」黒背景では「白」でそれぞれ表示されています。問題はその下のグレー背景の中のテキスト。

<div style="background: rgb(240,240,240); padding: 1em;">テキスト内容</div>

作成時は白背景で勝手に黒文字になるもんですから、グレーの背景色だけを指定して文字色指定を怠っています。ところが背景色が反転すれば当然文字色も反転するわけですから、白文字になってしまいました。この「色指定を怠っている」ミスが点在していました。反省 (∵`)

<div style="background: rgb(240,240,240); color: rgb(51,51,51); padding: 1em;">テキスト内容</div>

テンプレートの基本文字色と同じものを指定すると無駄であり重複ですから蛇足に感じますが、今回のような「背景色が反転するかもしれない」ことを想定するとやはり書いておくのがベスト。背景色指定と文字色指定はワンセット だと思っておいた方が良いですよね。いや、実際そういうつもりでいたんですが、それでもところどこと書き忘れていたので、そのあたりあまり意識していない、という方は是非今のうちから(笑)

複雑なスタイリング、頻繁に利用するスタイリングはスタイルシートへ

スタイルシートに記す、というのはつまり クラス名を付けておく のと同じことです。

クラス名をつけることの重要性

記事内でhtmlをよく利用する、という方は、その要素にクラス名を書く というのを癖づけされた方が良いと思います。 つまり本記事内容は クラス名付与のススメ ( ﾟДﾟ)ﾉ...

vanillaice000.blog.fc2.com

例えば先程の文字色で問題が生じたサンプルにしても、頻繁に利用するならばこう ↓

<div class="gray-bg">テキスト内容</div>

.gray-bg {
  background: rgb(240,240,240);
  padding: 1em;
}

文字色指定を忘れていたのならばCSSの方に

.gray-bg {
  background: rgb(240,240,240);
  padding: 1em;
  color: rgb(51,51,51);
}

こうして追加あるいは変更するだけで対象が100だろうと200だろうと一括で修正が済みます。クラス名がついていたから助かった、なんとかなった、という場面は結構巡ってくるんですね。ただなんでもかんでも追加するとCSSが膨れ上がってページスピードに影響してしまいますので、style属性を利用するかスタイルシートかは都度臨機応変に。

currentColor値を上手く使う

currentColor という値は 文字色を継承させる ために利用します。具体的にこういうの ↓

白背景

黒背景

borderで上の文章と下の文章を区切っていますが、黒背景だとborderが同系色なので見えなくなってしまいます。ソースコードは以下のようなもの。

<p style="padding-bottom: 1.9em; border-bottom: 1px solid rgb(51,51,51);">上のテキスト</p>
<p>下のテキスト</p>

borderの色指定が白背景のみを想定したものになってます。これを

<p style="padding-bottom: 1.9em; border-bottom: 1px solid currentColor;">上のテキスト</p>
<p>下のテキスト</p>

にしておくと黒背景では以下のように文字色を継承して白くなります。

黒背景

文字色と同じ色で良い、と判断出来る場合には有効です。

tableはtdにも背景色を指定する

tableに限らずですが、width:100% が指定されており、かつ親要素に overflow: auto が指定されている場合には指定した背景色が途切れてしまいます。利用パターンが多いのはtableだと思いますのでtableを例に取ります。

<div style="overflow-x: auto; white-space: nowrap;">
  <table style="width: 100%; background: 背景色; color: 文字色;">
    <tr>
      <td>内容
  </table>
</div>

で、この解決策には min-width を指定するだとかいろいろあるにはありますが、下手打つとレスポンシブが壊れてしまいますのでもっと簡単で確実なのはtdにも背景色を指定しておく。それだけのことです。もちろん文字色指定も忘れずに。

<div style="overflow-x: auto; white-space: nowrap;">
  <table style="width: 100%; background: 背景色; color: 文字色;">
    <tr>
      <td style="background: 背景色; color: 文字色;">内容
  </table>
</div>

これもところどころ怠ってますね。私 (´・ｪ・｀)

まとめ

普段からこのあたりに気を配っておくと ライト ← → ダーク の背景切り替えがスムースに運ぶのではないかな、と思います。

企業ブログが黒背景だと信用されない、情報ブログは白背景であるべき、黒背景なんて目が疲れる、といったセオリーは昔からありますし、それは未だ健在というか間違いではありません。とはいえモバイル(スマートフォン)がこれだけ普及してくるとそうとは一概に言えなくなっているのではないかと。

スマートフォンには ブルーライト が使われていますのでそれがとっても眩しく感じるんですね。トーンを下げることによりそれが感覚的は軽減されます。もちろんブルーライト対策というわけではなくあくまでも体感の話ですが、画面を暗くするのが一つの解決策となっているのは事実。ですから昔と同じような意味合いで「黒背景は目が疲れるから悪！」とは言えないんじゃないかしら。

黒背景でも結局のところコントラストが強すぎると同じように「目が疲れる」「眩しい」となりますので、真っ黒(#000000)ではなく数段階明るめに調整しておくのが望ましいと思います。また、文字を白背景よりも少し大きめにしておくと読みやすいかもしれません。

というわけで、背景色変更時のtipsとして。