サイドバー（タイトル単位）の設定を変える

※今回もブログのレイアウトが崩れる可能性の大きい
「文字の大きさを変える」と
「サイドバーの幅を変える」には
言及しておりません。
ひとつ前の項「サイドバー(全体)の設定を変える 」と
ほぼ同じ内容です。


【サイドバー（タイトル単位）の設定を変える】
サイドバー（タイトル単位）の設定を変える
サイドバー（タイトル単位）の設定を変えるには
/*-----Side-----*/にある

.sidebar {
width:202px;
overflow:hidden;
}
この部分を追加・変更します。

サイドバー初期設定


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント
・

・

・

・




【背景を変える】
＜サイドバー（タイトル単位）の背景色を変える＞


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント
・

・

・

・




サイドバーの背景色を変えるには

.sidebar {
width:202px;
overflow:hidden;
backgroung:#------;
}
赤字部分を追加してください
＃------部分にお好みの数字
または色名(色の場合は＃不要)を指定ください
（上記の例では、色名「midnightblue」を使用しています。）
6ケタの数字については記事「色の設定について」の
項目をご覧ください。


＜サイドバー（タイトル単位）に背景画像を使用する＞


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント
・

・

・

・


サイドバーに背景画像を使用するには

.sidebar {
width:202px;
overflow:hidden;
}
この中で背景画像に使いたいアップロード済みの
ファイルをクリックします。
するとbackground:url("/----------------") no-repeat;という記述になります。
背景にする画像は透明度の高いものを
使った方が、文字が見えにくくならず便利です。
また使用する画像によっては全体をカバーできませんので
no-repeatをrepeatに変更してください。


【サイドバーの文字の設定を変える】
＜サイドバー（タイトル単位）の文字を斜体にする＞


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント
・

・

・

・


サイドバーの文字を斜体にするには

.sidebar {
width:202px;
overflow:hidden;
font-style:italic;
}
赤字部分を追加してください。


＜サイドバー（タイトル単位）のフォントを変える＞


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント
・

・

・

・


サイドバー全体のフォントを変えるには

.sidebar {
width:202px;
overflow:hidden;
font-family:'変えたいフォント';
}
赤字部分を追加してください。
上図ではフォント「メイリオ」を使用しています。
例
.sidebar {
width:202px;
overflow:hidden;font-family;"メイリオ";
}

(コメント作成エリアにフォント「メイリオ」;を適用)
フォント名が分からない時は
エクセルやワードからコピーして下さい。
（全角空白とか紛らわしいものがあるので
手打ちはやめた方がいいです。）

見る側のパソコンにインストールされていない
フォントは無視されますのでご注意ください。


＜サイドバー(タイトル単位）の文字の太さを変える＞


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント
・

・

・

・


サイドバーの文字の太さを変えるには

.sidebar {
width:202px;
overflow:hidden;
font-weight:★;
}
ここに赤字部分を記述して下さい。
★＝100～900までの数(100単位)
上図では200に設定してあります。

400がnormal,700がbold
詳しくは記事「フォント１」をご覧ください


＜サイドバーの文字の色を変える＞


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント
・

・

・

・


サイドバー（タイトル単位）の文字の色を変えるには

.sidebar {
width:202px;
overflow:hidden;
color:#------;
}
赤字部分を変更してください
＃------部分にお好みの数字
または色名(色の場合は＃不要)を指定ください
（上記の例では、色名「lightgreen」を使用しています。）
6ケタの数字については記事「色の設定について」の
項目をご覧ください。


【サイドバー(タイトル単位）に枠線をつける】
＜サイドバー（タイトル単位）に枠線をつける＞



uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール


・

・

・

・

・


最近のコメント
・

・

・

・



枠線をつけるには


.sidebar {
width:202px;
overflow:hidden;
border:枠線の種類　枠線の太さ　枠線の色;
}
赤字部分を追加してください。
上図の例は
border:dashed 4px red;です。

枠線のタイプ・色・太さの間には
半角スペースが入ります。
詳しいボーダーの種類については
記事「ボーダー1」「ボーダー2」を
ご覧ください。


＜サイドバー（タイトル単位）にロールオーバーを設定する＞
サイドバー（タイトル単位）にロールオーバーを設定するには


uryyyyyyさん


Nice!　32

記事　 40

テーマblog

プロフィール

・

・

・

・

・

最近のコメント

・無駄無駄無駄無駄

・そして時は動き出す

・裁くのはオレのスタンドだ


・初期設定のロールオーバー


.sidebar {
width:202px;
overflow:hidden;
}
この外側の部分に

.sidebar  a:link{text-decoration:none:color:#------}
.sidebar  a:visited{text-decoration:none:color:#------}
.sidebar  a:active{text-decoration:none:color:#------}
.sidebar  a:hover{text-decoration:none:color:#------
上記のように記述してください
＃------部分にお好みの数字
または色名(色の場合は＃不要)を指定ください
（上記の例では、色名「silver」を使用しています。）
6ケタの数字については記事「色の設定について」の
項目をご覧ください。

タグ：CSS so-net カズタマイズ ブログ サイドバー