ページ下部アーカイブ記事（＋ブログトップ）へのリンク設定を変える [/*-----Content-----*/]
【アーカイブ記事への設定を変える】 今回は記事の下にある 前の記事｜次の記事 ブログトップ【記事ページ】 前の10件｜次の10件 【トップページ】 という部分の設定を変更します。 設定を変えるには /*-----Content-----*/内の /* Links */にある.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; }この部分を追加・変更します。 ＜文字の大きさを変える＞ 文字の大きさを変えるには.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; font-size:★； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の大きさを変える』を ご覧ください。（クリックすると移動します） ＜文字の太さを変える＞ 文字の太さを変えるには.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; font-weight:★； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の太さを変える』を ご覧ください。（クリックすると移動します） ＜フォントの種類を変える＞ フォントの種類を変えるには.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; font-family:"★"； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『フォントの種類変える』を ご覧ください。（クリックすると移動します） ＜文字の色を変える＞ 文字の大きさを変えるには.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; color:★； }と、記述して下さい。 ★につきましては、記事「色の設定について」をご覧ください。 ＜文字を斜体に変える＞ 文字の大きさを変えるには.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; font-style:italic； }と、記述して下さい。 ＜アーカイブ記事へのリンクにロールオーバーを適用する＞ ロールオーバとはマウスが乗った時に 変化をもたらすことです。 アーカイブ記事へのリンクにロールオーバーを適用するには .archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; }の外部分に .archive-bottom a:link{text-decoration:none;color:メインの色;} .archive-bottom a:visited{text-decoration:none;color:メインの色;} .archive-botton a:active{text-decoration:none;color:メインの色;} .archive-bottom a:hover{text-decorarion:none;color:ロールオーバーさせたい色;} と書き加えます。 ※a:hover内のtext-decoration:noneはロールオーバーの際の下線です。 初期設定ではunderline(下線)で設定されています。 ＜アーカイブ記事へのリンクに背景色を入れる＞ アーカイブ記事へのリンクに背景色を入れるには.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; background:★; }と、記述して下さい。 ★につきまして、記事「色の設定について」を ご覧下さい。 ＜ページ下部のリンク部分の上にある線を変更する＞ ページ下部のリンク部分の上にある線の初期設定は 「リンク部分の上側に、太さ1pxで単線、色1e1717」という指定です。 これを変更するには.archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; }赤字部分を変えて下さい。 ボーダー（枠線）につきましては 記事「ボーダー1」「ボーダー2」あるいは 記事「バナーの設定を変更する」内の 【枠線で囲む】をご覧ください。
アーカイブ記事（＋ブログトップ）リンク部分への設定を変える。 [/*-----Content-----*/]
【アーカイブ記事への設定を変える】 今回は記事の上にある 前の記事｜次の記事 ブログトップ【記事ページ】 前の10件｜次の10件 【トップページ】 という部分の設定を変更します。 設定を変えるには /*-----Content-----*/内の /* Links */にある.archive-title{ margin-top:7px; margin-bottom: 6px; }この部分を追加・変更します。 ＜文字の大きさを変える＞ 文字の大きさを変えるには.archive-title{ margin-top:7px; margin-bottom: 6px; font-size:★； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の大きさを変える』を ご覧ください。（クリックすると移動します） ＜文字の太さを変える＞ 文字の太さを変えるには.archive-title{ margin-top:7px; margin-bottom: 6px; font-weight:★； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『文字の太さを変える』を ご覧ください。（クリックすると移動します） ＜フォントの種類を変える＞ フォントの種類を変えるには.archive-title{ margin-top:7px; margin-bottom: 6px; font-family:"★"； }と、記述して下さい。 ★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」 内の『フォントの種類変える』を ご覧ください。（クリックすると移動します） ＜文字の色を変える＞ 文字の大きさを変えるには.archive-title{ margin-top:7px; margin-bottom: 6px; color:★； }と、記述して下さい。 ★につきましては、記事「色の設定について」をご覧ください。 ＜文字を斜体に変える＞ 文字の大きさを変えるには.archive-title{ margin-top:7px; margin-bottom: 6px; font-style:italic； }と、記述して下さい。 ＜アーカイブ記事へのリンクにロールオーバーを適用する＞ ロールオーバとはマウスが乗った時に 変化をもたらすことです。 アーカイブ記事へのリンクにロールオーバーを適用するには .archive-title{ margin-top:7px; margin-bottom: 6px; } の外部分に .archive-title a:link{text-decoration:none;color:メインの色;} .archive-title a:visited{text-decoration:none;color:メインの色;} .archive-titlea:active{text-decoration:none;color:メインの色;} .archive-title a:hover{text-decorarion:none;color:ロールオーバーさせたい色;} と書き加えます。 ※a:hover内のtext-decoration:noneはロールオーバーの際の下線です。 初期設定ではunderline(下線)で設定されています。 ＜アーカイブ記事へのリンクに背景色を入れる＞ アーカイブ記事へのリンクに背景色を入れるには.archive-title{ margin-top:7px; margin-bottom: 6px; background:★; }と、記述して下さい。 ★につきまして、記事「色の設定について」を ご覧下さい。 前の記事（前の10件）・次の記事（次の10件） ブログトップそれぞれ、個別の設定も可能です。 個別の設定については 後日紹介いたします。
ブログの背景を変える―記事・サイドバー [/*-----Content-----*/]
前回まではバナー部分のCSSでしたが 今回からは記事部分のCSSを 説明していきたいと思います。 【背景を変える】 ＜ブログ中身の部分の背景色を変更する＞ ここで言う、中身の部分とは サイドバー・記事部分にあたります。 この範囲の背景色を変更するには /*-----Content-----*/内の#content { background:url(/_common/skins/509/images/content_bg.gif) repeat-y; }この部分を変更します。 変更内容は #content { background:色名または＃-----; } となります。 ＃------については、記事「色の設定について」を ご覧ください。 記事の後ろにも影響しますので 記事を読むのに差し障りのない 色を選択してください。 「記事の背景を変える」は 後日別途項目を設けます。 ＜背景画像を変更する＞ 背景画像を変更するには #content { background:url(/_common/skins/509/images/content_bg.gif) repeat-y; } 部分の background:url (/_common/skins/509/images/content_bg.gif) repeat-y;を 消去して、アップロード済みのファイルを クリックしてください。 アップロードした画像にも依りますが 挿入したファイルの最後の no-repeat→repeat-yあるいは repeatにすることをお勧めします。 背景画像の繰り返しについては 記事『背景２』をご覧ください。
