サイドメニューのデザイン変更

サイドメニューのデザイン変更2
サイドメニューのデザイン変更1
2008年07月06日

サイドメニューのデザイン変更2

サイドメニュー全体に色をつけてみます。

元の状態はこんな感じです。
サイドメニューカスタマイズ前1


変更後のイメージです。
サイドメニューカスタマイズ後2



1.スタイルシートの「.sidetitle」部分を変更します。

.sidetitle{
background:url(http://parts.blog.livedoor.jp/img/usr/standard_white_2c/side_bg.gif) repeat-x;
border-top:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;

padding:10px 15px 0;
line-height:100%;
text-align:left;
font-size:12px;
font-weight:bold;
}

青字の部分は削除してください。
現在のグレーのラインを表しています。

赤字の部分は追加してください。
borderの「1px」の部分はラインの太さを表しているので、好きな太さに調整してください。
borderの「#FFA07A」の部分は好きな色に調整してください。
backgroundの「#FFE9D3」もお好みに合わせて調整してください。

2.スタイルシートの「.side」部分を変更します。

.side{
border-bottom:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;

margin-bottom:25px;
padding:10px 15px 0;
text-align:center;
line-height:135%;
font-size:12px;
}

赤字の部分を追加してください。
ラインの太さや色などは、お好みに合わせて調整してください。

3.カレンダーを使用している場合は、「.calendarhead」と「.calbody」も同じように変更してください。

background:url(http://parts.blog.livedoor.jp/img/usr/standard_white_2c/side_bg.gif) repeat-x;
border-top:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;

padding:10px 15px 0;
line-height:100%;
text-align:center;
font-size:12px;
font-weight:bold;
}



.calbody{
border-bottom:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;
margin-bottom:25px;

padding:10px 0;
text-align:center;

}

青字の部分は削除してください。
赤字の部分は追加してください。
カレンダーの変更点にだけ、「margin-bottom」が追加されているので注意してください。
これがないと、下のプラグインとつながってしまいます。
「25px」の部分は調整してください。


4.保存して再構築を行います。


この記事が参考になった方はランキングの応援お願いします!
人気ブログランキングへ
customize_blog at 17:02コメント(0)トラックバック(0) | Edit 

サイドメニューのデザイン変更1

サイドメニューのタイトル部分のラインを変更します。

元の状態はこんな感じです。
サイドメニューカスタマイズ前1


変更後のイメージです。
サイドメニューカスタマイズ後1

1.スタイルシートの「.sidetitle」部分を変更します。

.sidetitle{
background:url(http://parts.blog.livedoor.jp/img/usr/standard_white_2c/side_bg.gif) repeat-x;
border-top:2px solid #3366FF;
padding:10px 15px 0;
line-height:100%;
text-align:left;
font-size:12px;
font-weight:bold;
}

青字の部分は削除してください。
現在のグレーのラインを表しています。

赤字の部分は追加してください。
「2px」の部分はラインの太さを表しているので、好きな太さに変更してください。
「#3366FF」の部分は好きな色に変更してください。


2.カレンダーを使用している場合は、「.calendarhead」も同じように変更してください。

.calendarhead{
background:url(http://parts.blog.livedoor.jp/img/usr/standard_white_2c/side_bg.gif) repeat-x;
border-top:2px solid #3366FF;
padding:10px 15px 0;
line-height:100%;
text-align:center;
font-size:12px;
font-weight:bold;
}

青字の部分は削除してください。
赤字の部分は追加してください。


3.保存して再構築を行います。



この記事が参考になった方はランキングの応援お願いします!
人気ブログランキングへ
customize_blog at 16:26コメント(0)トラックバック(0) | Edit 
記事検索
このブログはリンクフリーです。
以下のテキストエリアの中のHTMLを貼り付けると簡単です♪
Archives
Recent Comments
訪問者数
  • 今日:
  • 昨日:
  • 累計:

TagCloud
QRコード
QRコード
  • ライブドアブログ