記事タイトルの設定を変える

【記事タイトルの設定を変える】
今回は記事タイトル

記事タイトルの設定を変える

の部分の変更をします。

この部分の設定を変更するには
/*-----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も
装飾には使えます。


記事タイトルの設定を変える

とワンポイントで使ったり

記事タイトルの設定を変える

みたいにカラフルにも設定できます。

タグ：so-net CSS ブログ カスタマイズ