Templates for SLMaMe

前回の記事で再び「いよいよ次回から、テンプレートのカスタマイズを始めます」と書いたのですが･･･。

デフォルトテンプレート「シンプルグレイ」（幅100%ではない方）の CSS をエディタにコピペしたら、驚いた。

まず目立つのはソースの見にくさ。管理画面から見やすいように整形したらこうなった、ってことですか？

そんなことよりも冒頭部分、どうやら「シンプルグリーン」と「シンプルグレイ」の CSS が混ざってるっぽい。まだ CSS の全文を細かく確認していませんが、文字コード指定から全称セレクタ（*）のフォントファミリー指定まで、が２回繰り返されている。

以下のソースは、水平 Tab で調整されていた箇所のみ修正した「シンプルグレイ」の CSS 冒頭部分です。

@charset "UTF-8";



/*simple_green

   back_obj: #389B64;画像と同じ色

   line: #003333;テーブルデコレーション色

   back_bg: #E0EDE0;bodyバック色

   link_txt: #006633;フォント色

   url: /_img/simple_green/head.gif;画像

*/



* {

   font-family: "verdana","helvetica","osaka","ＭＳ Ｐゴシック",ans-serif;

}



@charset "UTF-8";



/*simple_gray

   back_obj: #787878;画像と同じ色

   line: #484848;テーブルデコレーション色

   back_bg: #E0E0E0;bodyバック色

   link_txt: #4B4B4B;フォント色

   url: /_img/simple_gray/head.gif;画像

*/



* {

   font-family: "verdana","helvetica","osaka","ＭＳ Ｐゴシック",ans-serif;

}

冒頭のコメントも、ユーザーに何をお知らせしたいのか理解できません。ちょっと不親切な書き方じゃないかなぁと思います。いっそ無い方がいいんじゃないか、これ。

重複している全称セレクタ（*）のフォントファミリー指定も、最後の「sans-serif」が「ans-serif」になっていて、効いていませんよ。えぇ、２つとも。もしかすると、他のデフォルトテンプレートもこうなっているかもしれません･･･。

しょっぱなから、何かゲンナリした･･･。

（2009.02.18 22:33 追記）
今、CSS を整形していますが、こんなの見つけた。

.message{



｝

閉じタグが全角！
これじゃあ、この後に追加した CSS が効かないはずだわ･･･　orz

（2009.02.18 22:51 追記）
どうも全体的に CSS が重複しているようです。CSS では基本的に、後に指定された CSS を採用するので、ブログの見た目には出てこなかったんだろうと思います。

（2009.02.18 23:13 追記）「sans-serif」の部分を分かりやすく説明すると、「閲覧者の PC にあるフォントの中からゴシック体を選ぶ」と指示していることになります。
その前に指定してる「ＭＳ　Ｐゴシック」などは、「閲覧者の PC にMS Pゴシックがあれば、優先させる」てな感じで指定しているわけです。
MS Pゴシックが無い場合は、その後に指定している「sans-serif」によって他のゴシック体を自動的に選び、表示するようになっているので、結構大切だったりします。

次の記事で、重複していた部分についてご説明します。また、私が修正＆整形した CSS を公開しておきます。（2009.02.19 1:44 訂正：やはりソラマメ側のテンプレート修正を待った方が良いかも･･･と、考え直しました）

（2009.02.19 20:33 追記）
ソラマメのサポートセンターから返信がありました。デフォルトテンプレート「シンプルグレイ」（100％ではない方）のスタイルシートが修正されたそうです。その他のテンプレートも順次見直してくださるそうです。