「文字が読めない」このトラブルは多くの場合「白背景から黒背景にしたら(逆も然り)文字がところどころ読めなくなった」というケースが多いですね。つまり フォントカラー指定時に背景色が反転した場合を想定していなかった ということです。この解消法について。
参考記事
どんな時にスタイルシートを使い、どんな時にインラインCSS(style属性)を使うのか
記事内でCSSを利用する際の方法の使い分けについてです。当然ですがスタイルを充てるためのhtmlの記述が必須ですから、今回は中級以上の方向けの内容です。そして 旧投稿画面の利用を前提 としています。...
ブログを白背景から黒背景に変更して苦労したこと気づいたこと
ワタクシ個人の「やらかし」の記録です (∵`) 最近は記事を書く以外のほとんどのweb閲覧をスマートフォンで行っています。しかも夜。白い背景だと目がめっちゃ疲れるんですよぅ (∵`)...
テキストが読めなくなる原因
原因は上記参考記事をご覧頂ければおわかりだと思いますし、物理的にも当たり前のことなんですが、今利用しているテンプレートの背景色だけを気にしてテキストに色をつけてしまう と背景色反転(暗色 ←→ 明色)で都合が悪くなる場合がある、と。
この文字は 10進数 rgb(0,0,255) / 16進数 #0000ff / カラーネーム blue です。
この文字は 10進数 rgb(0,0,255) / 16進数 #0000ff / カラーネーム blue です。
いわゆる「青(blue)」はこの色です。10進数のrgb関数では rgb(0,0,255) 16進数では #0000ff で、代表的な色ですから恐らくどのブログサービスでもエディターのカラーパレット内に収まっているであろう色。
「白背景」では視認性が高いものの、背景色が反転し「黒背景」になるとこうして非常に読みづらくなってしまいます。ですが自分がこの「青色のテキスト」を利用した際には白系統背景色のテンプレートを利用していたはずで、まさか自分が黒背景に変更したくなるなんて夢にも思っていなかった、とかそういう感じ(笑)
手作業で修正する場合
これも至って当たり前で説明するまでも無いんですが、修正対象が200記事以内ならば手作業での修正をおすすめします。
個人的には200がボーダーライン。大変な作業ですが根本的な修正というのが最も良策です。もちろん修正時には「背景色の反転」を意識してください。となると 青系・黄色系はダメ ということになります。赤はOK。
【赤色の場合】
この文字は 10進数 rgb(255,0,0) / 16進数 #ff0000 / カラーネーム red です。
この文字は 10進数 rgb(255,0,0) / 16進数 #ff0000 / カラーネーム red です。
【青色の場合】
この文字は 10進数 rgb(0,0,255) / 16進数 #0000ff / カラーネーム blue です。
この文字は 10進数 rgb(0,0,255) / 16進数 #0000ff / カラーネーム blue です。
【黄色の場合】
この文字は 10進数 rgb(255,255,0) / 16進数 #ffff00 / カラーネーム yellow です。
この文字は 10進数 rgb(255,255,0) / 16進数 #ffff00 / カラーネーム yellow です。
修正後のカラーを決めるコツと10進数の推奨
で、テキストの色を決める際の「コツ」なんですが、私はカラーコードに 10進数 のrgb関数の方をおすすめしています。Red Green Blue の 光三原色 を基本としており、それぞれの混ざりの程度で色が決まります。絵の具と同じ。
rgbは 0〜255 までの数値で、0に近いほど暗く、255に近いほど明るくなり、真黒は rgb(0,0,0) 真白は rgb(255,255,255) そして中間は rgb(128,128,128) でつまり「灰色, #808080, Gray」です。
光三原色のうちGreenとBlueの数値の差が極端なほど反転に弱い と思ってください。青は rgb(0,0,255) ですからGreenが最小値0なのに対しBlueが最大値255です。黄色は rgb(255,255,0) ですからGreenが最大値255なのに対しBlueが最小値0。それぞれこれは「極端」な組み合わせです。
rgb関数を用いたカラーコードの場合「混ざり具合」の感覚が16進数hexコードよりも直感的ですし微調整もしやすい。そして alpha値 (アルファち, 不透明度)の設定も容易です。rgba(255,255,255,.5) 真白に不透明度0.5を追加したので透けています。
10進数が0〜255までの数値で表現するのに対し、16進数は 「0〜9の数字とa〜fのアルファベット」 の組み合わせで最初の2桁がRed次の2桁がGreen次の2桁がBlue。数字とアルファベットが混ざることで視覚的にも複雑になり、alphaの適用もできますが6桁から8桁になるのと各数値(あるいはアルファベット)間の区切りが無いので感覚的に操作しづらいように思います。なので修正するならば10進数をおすすめ。16進数の場合はカラーピッカーやカラーチャートが必須になることが多いのですが、rgbを覚えると何も無いところから自力で色をひねり出せるようになりますよ。
【比較的反転に強い色 一例】
この文字は 10進数 rgb(255,155,155) / 16進数 #ff9b9b / カラーネーム Mona Lisa です。
この文字は 10進数 rgb(255,155,155) / 16進数 #ff9b9b / カラーネーム Mona Lisa です。
この文字は 10進数 rgb(200,55,55) / 16進数 #C83737 / カラーネーム Persian Red です。
この文字は 10進数 rgb(200,55,55) / 16進数 #C83737 / カラーネーム Persian Red です。
赤は反転に強いですね。文字に色をつける場合にはなるべく赤系統を選ぶのが正解です。
修正作業
Ctrl + F キー(文字列検索)を使いこなしましょう。対象部位をすぐに特定することができます。修正したいカラーコードをキーワードに検索し、あとはマーカーで示された部位を ダブルクリック で選択(ドラッグ選択では作業効率が悪いため)、そして新しいカラーコードを ペースト。コピー状態を保持してひたすら「検索 + ダブルクリック選択 + ペースト」です。
もっと良い方法は テキストエディター(htmlエディター) を利用することです。一括置換が行えますので作業効率は大幅にUPするでしょう。
テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします
テンプレートのカスタマイズをよくしている、という方に 「HTMLエディター」 をおすすめしたいと思います。「テキストエディター」という呼び方もされます。 なんとなく上級者向けなイメージがあるかもしれませんが、寧ろ初心者の方ほど積極的に使って欲しい と思います。...
手作業での修正が困難な場合
例えば「記事数が多すぎてとてもじゃないが無理」「とにかく面倒」といった場合。というか多くの方はこちらの方法を取りたいのではないかと思います。とはいえ一番の良策は先程述べたように「根本的な修正」です、と再度前置きした上で CSSによる修正 をご紹介します。JSでやっても良いんですが、JSとCSSを比較してミスが発生しやすいのはJSです。htmlのソースコードに手を入れるよりもスタイルシートの方が比較的安全。そしてJSでの方法はどっかに書いた ←
ちょっと自分で書いた記事なのに探せない。忘れちゃった。すみません(笑)
というわけで、記事編集画面ではなくテンプレート編集(スタイルシート編集) を行います。ですから事前にテンプレートの複製を取るようにしてください。
修正したいカラーコードを特定する
まずは把握をしてください。そのためには 旧投稿画面の利用 をおすすめします。今後旧投稿画面を使うようにしろ、という意味ではないですよ。修正部位を特定するには旧投稿画面の方が都合が良いというだけです。 今回は青色 #0000ff だと過程して説明をすすめます。
FC2ブログ「旧投稿画面」で指定したカラーの場合
<span style="color:#0000FF">この文字は青色</span>
この形になっているはずです。要素は span で文字列は 大文字表記 です。
FC2ブログ「新投稿画面」で指定したカラーの場合
<font color="#0000ff">この文字は青色</font>
新〜ではこの形。要素は font です文字列は 小文字表記 です。
Yahoo!ブログ「かんたんモード」の場合
<font color="#0000ff">この文字は青色</font>
Yahoo!からデータを移している場合はこの形。font要素で 小文字表記
ヤプログ「スマートエディター」の場合
<font color="#0000ff">この文字は青色</font>
ヤプログからデータを移している場合はこの形。font要素で 小文字表記
要素名と大文字・小文字の別は重要ですからしっかり把握してください。
修正コード
span[style$="#0000FF"] { color: red !important; }
緑の部位は適切な内容に変更します。各自異なるはずです。この意味は「span要素のstyle属性の値の最終が#0000FFで終わるものは」「文字色を赤にする」です。上記を使う場合はFC2旧投稿画面のエディターで作成したものは上記コードを利用してください。
FC2新投稿画面, Yahoo!, ヤプログの場合はspan要素ではなくfont要素で小文字表記ですから
font[color="#0000ff"] { color: red !important; }
こちらです。「font要素のcolor属性の値が#0000FFのものは」「文字色を赤にする」という意味です。対象特定の方法が異なりますので必ず自身の内容と照らし合わせて適切な方法(コード)を取るようにしてください。また、大文字と小文字が混在している場合 は
span[style$="#0000FF" i] {
color: red !important;
}
font[color="#0000ff" i] {
color: red !important;
}
上記のように i を追加します。「大文字と小文字を区別しない」という意味です。
作業推奨
対象となる要素の範囲を広げない方が良いでしょう。例えば全て大文字(あるいは小文字)表記だと想定される場合には大文字・小文字の区別を失くすための i は 付けない。
そして余力があれば 記事範囲を示すセレクタを追加する ことをおすすめします。このセレクタはテンプレートによって異なりますのでここで「この通りにコピペしてください」とは言えません。自力で特定するかテンプレート製作者に尋ねるようにしてください。「「本文」「追記」に共通する親要素のクラス名あるいはアイディー名はなんですか？」と聞けば通じます。私の場合はほとんどのテンプレートが .inner-contents か #inner-contents のどちらかです。
.inner-contents span[style$="#0000FF"] {
color: red !important;
}
こうして対象範囲を狭くするとより安全です。意図しない部位まで変更されてしまう可能性を極力低くするための処置です。
記載場所
スタイルシートの 末尾 に加えてください。冒頭や中間ではなく末尾です。
まとめ
エディターのツールによるフォントカラー指定は強制力が強いのと要素を特定するためのセレクタ(class属性)が付きませんので変更が非常に困難です。
- 安易・やたらな色変更は行わない
- 変更する際には背景色が変更された際の視認性を考慮する
これは常に頭に入れておくと良いでしょう。文章というのは気分で色とりどりにしたり太くしたりするものではありません。そういう文章は正直非常に読みづらい。
最後に副情報として、フォントの色変更はfont要素ではなくspan要素で行うのが望ましい形です。font要素はhtml5では既に廃止されており「使ってはいけない」とされる要素です。ところがFC2ブログの新投稿画面はfont要素なんですね。なんで後退するねん(笑)
ということで、にっちもさっちも行かなくなった時のフォントカラー変更の仕方でした。
There are no comments yet.