スタイルシートに着手

本家のホームページ　特に「噴水」と連動したデザインにしたかったのですが　ようやくココログの使い勝手がわかってきたので　いじってみることにしました　　

こちらを見ながら　まず　変更のベースになるCSSを用意　　
　≫詞織: 自作スタイルシートの適用　　

ココログのファイルのアップロードは１２月のメンテで方法が変わり　デザインが仕上るまでに何度もアップと確認を繰り返すとしたら　とても不便そうなので　ホームページにアップすることにしました　　
それから　CSSを呼び出す記述は　サイドバーに入れました　　

ベースのスタイルシートのどこをいじればいいかは　こちらを参照すると　簡単に見つけられます　　
　≫詞織: 「詞織」ノート：ノート０２　　

あとは「とほほのスタイルシート入門」辺りを参考にして　書き換えていくだけです　　

０１．背景色を「噴水」と同色にする　　
　body　＞background-color　　
０２．リンクの下線を非表示にする　　
　a　＞text-decoration　　
０３．リンク（訪問後）の色が　薄い灰色で見づらい　　
　a:visited　＞color　　

表示がおかしくなったり気に入らなかったりした場合に　やり直しがし易いよう　１ヶ所修正するごとにアップして確認していますが．．．　　
今のところ　気になっているのは　２点　　
ａ．一瞬お仕着せのテンプレートで表示されてしまう　＜止むを得まい　　
ｂ．時折　シーサーから引っ張ってきてるモスクワの天気が予報バナーのほうに表示される　　ソースを見ると　ちゃんとなってるのに．．．　＜謎　　

01/11追記　　
０４．ＢｌｏｇＰｅｔの脇にぽちっと表示される■を消すために　サイドバーに直書きしていた画像の枠線を消す為のスタイルを移動　　
　.sidebar img　＞border　　
０５．バナーに背景画像とサイズ変更　　
　#banner　＞background-image　／　＞height　　
０６．全体の表示幅とサイドバーの幅の変更　　
　#container　＞width　／　#left　＞width　　

こちらを参照しつつ．．．　　
　≫詞織: 記事タイトルとアイコン　　

０７．サイドバーのタイトルに背景画像を入れ文字色変更　　
　.sidebar h2　＞background-image　／　＞color　　

01/12追記　　
０８．記事のタイトルの文字色変更と上枠線表示　　
　.content h3　＞color　／　＞border-top　　
０９．記事のフッターの文字色変更と上下枠線の色など　　
　.content p.posted　＞color　／　＞border-top　／　＞border-bottom　　

こちらを参考にして取り入れていたサイドバー折り畳みのデザイン　　
　≫facet-divers: サイドバー折り畳み２：状態保持機能付き　　
　≫むいむい星人の寝言: サイドバー折り畳みボタンの色変え　　

１０．サイドバーに直書きしていたボタンのスタイル部分を移動して　色も変更　　
　.sidebar h2.folded button　／　.sidebar h2.unfolded button　
　＞background　／　＞color　／　＞border　　

こちらを参照しつつ．．．　　
　≫詞織: 引用する　　

１１．記事の引用部分のスタイルを変更　　
　.content blockquote　＞border　／　＞background-color　　

01/13追記　　
１２．固定リンクで表示した時の「トラックバック」や「コメント」の文字色と上枠線　　
　.content h2　＞color　／　＞border-top　　
１３．画像をアップロードするごとに付記されるスタイルを削除して　一括指定　　
　.content img　＞border　／　＞margin　／　＞float　　

01/30追記　　
折り畳んでいるリストを開いた時に　最後の行と次のリストのタイトルがくっついて表示される点　ずっと気にはなっていたのですが　どうしたらいいのかわからず　放置しておりました(^^;)　　
こちらのfumiさんが＜h2＞のデザイン変更で対処されていたので　参考にさせて頂こうと思ったら　サイドバー折り畳みの考案者facetさんからのコメントで　あっさり解決できてしまいました　　
　≫ordinary life: サイドバー折り畳み　　

１４．サイドバー折り畳みで　複数のリスト（のタイトル）の間を離す　　
　.sidebar h2.folded　＞margin-bottom　　

02/01追記　　
折り畳んでいるリストを開いた時に　最後の行と次のリストのタイトルがくっついて表示される原因は　他にあることが判明　＞コメント参照　　

02/12追記　　
ココログから用意されている（IDが設定されている）コンテンツには　それぞれにアイコンを設定できるが　自分で作成したリストにはムリっぽい　　
１５．最近のコメントと最近のトラックバックにアイコンを付ける　　少しだけ補足　＞コメント参照　　
　#recent-comment li　／　#recent-trackback li　＞list-style　　

09/13追記　　
これまでに　ちょこちょこといじったところを　まとめておきます　　
１６．バナーのブログタイトルの文字色とカーソルを乗せた時の背景色など　　
　#banner a　＞color　　
　#banner a:hover　＞color　／　＞background-color　　
１７．記事内のリストのスタイルを変更　　
　.content ul　／　.content li　　

使ってみたいカスタマイズ用スクリプトの設置場所が右サイドバー限定　　なので　３列のテンプレートに変更した　　他のコンテンツは置かない積りなので　幅をせまーーーーくして　これまでの２列のテンプレートと同様に見えるよう設定　　
１８．センター幅（右余白）から10px減らし　右サイドを幅10px（左右余白0px）に　　
　#center　＞width　／　.content　＞padding　　
　#right　＞width　／　#right .sidebar　＞padding　　
１９．右サイドバーのタイトルデザインを真っ白に変更　　
　#right .sidebar h2　
　＞background-color　／　＞background-image　／　＞color　／　＞border　　

10/19追記　　
コメントフォームの内容の幅が狭いので広げようと思ったんだけど　デフォルトのスタイルシート（textarea [id="comment-text"] {width: 80%;}）で調整しても　ネスケ７には有効なのにＩＥ６に効かないΣ(ﾟoﾟ )えぇ！？　　ネスケに無効なのも腹立たしいが　ＩＥに無効ってのもおばか過ぎやしないか？　　というわけで　試行錯誤の末　ようやく有効な設定を発見　　
２０．コメントフォームの幅　　
　#comment-text-field textarea　＞width　　

11/03追記　　
ずっと懸案だったフォントサイズを　割合（％）指定にして　少し大きくしました　　ネスケ７で見ると画像がある記事のレイアウトが崩れてますが　ＩＥ６では画像の有無に関わらず元から崩れているだろうし　特に修正はしません　　

2006/09/05追記　　
３月のバージョンアップで　ベーシックでもＣＳＳをカスタマイズできるようになっている（リッチテンプレートは除く）ので　ＣＳＳファイルを自作しサイドバーに貼りつける必要はなくなっていますが　覚え書きとして残してあります　　

これまでに修正したところ　　
０４．ＢｌｏｇＰｅｔに　idを設定したので　書き換え　　
　.sidebar #id img　＞border　　
１８．１９．左右のサイドバーを入れ替えたので　書き換え　　

ウチの通信環境はこちらの風柳さんと同じくナローバンドだし　何よりカテゴリーやBookmarksが多いので　遅延対策は施してあるのだけど　折り畳みスクリプトを読み切るまでの時間が　掛かる　掛かる．．．　　
　≫風柳亭 - 別館：書庫のある庵 -: サイドバー折り畳み２：折り畳み過程を非表示に　　

参考にして　少し手を加えて　使ってみた　　
２１．右サイドバーの読み込みスピードをアップさせる為に　一旦非表示にして　最後に表示させる　　
　#right .sidebar .module-body ul　＞display