ボクの技術ではこのぐらいがやっとです。でもまあ、初心者よりは良いかも。と云うわけで...
入ってるブログサービスは「はてな」です。
この間までは、「はてなダイアリー」で日記を書いてました。
〝pastel-liquid.css〟と云う、id:KAZUMiXさんが作って公式採用されたデザイン
その上に、〝ピンクの枠で囲む〟id:rie-choさんの改造。
さらにその上にボクの改造で。
こんな感じに。
http://d.hatena.ne.jp/t_aki+old/
今回は、reportnaturalテーマの改造です。
今現在ベータ版で、デザインテンプレートも8コのみ。でもボクは改造するから問題無し。
naturalテーマの色合いが気に入ったので、タイトルとかを一部流用してます。
書き忘れてました。
ここで書いてる改造は、
ブログサービス側の....システム側の文字コードがutf-8かutf-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=ycssを読む(インポートさせる)には
@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;は小さすぎる?もう少し大きいサイズで固定させた方が良いのかなぁ...
しかし、見る本人が拡大縮小させるべきだとも思うし。悩むなぁ...
とりあえず、デフォルトのままで良いや。