記事投稿時間・Nice!（数）・コメント（数）・トラックバック（数）部分の設定を変える [/*-----Content-----*/]
【記事投稿時間・Nice!（数）・コメント（数） トラックバック（数）の設定を変える】 記事下の、記事投稿時間などの設定を変更するには /*-----Content-----*/内の /* Articles */にある.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; }この部分を追加・変更します。 【背景の設定】 ＜記事投稿時間の背景色を変える＞ 記事部分の背景色を変える要素は.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; background:#------; }赤字の部分を記述して下さい。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事投稿時間部分に背景画像を挿入する＞ 背景画像を挿入する場合は アップロード済みのファイルをクリックします。 すると.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; background:url("/----------------") no-repeat; }という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 【記事投稿時間部分の文字の設定】 ＜記事投稿時間部分の文字の色を変える＞ 記事投稿時間部分の文字色の基本色を設定します。 記事投稿時間部分の文字色を変える要素は.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; color:#------; }ここに赤字部分を記述し ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事投稿時間部分の文字の太さを変える＞ 記事部分の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法は.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください。 ＜記事投稿時間部分の文字を斜体にする＞ 記事投稿時間部分の文字を全部斜体にします。 設定方法は.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; font-style:italic; }です。 ＜記事投稿時間部分のフォントの種類を変える＞ 記事投稿時間部分の文字を全部指定したフォントにします。 設定方法は.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; font-family:"使いたいフォント"; }ここに赤字部分を記述して下さい。 例 .posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; font-family;"HGP平成明朝体W9"; } (記事投稿時間部分にフォントHGP平成明朝体W9";を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜記事投稿時間部分の文字の大きさを変える＞ 記事投稿時間部分の文字を全部指定した大きさにします。 設定方法は.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:★; }ここに赤字部分を変更して下さい。 ★＝ サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,％ またはxx-large,x-large,large,medium,small,x-small,xx-small 【記事投稿時間部分に枠線をつける】 <記事投稿時間部分に枠線をつける＞ 記事投稿時間部分に枠線をつけます。 初期設定では上部に #531f4f dotted 1pxで指定されています。 （黒っぽい、太さ1pxのドットの線）.posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; }上部のみを変更する場合は赤字部分を変更して下さい。 下部に枠線を追加するには border-bottom:枠線の色 枠線の種類 枠線の太さ;を border-top同様記述してください。 なお、枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。 【記事投稿時間部分にロールオーバーを適用する】 ＜記事投稿時間部分にロールオーバーを適用する＞ この場合ロールオーバーが適用できるのは Nice!・コメント・トラックバックの個所です。 設定方法は .posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; }の外の個所に下記のように 記述してください。 例 .posted a:link{text-decoration;color:green;} 未訪問時のリンク .posted a:visited:{text-decoration:none;color:red:} 訪問時のリンク .posted a:active{text-decoration:none;color:red} .posted a:hover{text-decoration:underline;color:brown} マウスが乗った時の状態
記事内に挿入した画像の設定を変える [/*-----Content-----*/]
【記事内に挿入した画像の 設定を変える】 今回は、記事内に挿入した画像の 設定を変えてみましょう。 とは言っても画像ですので、フォントや背景は 無関係です。 ＜記事内に挿入した画像に枠線をつける＞ 記事内に挿入した画像の設定を変更するには /*-----Content-----*/内の /* Articles */にある.articles-body img { margin-right: 6px; }この部分を追加・変更します。 追加内容は以下のようになります .articles-body img { margin-right: 6px; border:枠線の種類 枠線の色 枠線の幅 } 上手く枠線を使えば、挿入した画像を 額縁に見立てるなんてこともできます。なお、枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。
記事本体部分の設定を変える [/*-----Content-----*/]
【記事本体部分の設定を変える】 記事本体というのは 新規作成で書いた記事部分を指します。 記事本体部分の設定をするには /*-----Content-----*/内の /* Articles */にある.articles-body { line-height:1.6; margin:0 0 20px 0; }この部分を追加・変更します。 【背景の設定】 ＜記事の背景色を変える＞ 記事部分の背景色を変える要素は.articles-body { line-height:1.6; margin:0 0 20px 0; background:#------; }赤字の部分を記述して下さい。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事に背景画像を挿入する＞ 背景画像を挿入する場合は アップロード済みのファイルをクリックします。 すると.articles-body { line-height:1.6; margin:0 0 20px 0; background:url("/----------------") no-repeat; }という記述になります。 背景にする画像は透明度の高いものを 使った方が、文字が見えにくくならず便利です。 また、記事の長さによって画像が 一部しか出ないこともありますので ご注意ください。 【記事の文字の設定】 ＜記事の文字の色を変える＞ 記事の文字色の基本色を設定します。 記事の文字色を変える要素は.articles-body { line-height:1.6; margin:0 0 20px 0; color:#------; }ここに赤字部分を記述し ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事の文字の太さを変える＞ 記事部分の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法は.articles-body { line-height:1.6; margin:0 0 20px 0; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください。 ＜記事の文字を斜体にする＞ 記事部分の文字を全部斜体にします。 設定方法は.articles-body { line-height:1.6; margin:0 0 20px 0; font-style:italic; }記事全部を斜体にすると見づらいだけなので 変えたい部分だけを変えた方がいいと思います。 ＜記事のフォントの種類を変える＞ 記事部分の文字を全部指定したフォントにします。 設定方法は.articles-body { line-height:1.6; margin:0 0 20px 0; font-family:"使いたいフォント"; }ここに赤字部分を記述して下さい。 例 .articles-body { line-height:1.6; margin:0 0 20px 0; font-family;"HGP平成明朝体W9"; } (記事部分にフォントHGP平成明朝体W9";を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜記事の文字の大きさを変える＞ 記事の文字を全部指定した大きさにします。 設定方法は.articles-body { line-height:1.6; margin:0 0 20px 0; font-size:★; }ここに赤字部分を記述して下さい。 ★＝ サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,％ またはxx-large,x-large,large,medium,small,x-small,xx-small あまり数値を大きくしますと はみ出した部分が表示されないことも ありますので、ご注意ください。 【記事に枠線をつける】 <記事に枠線をつける＞ 記事の外枠に枠線をつけます。 設定方法は.articles-body { line-height:1.6; margin:0 0 20px 0; border:つけたい枠線のタイプ 色 太さ; }ここに赤字部分を記述して下さい。 なお、枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。
記事タイトルのロールオーバーの設定を変える [/*-----Content-----*/]
【記事タイトルのロールオーバーの設定を変える】 ロールオーバーとはマウスがそこへ乗ると 変化が生じることを言います。 それを記事タイトルに適用してみましょう。 記事タイトルのロールオーバーを設定するには /*-----Content-----*/内の /* Articles */にある.articles-title a:link{ text-decoration: none; color:#ffffff; } .articles-title a:visited{ text-decoration: none; color:#ffffff; } .articles-title a:active{ text-decoration: none; color:#ffffff; } .articles-title a:hover{ text-decoration: underline; color:#ffffff;}この部分を追加・変更します。 通常の状態は a:link（未訪問リンク時＝まだクリックされたことがない）または a:visited（訪問済みリンク時＝すでにクリックされたことがある）の どちらかです。 ロールオーバーの状態は a:hover（マウスが乗っている状態）です。 つまり、記事タイトルの初期設定は 未訪問時リンクおよび訪問済みリンクの文字は白 下線がなしで ロールオーバー時にはそこに下線が付くというものです。 下の＜記事タイトルのロールオーバーの設定を変える＞を クリックしてみて下さい。 それではタイトルをカスタマイズしてみましょう。 未訪問時のリンクの色をwheat ロールオーバーの色をtomatoにしてみます。 下の＜記事タイトルのロールオーバーの設定を変える＞を クリックしてみて下さい。 と変わります。 変更の内容はこの通りです。 .articles-title a:link{ text-decoration: none;color:wheat ; } .articles-title a:visited{ text-decoration: none; color:wheat ; } .articles-title a:active{ text-decoration: none; color:wheat ; } .articles-title a:hover{ text-decoration: none; color:tomato;} a:hover内にfont-size（オンマウスで字が大きくなる） font-family（オンマウスでフォントが変わる）など 今まで登場しているその他のCSS要素も 使用可能ですので、是非お試しください。
記事タイトルの設定を変える [/*-----Content-----*/]
【記事タイトルの設定を変える】 今回は記事タイトル記事タイトルの設定を変えるの部分の変更をします。 この部分の設定を変更するには /*-----Content-----*/内の /* Articles */にある.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; }この部分を追加・変更します。 【背景の設定】 ＜背景色を変える＞ 記事部分の背景色を変える要素は.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color:#------; font-size: small; color: #ffffff; }赤字の部分を変更して下さい。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事タイトルにに背景画像を挿入する＞ 背景画像を挿入する場合は アップロード済みのファイルをクリックします。 すると.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; background:url("/----------------") no-repeat; }という記述になります。 no-repeatの後ろにleftと記述して下さい。 (no-repeatとleftの間は半角スペーズ) 背景画像と記事タイトルが重なる場合は paddingの4番目の要素の値を大きくして下さい。 (paddingの要素は左から、上、右、下、左を 表しています)記事タイトルの設定を変える挿入する画像によってはタイトルと重なってしまいます。記事タイトルの設定を変える左側paddingを変更すると重なりません。 高さのある背景画像を使いたいときは height:★;の指定を入れましょう。記事タイトルの設定を変える【記事タイトルの文字の設定】 ＜記事タイトルの文字の色を変える＞ 記事タイトルの文字色の基本色を設定します。 記事タイトルの文字色を変える要素は.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color:#------; }ここに赤字部分を記述し ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事タイトルの文字の太さを変える＞ 記事部分の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法は.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください。 ＜記事タイトルの文字を斜体にする＞ 記事タイトルの文字を全部斜体にします。 設定方法は.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; font-style:italic; }赤字部分を記述して下さい。 ＜記事タイトルのフォントの種類を変える＞ 記事タイトルの文字を全部指定したフォントにします。 設定方法は.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; }font-family:"使いたいフォント"; ここに赤字部分を記述して下さい。 例 .articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; font-family;"HGP平成明朝体W9"; } (記事タイトルにフォントHGP平成明朝体W9";を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜記事タイトルの文字の大きさを変える＞ 記事タイトルの文字を全部指定した大きさにします。 設定方法は.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size:★; color: #ffffff; }ここに赤字部分を記述して下さい。 ★＝ サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,％ またはxx-large,x-large,large,medium,small,x-small,xx-small あまり大きくすると元の枠に納まらなくなりますので どうしても大きくしたい場合はheight:★;で 高さを調節して下さい。 【記事タイトルに枠線をつける】 <記事タイトルに枠線をつける＞ 記事タイトルの外枠に枠線をつけます。 設定方法は.articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; border:つけたい枠線のタイプ 色 太さ; }ここに赤字部分を記述して下さい。 なお、枠線のタイプ・色・太さの間には 半角スペースが入ります。記事タイトルの設定を変える詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。 【おまけ】 記事タイトルの枠線には border-right、border-left、border-top、border-bottomも 装飾には使えます。記事タイトルの設定を変えるとワンポイントで使ったり記事タイトルの設定を変えるみたいにカラフルにも設定できます。
記事部分（前後記事リンクを除く）の設定を変える [/*-----Content-----*/]
【記事部分（前後記事リンク部分を除く）の 設定を変える】 今回は記事本体(前後記事リンク部分を除く）の 設定を変更します。 設定を変更するには /*-----Content-----*/内の /* Articles */にある.articles { width:539px; margin-top:10px; overflow:hidden; }の部分を追加・変更します。 ＜記事部分の幅を変える＞ 記事部分の幅を変えるには.articles { margin-top:10px; overflow:hidden; width:540px; }赤字部分の数値を変更してください。 数値を変更するとバナー画像と 合わなくりますので、バナー画像の 修正をしてください。 【背景の設定】 ＜背景色を変える＞ 記事部分の背景色を変える要素は.articles { width:539px; margin-top:10px; overflow:hidden; background:#------; }赤字の部分を記述して下さい。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事部分に背景画像を挿入する＞ 背景画像を挿入する場合は アップロード済みのファイルをクリックします。 すると#main { .articles { width:539px; margin-top:10px; overflow:hidden; background:url("/----------------") no-repeat; }という記述になります。 ただし、画像の大きさによりフォロー出来ない部分が 出てきますので、 no-repeat→repeatに変更し、縦横の繰り返しをすることを おすすめします。 【記事部分の文字の設定】 ＜記事部分の文字の色を変える＞ 記事部分の文字色の基本色を設定します。 記事部分の文字色を変える要素は.articles { width:539px; margin-top:10px; overflow:hidden; color:#------; }ここに赤字部分を記述し ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事部分の文字の太さを変える＞ 記事部分の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法は.articles { width:539px; margin-top:10px; overflow:hidden; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください。 ＜記事部分の文字を斜体にする＞ 記事部分の文字を全部斜体にします。 設定方法は.articles { width:539px; margin-top:10px; overflow:hidden; font-style:italic; }記事全体を斜体にすると見づらいだけなので 変えたい部分だけを変えた方がいいと思います。 ＜記事部分のフォントの種類を変える＞ 記事部分の文字を全部指定したフォントにします。 設定方法は.articles { width:539px; margin-top:10px; overflow:hidden; }font-family:"使いたいフォント"; ここに赤字部分を記述して下さい。 例 .articles { width:539px; margin-top:10px; overflow:hidden; font-family;"HGP平成明朝体W9"; } (記事部分にフォントHGP平成明朝体W9";を適用) フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜記事部分の文字の大きさを変える＞ 記事部分の文字を全部指定した大きさにします。 設定方法は.articles { width:539px; margin-top:10px; overflow:hidden; font-size:★; }ここに赤字部分を記述して下さい。 ★＝ サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,％ またはxx-large,x-large,large,medium,small,x-small,xx-small 【記事部分に枠線をつける】 <記事部分に枠線をつける＞ 記事部分の外枠に枠線をつけます。 設定方法は.articles { width:539px; margin-top:10px; overflow:hidden; border:つけたい枠線のタイプ 色 太さ; }ここに赤字部分を記述して下さい。 なお、枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。
記事部分の設定を変える [/*-----Content-----*/]
【記事部分の設定を変える】 今回は記事部分の設定を変更します。 ここで言う記事部分と言うのは 管理ページ→デザイン→レイアウト→記事で 設定されている範囲です。 設定を変更するには /*-----Content-----*/内 /* Articles */にある#main { width:540px; padding-right: 12px; }この部分を追加・変更します。 ＜記事部分の幅を変える＞ 記事部分の幅を変えるには#main { width:540px; padding-right: 12px; }赤字部分の数値を変更してください。 数値を変更するとバナー画像と 合わなくりますので、バナー画像の 修正をしてください。 【背景の設定】 ＜背景色を変える＞ 記事部分の背景色を変える要素は#main { width:540px; padding-right: 12px; background:#------; }赤字の部分を記述して下さい。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事部分に背景画像を挿入する＞ 背景画像を挿入する場合は アップロード済みのファイルをクリックします。 すると#main { width:540px; padding-right: 12px; background:url("/----------------") no-repeat; }という記述になります。 ただし、画像の大きさによりフォロー出来ない部分が 出てきますので、 no-repeat→repeatに変更し、縦横の繰り返しをすることを おすすめします。 【記事部分の文字の設定】 ＜記事部分の文字の色を変える＞ 記事部分の文字色の基本色を設定します。 記事部分の文字色を変える要素は#main { width:540px; padding-right: 12px; color:#------; }ここに赤字部分を記述し ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜記事部分の文字の太さを変える＞ 記事部分の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法は#main { width:540px; padding-right: 12px; font-weight:★; }ここに赤字部分を記述して下さい。 ★＝100～900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください。 ＜記事部分の文字を斜体にする＞ 記事部分の文字を全部斜体にします。 設定方法は#main { width:540px; padding-right: 12px; font-style:italic; }記事全体を斜体にすると見づらいだけなので 変えたい部分だけを変えた方がいいと思います。 ＜記事部分のフォントの種類を変える＞ 記事部分の文字を全部指定したフォントにします。 設定方法は#main { width:540px; padding-right: 12px; font-family:"使いたいフォント"; }ここに赤字部分を記述して下さい。 例 #main { width:540px; padding-right: 12px; font-family;"HGP平成明朝体W9"; (記事部分にフォントHGP平成明朝体W9";を適用) } フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜記事部分の文字の大きさを変える＞ 記事部分の文字を全部指定した大きさにします。 設定方法は#main { width:540px; padding-right: 12px; font-size:★; }ここに赤字部分を記述して下さい。 ★＝ サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,％ またはxx-large,x-large,large,medium,small,x-small,xx-small 【記事部分に枠線をつける】 <記事部分に枠線をつける＞ 記事部分の外枠に枠線をつけます。 設定方法は #main { width:540px; padding-right: 12px; border:つけたい枠線のタイプ 色 太さ; } ここに赤字部分を記述して下さい。 なお、枠線のタイプ・色・太さの間には 半角スペースが入ります。 詳しいボーダーの種類については 記事「ボーダー1」「ボーダー2」を ご覧ください。
記事ページのブログトップという文字の設定を変える [/*-----Content-----*/]
【記事ページのブログトップの設定を変える】 今回は、記事ページの記事タイトルの上と トラックバックエリアの下にある ブログトップ文字の設定の変更を説明します。 設定を変えるには /*-----Content-----*/内の /* Links */にある.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; }この部分を追加・変更します。 ＜文字の大きさを変える＞ 文字の大きさを変えるには.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:★； white-space:nowrap; }★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の大きさを変える』を ご覧ください。（クリックすると移動します） ＜文字の太さを変える＞ 文字の太さを変えるには.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; font-weight:★； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の太さを変える』を ご覧ください。（クリックすると移動します） ＜フォントの種類を変える＞ フォントの種類を変えるには.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; font-family:"★"； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『フォントの種類変える』を ご覧ください。（クリックすると移動します） ＜文字の色を変える＞ 文字の大きさを変えるには.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; color:★； }と、記述して下さい。 ★につきましては、記事「色の設定について」をご覧ください。 ＜文字を斜体に変える＞ 文字の大きさを変えるには.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; font-style:italic； }と、記述して下さい。 ＜ブログトップへのリンクにロールオーバーを適用する＞ ロールオーバとはマウスが乗った時に 変化をもたらすことです。 アーカイブ記事へのリンクにロールオーバーを適用するには.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; }の外部分に archive-link a:link{text-decoration:none;color:メインの色;} archive-link a:visited{text-decoration:none;color:メインの色;} archive-link a:active{text-decoration:none;color:メインの色;} archive-link a:hover{text-decorarion:none;color:ロールオーバーさせたい色;} と書き加えます。 ※a:hover内のtext-decoration:noneはロールオーバーの際の下線です。 初期設定ではunderline(下線)で設定されています。 ＜ブログトップへのリンクに背景色を入れる＞ アーカイブ記事へのリンクに背景色を入れるには.archive-links{ float:right; padding-left:12px; background:★; font-size:x-small; white-space:nowrap; }と、記述して下さい。 ★につきまして、記事「色の設定について」を ご覧下さい。 ＜ブログトップの前の画像を変更する＞ 前の10件/前の記事の前の画像(上向き▲二つ）を変更するには.archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; }の赤字部分を削除し、アップロード済みのファイルを 選択しクリックするだけです。 するとブログトップ右のようになります。 文字と画像が重なる時は padding-left：★により 文字の位置をずらして下さい。
次の10件（トップページ）/次の記事（記事ページ）の設定を変える [/*-----Content-----*/]
【次の10件/次の記事の設定を変える】 今回のこの設定は 前回の「前の10件/前の記事の設定を変える」と 全く同じ要領で行います。 設定を変えるには /*-----Content-----*/内の /* Links */にある.nextLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; }この部分を追加・変更します。 変更の内容につきましては 記事『前の10件/前の記事の設定を変える』を ご覧ください。 前回の.previousLinkをnextLinkに置き換えて下さい。
前の10件（トップページ）/前の記事（記事ページ）の設定を変える [/*-----Content-----*/]
【前の10件/前の記事の設定を変える】 今回は 前の記事 ブログトップ【記事ページ】 前の10件 【トップページ】 という部分の設定を変更します。 設定を変えるには /*-----Content-----*/内の /* Links */にある.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; }この部分を追加・変更します。 ＜文字の大きさを変える＞ 文字の大きさを変えるには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; font-size:★； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の大きさを変える』を ご覧ください。（クリックすると移動します） ＜文字の太さを変える＞ 文字の太さを変えるには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; font-weight:★； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の太さを変える』を ご覧ください。（クリックすると移動します） ＜フォントの種類を変える＞ フォントの種類を変えるには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; font-family:"★"； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『フォントの種類変える』を ご覧ください。（クリックすると移動します） ＜文字の色を変える＞ 文字の大きさを変えるには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; color:★； }と、記述して下さい。 ★につきましては、記事「色の設定について」をご覧ください。 ＜文字を斜体に変える＞ 文字の大きさを変えるには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; font-style:italic； }と、記述して下さい。 ＜アーカイブ記事へのリンクにロールオーバーを適用する＞ ロールオーバとはマウスが乗った時に 変化をもたらすことです。 アーカイブ記事へのリンクにロールオーバーを適用するには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; }の外部分に previousLink a:link{text-decoration:none;color:メインの色;} previousLink a:visited{text-decoration:none;color:メインの色;} previousLink a:active{text-decoration:none;color:メインの色;} previousLink a:hover{text-decorarion:none;color:ロールオーバーさせたい色;} と書き加えます。 ※a:hover内のtext-decoration:noneはロールオーバーの際の下線です。 初期設定ではunderline(下線)で設定されています。 ＜アーカイブ記事へのリンクに背景色を入れる＞ アーカイブ記事へのリンクに背景色を入れるには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; background:★; }と、記述して下さい。 ★につきまして、記事「色の設定について」を ご覧下さい。 ＜前の10件/前の記事の前の画像を変更する＞ 前の10件/前の記事の前の画像(左向き▲二つ）を変更するには.previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; }の赤字部分を削除し、アップロード済みのファイルを 選択しクリックするだけです。 すると前の記事｜次の記事
のようになります。
