css改造の参考に。

ボクの技術ではこのぐらいがやっとです。でもまあ、初心者よりは良いかも。と云うわけで...

入ってるブログサービスは「はてな」です。
この間までは、「はてなダイアリー」で日記を書いてました。

〝pastel-liquid.css〟と云う、id:KAZUMiXさんが作って公式採用されたデザイン
その上に、〝ピンクの枠で囲む〟id:rie-choさんの改造。
さらにその上にボクの改造で。
こんな感じに。
http://d.hatena.ne.jp/t_aki+old/

今回は、reportnaturalテーマの改造です。

今現在ベータ版で、デザインテンプレートも8コのみ。でもボクは改造するから問題無し。
naturalテーマの色合いが気に入ったので、タイトルとかを一部流用してます。

書き忘れてました。

ここで書いてる改造は、
ブログサービス側の....システム側の文字コードutf-8utf-16以上。
そして、すべて現行及び次期採用のcss3です。
まだブラウザに正式に対応してない命令はベンダープレフィックスで書いてます。

ベンダープレフィックス

命令  ブラウザ
 -webkit- サファリ
 -ms-   IE
 -moz-  firefoxとかモジラ
 -o-    オペラ

例えば...
 -webkit-text-emphasis-style: "☆" ;
 -ms-text-emphasis-style: "☆" ;
 -moz-text-emphasis-style: "☆" ;
 -o-text-emphasis-style: "☆" ;

全部同じ命令ですが、ブラウザごとに指定してます。

まずは、サイズの変更。

「画面サイズ固定」って気に入らないです。大きい画面の人は大きくと、自由にしちゃって良いと思うので制限を外しました。
ダイアリーからの移転の時は、cssはダイアリー側だとリダイレクトされちゃうので、別サイトとか、または別ダイアリーを作ってそこのルートでアクセスするべし。

例えば、ボクの移転前のダイアリーはhttp://d.hatena.ne.jp/ボクの名前//
css格納先は、 http://d.hatena.ne.jp/ボクの名前/files
ここへのアクセスの、本来の読み方は、http://d.hatena.ne.jp/ボクの名前/files/report-custom.css?d=y

cssを読む(インポートさせる)には
@import "http://d.hatena.ne.jp/ボクの名前+別ダイアリーの名前/files/natural-custom.css?d=y";

実際にブログのcss書き込み欄に書く時は、こんな書き方です。
@import "http://d.hatena.ne.jp/t_aki+old/files/natural-custom.css?d=y";

使ってるのはreportテーマだけど、ついでにnaturalテーマの制限の外し方を。
時々変わります。reportテーマかnaturalテーマで、

naturalテーマの、サイズ解除
#container {
/*
 ブラウザ画面に対する表示領域の大きさ。
width: 80%がベスト。
*/
  width: 80%;
}

#main {
/* #container内、記事本文。*/
 width: 90%; 
  margin: 10 ;
  left: 30px;
}
reportテーマの、サイズ解除
#container {
/* 表示領域全体 */
  width: 95%;
}

#wrapper {
/* 記事本文 */
width: 70%;
padding-left: 1em;
padding-right: 1em;
}

ついでに改造。

em { 
/* 強調表示に、☆の傍点を付ける */
font-weight: inherit;
font-style: normal;
-webkit-text-emphasis-style: "☆" ;
-ms-text-emphasis-style: "☆" ;
-moz-text-emphasis-style: "☆" ;
-o-text-emphasis-style: "☆" ;
}

strong {
/* さらに強調する時。下線とか、前後を☆で挟んだり。 */
font-weight: inherit;
font-style: normal;
border-bottom: double blue ;  
}
strong:before {	color: blue; content:" ☆ ";} strong:after { 	color: blue; content:" ☆ ";} 

/* 訂正記事は、赤っぽい色で。ついでに、前に (訂正)って付ける。 */
s {text-decoration: line-through;  color: #cf7ace ; }
s:before {color: #af9ee9; content:"(訂正)" ;} 

他にも色々いじってますが、この辺がお気に入りかな。

cssを弄れるブログの人、皆さんも改造をお薦めします!

ところで、

テーマのデフォルトでは、font-size: 15px; なんですが...
窓をデフォルトのサイズにした時の全体に対する文字サイズが15pxという意図だと解釈。一般的なブラウザのデフォルト設定は16pxらしいです。だから、font-size: 95%;で、画面に対する文字のサイズは、デザイン的にオッケー。でも...font-size: 15px;と云うのは、画面をどのサイズにした時でも、15pxを維持するとも取れるわけで....

font-size: 15px;は小さすぎる?もう少し大きいサイズで固定させた方が良いのかなぁ...

しかし、見る本人が拡大縮小させるべきだとも思うし。悩むなぁ...
とりあえず、デフォルトのままで良いや。