このサイト＆SeesaaブログのサイドメニューのCSSのメモ
- 2008年06月05日 at 19:15
- Comment(1)
- TrackBack(0)
- このサイトのテンプレートについて
現在、サイドメニューの装飾に変化が無いため今後増やしていこうと考えています。またインターネットエクスプローラーでサイドタイトルの背景画像が乱れることを確認しました。一番の理由は、私のサイトでJavascriptを多用しているため（ページのロードに時間がかかるため）だと思いますが、CSSの構造やインターネットの速度などいくつか要因はありそうです。
以上のようなことをふまえ、軽快にサイトを見れるように画像を使用しないデザインをいくつか追加しようと思います。また、この記事へメモしていこうと思います。なお、外出先からもコメントにてアップしていることがあります。ご了承ください。
本当にメモ程度の内容ですが、
サイドタイトルの背景に色を設定する
■.sidetitle_backgroundcolor
background-color:でサイドタイトルの背景色を変更（backgroundcolorへ色を記述）
.sidetitle_aqua {
text-align: center;
padding:2px 10px 2px 5px;
margin-top:3px;
background-color: #00ffff;
font-family:Verdana;
font-size:12px;
color: #313031;
}
サイドコンテンツのボーダーラインを表示
border-top-width：ボーダーラインの幅
border-top-style：ボーダーラインのスタイル
border-top-color：ボーダーラインのカラー
.side_line {
line-height:1.8em;
padding:8px;
margin-bottom:7px;
font-size:10px;
font-family:Verdana;
border-width: 1px;
border-style: solid;
border-color: #CFCAC5;
}
サイドタイトルの背景にボーダーラインを設定する
サイドタイトルにトップボーダーラインのみを表示
border-top-width：トップボーダーラインの幅
border-top-style：トップボーダーラインのスタイル
border-top-color：トップボーダーラインのカラー
.sidetitle_bordertop {
text-align: left;
padding:2px 10px 2px 5px;
margin-top:7px;
font-family:Verdana;
font-size:12px;
color: #313031;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #CFCAC5;
}
サイドタイトルにトップボーダーラインのみを表示した場合のサイドコンテンツ
サイドコンテンツのボーダーラインを表示しない（border-color: #ffffffで背景色と同色にしている）
.side_bordernone {
line-height:1.8em;
padding:8px;
margin-bottom:7px;
font-size:10px;
font-family:Verdana;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
}
.side_bordernone a{
font-size:12px;
text-decoration: none;
color: #0066CC;
}
サイドタイトルの背景にボーダーラインを設定する2
アドセンスやバナー広告の横幅が300pxのときに対応
.side_ads {
line-height: 1.8em;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 7px;
}
タグ：Seesaa Seesaa ブログ サイドメニュー CSS スタイルシート サイドタイトル
スポンサード リンク
【このサイトのテンプレートについての最新記事】
