あまりカスタマイズする部分はないのだけれど、手編み研究室の段落の背景を統一した。
ヘッダーの画像と、コンテナ（一番外側の段落）の背景、コンテンツ（記事の段段落）の背景の３つを、薄いベージュで少しザラっとした感じの紙やすりに。
サイドメニューの見出しは、ハートからアヒルに(^^;
大段落の背景は次の部分。ディフォルトでは白になっている。
#container-inner,
#content {
/*background-color: #fff;*/
background-image: url(container.gif);
background-repeat: repeat-y;
}
記事の行間隔を少し変えた。
段落内の行間が狭く、段落後の余白が広かったので、少しバランスを変更した。
ディフォルトでは、段落間の空き全て、0.75emになっていたので、p段落の空きを0.5emにし、行間隔を150％とした。（Blorg.css)
p:{
margin-bottom: .5em;
}
小粋空間からお借りした折りたたみ用のJavascriptは、とっても便利で、すっかり気に入ってしまった。「手編み研究室」ブログで、折りたたみマークをもう少し派手にした。.
CSSの中を少しいじらせていただいた。だんだんと欲が出てくる？(^^;
subcategories a.foldmark {
font-size:10px; /* マークのフォントサイズ */
text-decoration: none; /* マーク装飾 */
color: #FF00FF;
}
記事と記事の間にラインがないので、なんとなく間が抜けた感がある。
そこでアウトドアページで作ったタイトルスタイルを使うことにした。
タイトルの上下に細い線を引き、先頭に小さな画像をあしらうというもの。
asset-name というスタイルの中を次のように入れ替えた
font-size: 14pt;
font-weight: bold;
padding: 4px 0px 4px 15px;
border-top: 1px solid #009966;
border-bottom: 1px dotted #666666;
border-right-style: none;
border-left-style: none;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: left center;
width: 90%;
clear: both;
サイドメニューをツリー可した。
コメントリストのほうは、小粋空間の解説で「Javascriptを使わない方法」という項目を試してみた。
3.2までは、maketree.jsというJavascriptを借りて設定していた。
新たにチャレンジしたのが、カテゴリリストの折りたたみだ。
外側のリストと内側のリストで、異なる画像を配置することができた。
これも小粋空間の解説による。本当に助かるサイトだ。
今のところは、質問に行かなくてもなんとか出来ているので助かる。そんなに難しいことはやりたくないし(^^;
カテゴリリスト部分のスタイルは下記の通り。
上側は変更のみ。下側は自分で新たに追加したスタイル
/*■カテゴリ用 リストの外側*/
.side #categories li {
margin-top: 0px;
margin-bottom: 0px;
background-repeat: no-repeat;
background-position: left center;
list-style: square url(arrow.gif);
}
/*■カテゴリ用 リストの内側*/
.side #categories li li {
background-image: none;
background-repeat: no-repeat;
list-style: square url(tree_end.gif);
CSSは変えずに、中身の画像だけを入れ替えた。
ヘッダーと全体背景とコンテナの背景3つを、自作画像と入れ替え
コンテナの背景は .layout-twt #content-inner を変更。ちなみにｔｗｔは、小大小のデザインを指す
全体の背景は、bodyのプロパティ background-image: url(body.gif); の部分
画像名は変えずに中身だけ取り替えた
ヘッダーの画像は #header のプロパティ 次の箇所。これも中身だけの変更
background: #b3c9e3 url(header.png) no-repeat bottom left;
最近のコメント