SSブログ
前の10件 | -

サイドバーのタイトルの設定を変える<背景画像を使うの補足> [/*-----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 詳しくは記事「フォント1」をご覧ください。 <サイドバータイトルの文字の色を変える>
最近のコメント




サイドバータイトルの文字の色を変えるには
.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さん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




枠線をつけるには
.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さん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




【背景を変える】 <サイドバー(タイトル単位)の背景色を変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーの背景色を変えるには
.sidebar { width:202px; overflow:hidden; backgroung:#------; }
赤字部分を追加してください #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「midnightblue」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 <サイドバー(タイトル単位)に背景画像を使用する>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーに背景画像を使用するには
.sidebar { width:202px; overflow:hidden; }
この中で背景画像に使いたいアップロード済みの ファイルをクリックします。 するとbackground:url("/----------------") no-repeat;という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 また使用する画像によっては全体をカバーできませんので no-repeatをrepeatに変更してください。 【サイドバーの文字の設定を変える】 <サイドバー(タイトル単位)の文字を斜体にする>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーの文字を斜体にするには
.sidebar { width:202px; overflow:hidden; font-style:italic; }
赤字部分を追加してください。 <サイドバー(タイトル単位)のフォントを変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバー全体のフォントを変えるには
.sidebar { width:202px; overflow:hidden; font-family:'変えたいフォント'; }
赤字部分を追加してください。 上図ではフォント「メイリオ」を使用しています。 例 .sidebar { width:202px; overflow:hidden;font-family;"メイリオ"; } (コメント作成エリアにフォント「メイリオ」;を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 <サイドバー(タイトル単位)の文字の太さを変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーの文字の太さを変えるには
.sidebar { width:202px; overflow:hidden; font-weight:★; }
ここに赤字部分を記述して下さい。 ★=100~900までの数(100単位) 上図では200に設定してあります。 400がnormal,700がbold 詳しくは記事「フォント1」をご覧ください <サイドバーの文字の色を変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバー(タイトル単位)の文字の色を変えるには
.sidebar { width:202px; overflow:hidden; color:#------; }
赤字部分を変更してください #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「lightgreen」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 【サイドバー(タイトル単位)に枠線をつける】 <サイドバー(タイトル単位)に枠線をつける>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




枠線をつけるには
.sidebar { width:202px; overflow:hidden; border:枠線の種類 枠線の太さ 枠線の色; }
赤字部分を追加してください。 上図の例は border:dashed 4px red;です。 枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。 <サイドバー(タイトル単位)にロールオーバーを設定する> サイドバー(タイトル単位)にロールオーバーを設定するには
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント
無駄無駄無駄無駄
そして時は動き出す
裁くのはオレのスタンドだ
初期設定のロールオーバー
.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さん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




【背景を変える】 <サイドバーの背景色を変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーの背景色を変えるには
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; backgroung:#------; }
赤字部分を追加してください #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「midnightblue」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 <サイドバーに背景画像を使用する>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーに背景画像を使用するには
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; }
この中で背景画像に使いたいアップロード済みの ファイルをクリックします。 するとbackground:url("/----------------") no-repeat;という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 また使用する画像によっては全体をカバーできませんので no-repeatをrepeatに変更してください。 【サイドバーの文字の設定を変える】 <サイドバーの文字を斜体にする>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーの文字を斜体にするには
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; font-style:italic; }
赤字部分を追加してください。 <サイドバーのフォントを変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバー全体のフォントを変えるには
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; font-family:'変えたいフォント'; }
赤字部分を追加してください。 上図ではフォント「メイリオ」を使用しています。 例 #side-a, #side-b { ・・・・・ ・・・・・ font-family;"メイリオ"; } (コメント作成エリアにフォント「メイリオ」;を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 <サイドバー全体の文字の太さを変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーの文字の太さを変えるには
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; font-weight:★; }
ここに赤字部分を記述して下さい。 ★=100~900までの数(100単位) 上図では200に設定してあります。 400がnormal,700がbold 詳しくは記事「フォント1」をご覧ください <サイドバーの文字の色を変える>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




サイドバーの文字の色を変えるには
#side-a, #side-b { width:202px; overflow:hidden; color:#------; }
赤字部分を変更してください #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「lightgreen」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 【サイドバー全体に枠線をつける】 <サイドバー全体に枠線をつける>
uryyyyyyさん
gogogogogo2.jpg Nice! 32
記事  40
テーマblog
arrowR_small.gifプロフィール





最近のコメント




枠線をつけるには
#side-a, #side-b { width:202px; color:#ffffff; overflow:hidden; border:枠線の種類 枠線の太さ 枠線の色; }
赤字部分を追加してください。 上図の例は border:dashed 4px red;です。 枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。
※今回、ブログのレイアウトが崩れる可能性の大きい 「文字の大きさを変える」「サイドバーの幅を変える」には 言及しておりません。

コメント作成エリアの設定を変える [/*-----Entry-----*/]

<コメント作成エリアの設定を変える>
コメント作成エリアの設定を変えるには
/*-----Entry-----*/の
/* Comment Write */にある
#comment-write textarea { height:150px; }
この部分を追加・変更します。 <初期設定>
コメントを書く
お名前: uryyyyyy
コメント:
<①コメント作成エリアに背景色をつける>
コメントを書く
お名前: uryyyyyy
コメント:
コメント作成エリアに背景色をつけるには
#comment-write textarea { height:150px; backgroung:#------; }
赤字部分を追加してください #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「blue」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 <②コメント作成エリアに背景画像を挿入する>
コメントを書く
お名前: uryyyyyy
コメント:
コメント作成エリアに背景画像を使うには
#comment-write textarea { height:150px; }
この中で背景画像に使いたいアップロード済みの ファイルをクリックします。 するとbackground:url("/----------------") no-repeat;という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 また使用する画像によっては全体をカバーできませんので no-repeatをrepeatに変更してください。 arrowR_small.gifアドバイス 画像をワンポイントで使いたい方もいるかと思います。 その時はno-repeatの後ろに半角を空けて bottom rightと記入してください。 これでコメント作成エリアの右下に指定した画像が配置されます。 <③コメント作成エリアの文字を斜体にする> (実際にコメント作成エリアに文字を入力してみてください)
コメントを書く
お名前: uryyyyyy
コメント:
コメント作成エリア内の文字を斜体にするには
#comment-write textarea { height:150px; font-style:italic; }
赤字部分を追加してください。 <④コメント作成エリアのフォントを変える> (実際にコメント作成エリアに文字を入力してみてください)
コメントを書く
お名前: uryyyyyy
コメント:
コメント作成エリア内のフォントを変えるには
#comment-write textarea { height:150px; font-family:'変えたいフォント'; }
赤字部分を追加してください。 上図ではフォント「メイリオ」を使用しています。 例 #comments-write textarea { ・・・・・ ・・・・・ font-family;"メイリオ"; } (コメント作成エリアにフォント「メイリオ」;を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 <⑤コメント作成エリアの文字の太さを変える> (実際にコメント作成エリアに文字を入力してみてください)
コメントを書く
お名前: uryyyyyy
コメント:
コメント作成エリアの文字の太さを変えるには
#comment-write textarea { height:150px; font-weight:★; }
ここに赤字部分を記述して下さい。 ★=100~900までの数(100単位) 上図では200に設定してあります。 400がnormal,700がbold 詳しくは記事「フォント1」をご覧ください <⑥コメント作成エリアの文字の大きさを変える> (実際にコメント作成エリアに文字を入力してみてください)
コメントを書く
お名前: uryyyyyy
コメント:
コメント作成エリアの文字の大きさを変えるには
#comment-write textarea { height:150px; font-size:★ }
ここに赤字部分を変更して下さい。 ★= サイズを表す数値+単位(mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,% またはxx-large,x-large,large,medium,small,x-small,xx-small 上図では★=15ptで設定しています。 <⑦コメント作成エリアの文字の色を変える> (実際にコメント作成エリアに文字を入力してみてください)
コメントを書く
お名前: uryyyyyy
コメント:
コメント作成エリアの文字の色を変えるには
#comment-write textarea { height:150px; color:#------; }
赤字部分を追加してください #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「brown」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。

送信されたコメントの設定を変える [/*-----Entry-----*/]

【送信されたコメントの設定を変える】
送信されたコメントの設定を変えるには
/*-----Entry-----*/の
/* Comments */にある
.each-comment { margin:20px 0; clear:both; }
この部分を追加・変更します。 <初期状態>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
<①送信されたコメントに枠線をつける>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
枠線をつけるには
.each-comment { margin:20px 0; clear:both; border:枠線の種類 枠線の太さ 枠線の色; }
赤字部分を追加してください。 上図の例は border:dotted 4px orange;です。 枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。 <②送信されたコメントに背景色をつける>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
背景色をつけるには
.each-comment { margin:20px 0; clear:both; background:#------; }
赤字部分を追加してください #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「wheat」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 <③送信されたコメントに背景画像をつける>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
背景画像を使用するには
.each-comment { margin:20px 0; clear:both; }
この中に、背景画像で使用したい アップロード済みのファイルを選択します。 するとbackground:url("------------") no-repeat;という記述になります。 画像の大きさにもよりますが、小さい画像をご使用の際は no-repeatをrepeatに変更すると全範囲カバーできます。 <④送信されたコメントの文字を斜体にする>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
コメント内容を斜体にするには
.each-comment { margin:20px 0; clear:both; font-style:italic; }
赤字部分を追加してください。 <⑤送信されたコメントのフォントを変える>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
コメント内容のフォントを変えるには
.each-comment { margin:20px 0; clear:both; font-family:'使用したいフォント'; }
赤字部分を追加してください。 上図ではフォント「メイリオ」を使用しています。 例 .each-comment { ・・・・・ font-family;"メイリオ"; } (コメント内容にフォント「メイリオ」;を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 <⑥送信されたコメントの文字の太さを変える>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
コメント内容のフォントの太さを変えるには
.each-comment { margin:20px 0; clear:both; font-weight:★; }
赤字部分を追加してください。 上図では★=900で設定しています。 <⑦送信されたコメントの文字の大きさを変える>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
コメント内容のフォントの大きさを変えるには
.each-comment { margin:20px 0; clear:both; font-size:★: }
赤字部分を追加してください。 上図の例では★=12ptで設定しています。 ★= サイズを表す数値+単位(mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,% またはxx-large,x-large,large,medium,small,x-small,xx-small <⑧送信されたコメントの文字の色を変える>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
コメント内容のフォントの色を変えるには
.each-comment { margin:20px 0; clear:both; color:#------; }
赤字部分を追加してください。 #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください (上記の例では、色名「greent」を使用しています。) 6ケタの数字については記事「色の設定について」の 項目をご覧ください。 <①+②+⑤+⑥+⑦+⑧>
コメント
gogogogogo2.jpg
時が経つほどに現実を知っても はかない夢を抱いていたい
今までの複合です。
.each-comment { margin:20px 0; clear:both; border:dotted 4px orange; background:wheat; font-weight:500; font-size:12pt; font-family:'メイリオ'; color:green; }
今までの要素を継ぎ足していけば大丈夫です。



Nice!欄のユーザーアイコン・ユーザーネームの設定を変える [/*-----Entry-----*/]

【Nice!欄のユーザーアイコン・ユーザーネームの設定を変える】
nice!欄のユーザーアイコン・ユーザーネームの設定をします。
設定を変更するには
/*-----Entry-----*/の
/* nice! */にある
#nice li { float:left; width:63px; padding:5px 0; font-size:x-small; line-height:1.2; text-align:center; list-style:none; overflow:hidden; white-space:nowrap; display:block; }
この部分を追加・変更します。 下に変更例を表示します。
Nice!
gogogogogo2.jpg
gogogogogo2.jpg
uryyyyyy
gogogogogo2.jpg
gogogogogo2.jpg
gogogogogo2.jpg
gogogogogo2.jpg
番号変更している場所変更したCSS
枠線border
背景色backgorund-color
背景画像background-image
ユーザーネームを斜体font-style
ユーザーネームのフォントfont-family
ユーザーネームを太字font-weight
ロールオーバーa
【①ユーザーアイコンとユーザーネームに枠線をつける】 ①のように枠線をつけるには
#nice li { float:left; width:63px; padding:5px 0; font-size:x-small; line-height:1.2; text-align:center; list-style:none; overflow:hidden; white-space:nowrap; display:block; border:枠線の種類 枠線の幅 枠線の色; }
赤字の部分を追加してください。 ①の例では background:ridge 1px orange;です。 枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。 【②ユーザーアイコン・ユーザーネームの背景に色をつける】 ②のように背景色を指定するには
#nice li { float:left; width:63px; padding:5px 0; font-size:x-small; line-height:1.2; text-align:center; list-style:none; overflow:hidden; white-space:nowrap; display:block; background:#------; }
赤字の部分を追加してください。 #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 【③ユーザーアイコン・ユーザーネームの背景に画像を入れる】 ③のようにするには
#nice li { float:left; width:63px; padding:5px 0; font-size:x-small; line-height:1.2; text-align:center; list-style:none; overflow:hidden; white-space:nowrap; display:block; }
この中に、背景画像で使用したい アップロード済みのファイルを選択します。 するとbackground:url("------------") no-repeat;という記述になります。 画像の大きさにもよりますが、小さい画像をご使用の際は no-repeatをrepeatに変更すると全範囲カバーできます。 【④ユーザーネームを斜体にする】 ④のようにするには
#nice li { float:left; width:63px; padding:5px 0; font-size:x-small; line-height:1.2; text-align:center; list-style:none; overflow:hidden; white-space:nowrap; display:block; font-style:italic; }
赤字部分を追加してください。 【⑤ユーザーアイコンのフォントを変える】 ⑤のようにするには
#nice li { float:left; width:63px; padding:5px 0; font-size:x-small; line-height:1.2; text-align:center; list-style:none; overflow:hidden; white-space:nowrap; display:block; font-family:'使いたいフォント名'; }
例 #nice li { ・・・・・ ・・・・・ ・・・・・ font-family;"HGP平成明朝体W9"; } (ユーザーネームにフォントHGP平成明朝体W9";を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 【⑥ユーザーネームの太さを変える】 ⑥のようにするには
#nice li { float:left; width:63px; padding:5px 0; font-size:x-small; line-height:1.2; text-align:center; list-style:none; overflow:hidden; white-space:nowrap; display:block; font-weight:★; }
ここに赤字部分を記述して下さい。 ★=100~900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント1」をご覧ください。 【⑦ユーザーアイコンにロールオーバーを適用する】 ⑦のようにするには #nice li { ・・・・ ・・・・ ・・・・ } この個所の外側に #nice li a:link{text-decoration:none;color:#------} #nice li a:visited{text-decoration:none;color:#------} #nice li a:active{text-decoration:none;color:#------} #nice li a:hover{text-decoration:none;color:#------} ※ a:link未訪問リンク時のユーザーネームの色 a:visited訪問リンクの時のユーザーネームの色 a:active気にしなくていいです a:hoverマウスが乗った時のユーザーネームの色 #------の部分には色名または6ケタの数字を記述してください。

Nice!欄のNice!文字の設定を変える [/*-----Entry-----*/]

【Nice!欄のNice!文字の設定を変える】
Nice!欄のNice!文字の設定を変えるには
/*-----Entry-----*/にある
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; }
この部分を追加・変更します。 なお、今回の変更はNice!部分の変更で Nice!という言葉自体の変更ではありません。 Nice!という言葉自体を変更したい方は 記事「Niceボタンの文字を変える」内の リンク先をご覧ください。 【背景の設定】 <Nice!の背景色を変える>Nice!の背景色を変える要素は
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; background:#------; }
赤字の部分を記述して下さい。 #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。
Nice!
<Nice!に背景画像を挿入する> 背景画像を挿入する場合は まず、元のNiceアイコンを削除します。 次に背景画像に使いたいアップロード済みの ファイルをクリックします。 すると
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; 削除 padding-left:20px; background:url("/----------------") no-repeat; }
という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。
Nice_icon.jpgNice!
<Nice!の前の画像を変更する> Nice!の前の画像を変更するには 先ほどの<Nice!に背景画像を挿入する>と同じ手順です。 挿入したい画像をファイルをクリックします。
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; 削除 padding-left:20px; background:url("/----------------") no-repeat; }
上記のようになりますので 赤字部分に background:url("/----------------") no-repeat left; 青字部分を追記してください。
Nice!
上手のように背景画像と文字が重なる時は padding-leftの値を変更してください。
Nice!
【Nice!の文字の設定】 <Nice!の文字の色を変える> Nice!の文字色を設定します。 Nice!の文字色を変える要素は
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; color:#------; }
ここに赤字部分を記述し #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 <Nice!の文字の太さを変える> Nice!の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法は
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; font-weight:★; }
ここに赤字部分を記述して下さい。 ★=100~900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント1」をご覧ください。 <NIce!の文字を斜体にする> NIce!の文字を全部斜体にします。 設定方法は
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; font-style:italic; }
です。 <Nice!のフォントの種類を変える> Nice!の文字を指定したフォントにします。 設定方法は
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; font-family:"使いたいフォント"; }
ここに赤字部分を記述して下さい。 例 #nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; font-family;"HGP平成明朝体W9"; } (欄内にフォントHGP平成明朝体W9";を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 <Niceの文字の大きさを変える> Nice!の文字を指定した大きさにします。 設定方法は
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; font-size:★; }
ここに赤字部分を変更して下さい。 ★= サイズを表す数値+単位(mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,% またはxx-large,x-large,large,medium,small,x-small,xx-small 【Nice!に枠線をつける】 <NIce!に枠線をつける> Nice!に枠線をつけます。
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; border:枠線の種類 枠線の幅 枠線の色; }
Nice!
枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。

NIce・コメント・コメントを書く・トラックバックの文字の設定を変える [/*-----Entry-----*/]

【NIce・コメント・コメントを書く・
トラックバックの文字の設定を変える】
Nice!・コメント・コメントを書く・トラックバックの
文字の設定を変えるには
/*-----Entry-----*/の
.entry h4 { margin:0 0 10px 0; padding:0; font-size:small; }
この部分を追加・変更します。 なお、変更範囲は下図の 緑色の部分となります。
Nice!
コメント
コメントを書く
お名前:uryyyyy コメント
トラックバック
【背景の設定】 <Nice!・コメント・コメントを書く・ トラックバックの文字の背景色を変える> 文字の背景色を変える要素は
.entry h4 { margin:0 0 10px 0; padding:0; font-size:small; background:#------; }
赤字の部分を記述して下さい。 #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 例 背景色"lightgreen"
Nice!
<Nice!・コメント・コメントを書く・ トラックバックの文字に背景画像を挿入する> 使いたいアップロード済みの ファイルをクリックします。 すると
.entry h4 { margin:0 0 10px 0; padding:0; font-size:small; background:url("/----------------") no-repeat; }
という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 ※Nice!のところに関しては、#nice h4 { }で 個別指定されているため変わりませんが #nice h4 { }内のbackground要素を削除 すれば他の3つ同様の背景画像となります。 【Nice!・コメント・コメントを書く・ トラックバックの文字の設定】 <Nice!・コメント・コメントを書く・ トラックバックの文字の色を変える> 文字色を設定します。 文字色を変える要素は
.entry h4 { margin:0 0 10px 0; padding:0; font-size:small; color:#------; }
ここに赤字部分を記述し #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 <Nice!・コメント・コメントを書く・ トラックバックの文字の太さを変える> 文字の基本となる太さを設定します。 設定方法は
.entry h4 { margin:0 0 10px 0; padding:0; font-size:small; font-weight:★; }
ここに赤字部分を記述して下さい。 ★=100~900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント1」をご覧ください。 <NIce!・コメント・コメントを書く・ トラックバックの文字を斜体にする> 文字を全部斜体にします。 設定方法は
.entry h4 { margin:0 0 10px 0; padding:0; font-size:small; font-style:italic; }
です。
トラックバック
<Nice!・コメント・コメントを書く・ トラックバックのフォントの種類を変える> 文字を指定したフォントにします。 設定方法は
.entry h4 { margin:0 0 10px 0; padding:0; font-size:small; font-family:"使いたいフォント"; }
ここに赤字部分を記述して下さい。 例 .entry h4 { margin:0 0 10px 0; padding:0; font-size:small; font-family;"富士ポップ"; }
コメントを書く
(上図の緑部分にフォント富士ポップを適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 <Nice・コメント・コメントを書く・ トラックバックの文字の大きさを変える> 文字を指定した大きさにします。 設定方法は
.entry h4 { margin:0 0 10px 0; padding:0; font-size:★; }
ここの赤字部分を変更して下さい。 ★= サイズを表す数値+単位(mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,% またはxx-large,x-large,large,medium,small,x-small,xx-small 【Nice!・コメント・コメントを書く・ トラックバックに枠線をつける】 <NIce!・コメント・コメントを書く・ トラックバックに枠線をつける> 文字に枠線をつけます。
#nice h4 { background:url("/_common/skins/509/images/icon-nice.gif") no-repeat left center; padding-left:20px; border:枠線の種類 枠線の幅 枠線の色; }
例 赤色の太さ1pxのダッシュ線
Nice!
枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。

Nice!欄・コメント欄・コメントを書く欄・トラックバック欄の設定を変える [/*-----Entry-----*/]

【Nice!欄・コメント欄・コメントを書く欄
トラックバック欄の設定を変える】
Nice!欄・コメント欄・コメントを書く欄
トラックバック欄の変更をするには
/*-----Entry-----*/内の
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; }
この部分を追加変更します。 指定できる範囲は 下の緑色の部分になります。
Nice!
yatagarasu16px.pngyatagarasu16px.pngyatagarasu16px.png
コメント
コメントを書く
お名前:uryyyyy コメント
トラックバック
【背景の設定】 <欄の背景色を変える> 欄の背景色を変える要素は
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; background:#------; }
赤字の部分を記述して下さい。 #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 <欄に背景画像を挿入する> 背景画像を挿入する場合は アップロード済みのファイルをクリックします。 すると
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; background:url("/----------------") no-repeat; }
という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 【欄の文字の設定】<欄の文字の色を変える> 欄内の文字色の基本色を設定します。 欄内の文字色を変える要素は
.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; color:#------; }
ここに赤字部分を記述し #------部分にお好みの数字 または色名(色の場合は#不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 <欄内の文字の太さを変える> 欄内の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法は
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; font-weight:★; }
ここに赤字部分を記述して下さい。 ★=100~900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント1」をご覧ください。 <欄内の文字を斜体にする> 欄内の文字を全部斜体にします。 設定方法は
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; font-style:italic; }
です。 <欄内のフォントの種類を変える> 欄内の文字を全部指定したフォントにします。 設定方法は
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; font-family:"使いたいフォント"; }
ここに赤字部分を記述して下さい。 例 .entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; font-family;"HGP平成明朝体W9"; } (欄内にフォントHGP平成明朝体W9";を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 (全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。) 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 <欄内の文字の大きさを変える> 記事投稿時間部分の文字を全部指定した大きさにします。 設定方法は
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; font-size:★; }
ここに赤字部分を変更して下さい。 ★= サイズを表す数値+単位(mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,% またはxx-large,x-large,large,medium,small,x-small,xx-small 【欄に枠線をつける】 <欄に枠線をつける>
Nice!
yatagarasu16px.pngyatagarasu16px.pngyatagarasu16px.png
コメント
コメントを書く
お名前:uryyyyy コメント
トラックバック
欄に枠線をつけます。 上手ではborder:dotted orange 1pxで設定してます 初期設定では四辺に #1e1717 solid 5pxで指定されています。 (黒っぽい、太さ1pxの単線)
.entry { margin-top:12px; padding:12px; border: 1px #1e1717 solid; }
枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。

前の10件 | -
URYYYYYY

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。