CSSファイルをいじって遊んでいます。
テンプレの行間設定の記事において、gooブログが用意するテンプレは行間設定がされていないことを書きました。
goo ブログテンプレート アップデート情報：2004/10/8 ノーリーフ/リプサリス/コンシネレインボーによると、
エントリー記事フォントサイズ・行間の変更
その他テンプレートも「etBody」によるクラス設定に順次アップデート予定
とのことですから、いずれは読みやすいデザインに改正されるのでしょうし、決して他のユーザーさんが使えないCSSを作ってみたところで、何の役にも立たないのですけど。
CSSをいじってみよう、と最初に思ったのは、
空テンプレの背景色と文字色のバランスが悪いなぁ、と感じたからです。ちょっと古くなったCRTモニタでは、何が書いてあるかわからない人もいるんじゃないでしょうか？
ちなみに、このブログを空テンプレにしてみると、こうなります。
うわっ、このさわやか感が物凄く似合ってないですね！
最新モデルのパソコンや、モニタにお金をかけている人ならそうでもないのかもしれませんが、この色のバランスは、多くの読み手にとっては激しく読みにくいものだと思います。
そこでこの空テンプレから、画像を一切なくし、文字も黒にして、メタルテンプレ風に化けさせてみましょう。
どうですか？ これなら多少色がぼやけてしまうモニタでも、快適に読めることと思います。なかなか良いと思いません？
空テンプレを使っている人に「テンプレ読みにくいから変えて」というのは、オレイズムの押し付けです。僕は自分のブログないでは「空テンプレ、激しく読みにくい！」と言い切りますが、使っている人のところへ行ってまで言おうとは思いません。何故なら僕にはこのローカル用CSSファイルがあるからです。
タブブラウザの中には、カンタンに、自分の好みのスタイルシートを使って閲覧中のサイトを表示させる機能が備わっているものがあり、僕はそれを使っているので、多少読みにくいテンプレでもそんなに苦がなく閲覧できるのです。
ところが、世の中そんなに甘くない。
実はこのメタル風に変更するCSS、メタル兄弟以外のテンプレ使用ブログにあてると、表示がおかしくなるのです。いや、きっと回避する方法もあるのでしょうが、下手の横好きの僕には、ちょっと難しい…
どうなるかというと、
みどりクローバーにあてたものが、これ。
そう、行間設定が生かされていませんね。これじゃあ使う意味が無い。そんなわけで、もっと汎用性が高いものを作ってみることに。
反映させたいのは、記事本文の文字サイズと、行間設定。それにフォント色。見た目のデザインまでいじるとなると、CSSとは別途に存在するらしい、デザイン用のHTMLファイルまで手を出さなくてはいけないみたいです。
そんなわけで苦心の末作り出したのが、これです。
画像はメタルテンプレを使用して表示しているものにオリジナルCSSをあてたものです。
サイドバーの文字のバランスがちょっと悪いですけど、本文はなかなか読みやすいですよね？
白背景にグレーの文字、文字を一回り程度大きくしています。行間設定は185％。このCSSファイルは、メタル兄弟以外のテンプレにも有効です。
みどりクローバーにあてたものがこれです。
どうです？
読みやすいでしょ？
文中の青い文字は「リンク済み」の色です。
家具テンプレのソファにあてると
こんな感じ。
悪くないでしょ？
残念なのは、サイドバーにある「Recent Entry」とか「Recent Comment」の文字の大きさを、スタイルシートで変更する方法が思いつかなかったこと。表示しているブログのソースを見ても、この部分にスタイルの要素があてられていることはなさそうで、どうやらこの部分のデザインを決めているのはHTMLファイルみたいです。
……と、知ったかぶりをしてますけど、たぶん間違ったレクチャーなので、鵜呑みにしないように。
続く。
・・・・・・・・かも。
