サイドバーのタイトルの設定を変える＜背景画像を使うの補足＞ [/*-----Side-----*/] [/*-----Side-----*/]
前記事 サイドバーのタイトルの設定を変えるの中の ＜サイドバータイトルに背景画像を使用する＞の補足事項です。 ＜初期設定＞使う画像によっては下図のように 画像と文字が重なりますので最近のコメント・
・
・
・
最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; }padding(赤字部分)の数値を変更してください。 paddingは左から padding:上からの位置 右からの位置 下からの位置 左からの位置と なっております 【調整後】最近のコメント・
・
・
・
サイドバーのタイトルの設定を変える [/*-----Side-----*/]
【サイドバーのタイトルの設定を変える】 /*-----Side-----*/にある.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background:#c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; }この部分を追加・変更します。 ＜初期設定＞＜背景を変える＞ サイドバーのタイトルの背景色を変えるには最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; }赤字部分を変更してください ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください （上記の例では、色名「lightgreen」を使用しています。） 6ケタの数字については記事「色の設定について」の 項目をご覧ください。＜サイドバータイトルに背景画像を使用する＞最近のコメント・
・
・
・
サイドバーに背景画像を使用するには最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; }赤字部分を削除して この中で背景画像に使いたいアップロード済みの ファイルをクリックします。 するとbackground:url("/----------------") no-repeat;という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 また使用する画像によっては全体をカバーできませんので no-repeatをrepeatに変更してください。 【サイドバータイトルの文字の設定を変える】 ＜サイドバータイトルの文字を斜体にする＞サイドバーの文字を斜体にするには最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; font-style:italic; }赤字部分を追加してください。 ＜サイドバータイトルのフォントを変える＞サイドバー全体のフォントを変えるには最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; font-family:'変えたいフォント'; }赤字部分を追加してください。 上図ではフォント「メイリオ」を使用しています。 例.sidebar-title { ・ ・ ・ ・ font-family;"メイリオ"; }(コメント作成エリアにフォント「メイリオ」;を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜サイドバータイトル全体の文字の太さを変える＞サイドバータイトルの文字の太さを変えるには最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 上図では200に設定してあります。 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください。 ＜サイドバータイトルの文字の色を変える＞サイドバータイトルの文字の色を変えるには最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; }赤字部分を変更してください。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください （上記の例では、色名「lightgreen」を使用しています。） 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 【サイドバータイトルに枠線をつける】 ＜サイドバータイトルに枠線をつける＞枠線をつけるにはuryyyyyyさんNice! 32
記事 40
テーマblog
プロフィール
・
・
・
・
・
最近のコメント・
・
・
・
.sidebar-title { margin:0; padding: 2px 6px 2px 30px; background: #c87a10 url("/_common/skins/509/images/sidebar_h3_bg.gif") no-repeat left top; color: #c87a10; font-size: x-small; font-weight:normal; border:枠線の種類 枠線の太さ 枠線の色; }赤字部分を追加してください。 上図の例は border:dashed 4px red;です。 枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。
サイドバー（タイトル単位）の設定を変える [/*-----Side-----*/]
※今回もブログのレイアウトが崩れる可能性の大きい 「文字の大きさを変える」と 「サイドバーの幅を変える」には 言及しておりません。 ひとつ前の項「サイドバー(全体)の設定を変える 」と ほぼ同じ内容です。
【サイドバー（タイトル単位）の設定を変える】 サイドバー（タイトル単位）の設定を変える サイドバー（タイトル単位）の設定を変えるには /*-----Side-----*/にある.sidebar { width:202px; overflow:hidden; }この部分を追加・変更します。 サイドバー初期設定【背景を変える】 ＜サイドバー（タイトル単位）の背景色を変える＞uryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
サイドバーの背景色を変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
.sidebar { width:202px; overflow:hidden; backgroung:#------; }赤字部分を追加してください ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください （上記の例では、色名「midnightblue」を使用しています。） 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 ＜サイドバー（タイトル単位）に背景画像を使用する＞サイドバーに背景画像を使用するにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
.sidebar { width:202px; overflow:hidden; }この中で背景画像に使いたいアップロード済みの ファイルをクリックします。 するとbackground:url("/----------------") no-repeat;という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 また使用する画像によっては全体をカバーできませんので no-repeatをrepeatに変更してください。 【サイドバーの文字の設定を変える】 ＜サイドバー（タイトル単位）の文字を斜体にする＞サイドバーの文字を斜体にするにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
.sidebar { width:202px; overflow:hidden; font-style:italic; }赤字部分を追加してください。 ＜サイドバー（タイトル単位）のフォントを変える＞サイドバー全体のフォントを変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
.sidebar { width:202px; overflow:hidden; font-family:'変えたいフォント'; }赤字部分を追加してください。 上図ではフォント「メイリオ」を使用しています。 例 .sidebar { width:202px; overflow:hidden;font-family;"メイリオ"; } (コメント作成エリアにフォント「メイリオ」;を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜サイドバー(タイトル単位）の文字の太さを変える＞サイドバーの文字の太さを変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
.sidebar { width:202px; overflow:hidden; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 上図では200に設定してあります。 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください ＜サイドバーの文字の色を変える＞サイドバー（タイトル単位）の文字の色を変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
.sidebar { width:202px; overflow:hidden; color:#------; }赤字部分を変更してください ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください （上記の例では、色名「lightgreen」を使用しています。） 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 【サイドバー(タイトル単位）に枠線をつける】 ＜サイドバー（タイトル単位）に枠線をつける＞枠線をつけるには・uryyyyyyさん
記事 40
テーマblog
・
・
・
・
最近のコメント・
・
・
・
.sidebar { width:202px; overflow:hidden; border:枠線の種類 枠線の太さ 枠線の色; }赤字部分を追加してください。 上図の例は border:dashed 4px red;です。 枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。 ＜サイドバー（タイトル単位）にロールオーバーを設定する＞ サイドバー（タイトル単位）にロールオーバーを設定するにはuryyyyyyさん
記事 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ケタの数字については記事「色の設定について」の 項目をご覧ください。
サイドバー(全体)の設定を変える [/*-----Side-----*/]
【サイドバー(全体)の設定を変える】 サイドバーの設定を変えるには /*-----Side-----*/にある/*-----Side-----*/ #side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; }この部分を追加・変更します。 サイドバー初期設定【背景を変える】 ＜サイドバーの背景色を変える＞uryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
サイドバーの背景色を変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; backgroung:#------; }赤字部分を追加してください ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください （上記の例では、色名「midnightblue」を使用しています。） 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 ＜サイドバーに背景画像を使用する＞サイドバーに背景画像を使用するにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; }この中で背景画像に使いたいアップロード済みの ファイルをクリックします。 するとbackground:url("/----------------") no-repeat;という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 また使用する画像によっては全体をカバーできませんので no-repeatをrepeatに変更してください。 【サイドバーの文字の設定を変える】 ＜サイドバーの文字を斜体にする＞サイドバーの文字を斜体にするにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; font-style:italic; }赤字部分を追加してください。 ＜サイドバーのフォントを変える＞サイドバー全体のフォントを変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; font-family:'変えたいフォント'; }赤字部分を追加してください。 上図ではフォント「メイリオ」を使用しています。 例 #side-a, #side-b { ・・・・・ ・・・・・ font-family;"メイリオ"; } (コメント作成エリアにフォント「メイリオ」;を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜サイドバー全体の文字の太さを変える＞サイドバーの文字の太さを変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 上図では200に設定してあります。 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください ＜サイドバーの文字の色を変える＞サイドバーの文字の色を変えるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
#side-a, #side-b { width:202px; overflow:hidden; color:#------; }赤字部分を変更してください ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください （上記の例では、色名「lightgreen」を使用しています。） 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 【サイドバー全体に枠線をつける】 ＜サイドバー全体に枠線をつける＞枠線をつけるにはuryyyyyyさん
記事 40
テーマblog
・
・
・
・
・
最近のコメント・
・
・
・
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; border:枠線の種類 枠線の太さ 枠線の色; }赤字部分を追加してください。 上図の例は border:dashed 4px red;です。 枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。
※今回、ブログのレイアウトが崩れる可能性の大きい 「文字の大きさを変える」と 「サイドバーの幅を変える」には 言及しておりません。
