とら＠おだづもっこ(´・ω・`)のブログ一覧

帰ってきてから暇過ぎた壊社員ですが。









ＰＣからしか見れませんが、スタイル変更しましたｗ




暇過ぎたんです。すいませんｗ




こんなんでブログあげてすいませんｗ




写真は意味なしです。すいません。

スタイル管理でスタイルシートを弄っている方が増えてきましたね(*^-^)

今日は、トラックバックのスタイルシート♪

「この記事へのトラックバックURL」のURL表示色

.TrackBackUrl
{
color: #008B8B;←URLの文字色
font-size: 12px;←URLのフォントのサイズ
font-weight: bold;←フォントの線の太さ
margin: 10px 0px 15px 15px;←※１　下で説明
}

相手からのトラックバックの箱

.TrackBackBlock
{
border-left:1px solid #00B2EE;←左枠線の太さ　線の種類　色
border-right:1px solid #00B2EE;←右枠線の太さ　線の種類　色
border-top:1px solid #00B2EE;←上枠線の太さ　線の種類　色
border-bottom:1px solid #00B2EE;←下枠線の太さ　線の種類　色
margin-bottom: 10px;←下の要素とのマージン
margin-left: 15px;←左の要素とのマージン
margin-top: 10px;←上の要素とのマージン
padding-right: 9px;←右の線からの空白の量
padding-left: 10px;←左の線からの空白の量
padding-top: 7px;←上の線からの空白の量
padding-bottom: 3px;←下の線からの空白の量
background-color: #ADD8E6;←背景色
}

相手からのトラックバックの文字

.TrackBackBody
{
font-size: 12px;←フォントのサイズ
color: #00688B;←文字色
line-height: 135%;←※２　下で説明
}

相手からのトラックバックの時間

.TrackBackPost
{
color: #4169E1;←文字色
font-size: 10px;←フォントのサイズ
text-align: right;←※３　下で説明
}

この場所の、色等変更すれば他のスタイルに合ったように出来ます(*^-^)
挑戦してみましょう♪

上で説明出来なかった事です。
面倒ですが、覚えておくと綺麗に調整出来ると思います。

※１
昨日marginについて説明しましたが、書き方について説明します。
marginは個別に上下左右指定と、一括で設定と出来ます。
一括指定と個別指定の関係は、以下のようになります。
［一括指定の場合］
margin: 1pt 2pt 3pt 4pt;
［個別指定の場合］
margin-top: 1pt;
margin-right: 2pt;
margin-bottom: 3pt;
margin-left: 4pt;

※２
行間を設定します。ここの場合％で指定しているので、文字の大きさに対する割合となります。
本当は、この'line-height'の値から'font-size'の値を引いたもの、これが行間のスペースの幅になります。
この場合、１３５％なので１２ptの１．３５倍、約１６ptなので見た目の行間は約４pt(これをリーディングといいます)となります。
但し、上下に空間があるので半分ずつ割り振られています(ハーフリーディングといいます)。
------------------------｝ハーフリーディング(この場合、２pt)
ＡＢＣＤＥＦＧＨＩＪＫＬ　｝フォントサイズ
------------------------｝ハーフリーディング(この場合、２pt)
今の行と次行のハーフ・リーディングがぶつかり、調度リーディング分の行間が空きます。

※３
行の配置を指定します。
left（左揃え）［規定値］
center（中央揃え）
right（右揃え）
justify（両端揃え）　←　textの幅に合わせて文字間を調整し、textの幅に文字列を合わせます。

夜は、コメントの上にあるコメント書いていただいた方の名前と時間の表示されるとこの変更です(^-^)
ちょっと説明を詳しくやってみますね(*^-^)

コメントの名前の部分

.CommentTitle
{
padding-right: 3px;←右の線からの空白の量
padding-left: 3px;←左の線からの空白の量
padding-bottom: 0px;←下の線からの空白の量
padding-top: 0px;←上の線からの空白の量
font-weight: bold;←フォントの線の太さ(ここではbold:太線)
font-size: 12px;←フォントのサイズ
background: #D1EEEE;←背景色
color: #32456d;←文字色
border-right: #00B2EE 1px solid;←右枠線の色　太さ　線の種類(solid:１本線)
border-top: #00B2EE 1px solid;←上枠線の色　太さ　線の種類
border-left: #00B2EE 1px solid;←左枠線の色　太さ　線の種類
border-bottom: #00B2EE 1px solid;←下枠線の色　太さ　線の種類
}

コメントの日付部分

.CommentDate
{
padding-right: 3px;←右の線からの空白の量
padding-left: 3px;←左の線からの空白の量
padding-bottom: 0px;←下の線からの空白の量
padding-top: 1px;←上の線からの空白の量
font-size: 12px;←フォントのサイズ
background: #E0FFFF;←背景色
margin: 0px;←回りの要素とのマージン(0だとくっつく)
color: #0000EE;←文字色
border-right: #00B2EE 1px solid;←右枠線の色　太さ　線の種類(solid:１本線)
border-top: #00B2EE 0px solid;←上枠線の色　太さ　線の種類
border-left: #00B2EE 1px solid;←左枠線の色　太さ　線の種類
border-bottom: #00B2EE 1px solid;←下枠線の色　太さ　線の種類
}

margin、padding、border の関係
　　　上の要素
　┗━━━━━━━┛
┌　　　　　　　　　　　　　　┐｝←margin
　┏━━━━━━━┓←border
　┃　　｝padding 　　　┃
　┃ＡＢＣＤＥＦＧ　　　┃
　┃　　　　　　　　　　　┃
　┗━━━━━━━┛
└　　　　　　　　　　　　　　┘

font-weightは［bold］と［normal］(標準)さえ覚えておけば問題ないです。

これで大体は判ると思うんですが(*^-^)

ここで必要なのは色と文字色と枠線の色を変えて上げれば、回りの変更した色とマッチすると思いますので、是非挑戦してくださいませ。

今日、猫姐が右のカレンダー等の背景色を変えたいというのでアンチョコうｐしてみます(*^-^)

これが右の本文の部分

.MenuPlate
{
border-left:1px solid #95A8D2;　　　←左の罫線の太さと色
border-right:1px solid #95A8D2;　　　←右の罫線の太さと色
border-top:0px solid #95A8D2;　　　←上の罫線の太さと色
border-bottom:1px solid #95A8D2;　　　←下の罫線の太さと色
font-size: 12px;　　　←フォントサイズ
text-align: left;
line-height: 125%;
padding: 5px;
background: #CAE1FF;　　　←背景色
word-break: break-all;
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:15px
}

これが右のタイトル部分

.MenuTitle
{
padding-right: 5px;
padding-left: 5px;
font-weight: bold;
font-size: 12px;　　　←フォントサイズ
background: #CAE1FF;　　　←背景色
padding-bottom: 5px;
color: #32456d;　　←タイトルの文字色（カレンダー除く）
WORD-BREAK: break-all;
padding-top: 5px;
border-bottom: #6F86BD 1px solid;　　←タイトル下の罫線の太さと色
letter-spacing: 0px;
text-align: center;　　←テキスト位置
}

背景色を変えたい場合、それぞれの「背景色」ってとこの数値を変更してください。
本文のとこには枠があるのですが、そこの色も変えてメリハリ付けるのもあり(*^-^)
タイトル部の文字色も変えられるのでやって見てください♪

タイトルだけにでも、写真を入れたいって声が聞こえて来たので。。

タイトルに写真を入れたい時は

#Header
{
padding:50px； ← 高さ変更
margin-top: 5px；
background-image: url('http://～～.jpg')； ←ここ
margin-bottom: 0px；
width: 750px； ← 幅変更
background-repeat: no-repeat；
}

ここって場所に写真のURLを貼ると替えられるよ。
その画像によっては変なとこ切れたりするので、高さとか幅変更すけばよし♪
但し、直リンは止めましょう(^▽^;)

#Footer
{
background: url('http://～～.jpg') no-repeat； ←ここ
width: 750px； ←幅変更
height: 30px ←高さ変更
}

ついでに下のフッターも替えてあげるとバランス取れて(・∀・)ィィ!!

ブログの色は変えられるけど、コメントの色が変えられないって話が出てたので、もう一度探しましたｗ

ブログの色変更はここ

.BlogText
{
font-size: 14px;　　←フォントの大きさ変更
padding-bottom: 20px;
color: #00008B;　　←色変更
}

コメントの色変更はここ

.CommentBody
{
padding-right: 2px；
padding-left: 2px；
font-size: 14px；
padding-bottom: 2px；
padding-top: 2px；
word-break: break-all；
color: #00008B； ←追加して色変更
}

この部分を変えて上げれば変更出来ます(^-^)

楽しくスタイルシートを使って、オリジナルブログを作ろう♪