アメリカンショートヘアーとペルシャ猫のブログ→http://cat.offstyle.jp/に引っ越しました。

0000/00/00
スタイルシートの編集 その4 記事部分
1134045977816970.jpg
「スタイルシートの編集 その1」では基本となる部分
「その2」ではタイトル部分
「その3」ではサイドのメニュー部分
「その4」では記事部分を見ていきます。
(今後、内容を分割する可能性があります)
====================
.date
{ border-collapse:collapse;}
div.date_caption { color:#cccccc; ←記事のタイトル上部にある日付の色指定
font-size:
12px; font-weight: bold; margin: 2px 0px 3px 0px;}
.article { border-collapse:collapse;
margin: 0px 0px 10px 0px;}
td.article_head { background-color: #000000; ←記事のタイトルの背景色の指定
border-top:
#333333 1px solid; border-bottom: #333333 1px dotted; border-left: #333333 1px
solid; border-right: #333333 1px solid; padding: 4px 3px 4px 3px;}
td.article_body
{ border-left: #333333 1px solid; border-right: #333333 1px solid; padding: 2px
4px 0px 4px;}
td.article_foot { border-left: #333333 1px solid; border-right:
#333333 1px solid; border-bottom: #333333 1px solid; padding: 2px 6px 3px 0px;}
div.article_subject
{ color: #ffcc00; ←記事のタイトルの文字色の指定
font-size:
18px; font-weight: bold;}
div.article_text {line-height: 150%; font-size: 12px;
color:#999999; ←記事本文の文字色の指定}
div.article_date
{ color:#999999; ←記事下部の投稿日付の文字色の指定
font-size:
12px;}
.res_line { border-top: #333333 1px dotted;}
.restb { border-collapse:collapse;
margin: 1px 0px 2px 0px;}
td.restb_head { border-left: #333333 8px solid; border-right:
#333333 1px solid; border-top: #333333 1px solid; padding: 2px 0px 0px 4px;}
td.restb_body
{ border-left: #333333 8px solid; border-right: #333333 1px solid; padding: 0px
0px 0px 4px;}
td.restb_foot { border-left: #333333 8px solid; border-right: #333333
1px solid; border-bottom: #333333 1px solid; padding: 0px 4px 2px 4px;}
div.restb_subject
{ color:#ffcc00; ←コメントのタイトルの文字色指定
font-size:
12px; font-weight: bold;}
div.restb_text { font-size: 12px; color:#999999; ←コメントの文字色指定}
div.restb_date
{ color:#999999; ←コメントの日付の文字色指定
font-size:
12px;}
====================
どこを変更すると、どの部分の色が変わるのか、などは改めて追記します。中途半端ですが、時間が空いた時にチョコチョコ内容を書き換えていきますので、たまに覗いて下さい。
「1日1枚アメショーの写真」ではアメリカンショートヘア・シルバータビー「タム」とブラウンタビー「クー」 の猫画像を公開
スタイルシートの編集 その3 メニュー部分

1134045977816970.jpg


 


 


 


 


 


 


 


 


 


 


 


 


「スタイルシートの編集 その1」では基本となる部分


「その2」ではタイトル部分


「その3」ではサイドのメニュー部分をを見ていきます。


(今後、内容を分割する可能性があります)


 


====================


 


.sidemenu_left {<BR> margin: 0px 0px 0px 18px;<BR> width:168px;<BR>}


<BR>.sidemenu_right {<BR> margin: 0px 18px 0px 0px;<BR> width:168px;<BR>}


 


.contents_left {<BR> margin: 0px 0px 0px 18px;<BR>}


<BR>.contents_right {<BR> margin: 0px 18px 0px 0px;<BR>}


 


div.sidemenu_caption {<BR> background-color:#333333; ←メニューの見出しの背景色の指定<BR> color: #ffcc00; ←メニューの見出しの文字色の指定<BR> font-size: 12px;<BR> font-weight: bold;<BR> letter-spacing: 1px;<BR> margin: 15px 0px 5px 0px;<BR> padding: 4px 0px 4px 5px;<BR> text-align:left;<BR>}


<BR>div.sidemenu_caption_bg {<BR>}


<BR>div.sidemenu_body {<BR> color: #cccccc; ←メニューの文字色の指定<BR> font-size: 12px;<BR> font-weight: bold;<BR> line-height: 150%;<BR> letter-spacing: 1px;<BR> margin: 0px 0px 0px 0px;<BR> padding: 0px 5px 0px 5px;<BR> text-align:left;<BR>}


 


div.calendar_caption {<BR> background-color:#333333; ←カレンダーの見出しの背景色の指定<BR> color: #ffcc00; ←カレンダーの見出しの文字色の指定<BR> font-size: 12px;<BR> font-weight: bold;<BR> padding: 5px 0px 5px 0px;<BR> margin: 0px 0px 5px 0px;<BR> text-align:center;<BR>}


<BR>div.calendar_caption_bg {<BR>}


 


table.calendar {<BR> border-collapse: collapse;<BR>}


<BR>div.calender_bg {<BR>}


<BR>td.calender_head_bg {<BR> border:1px solid #333333;<BR> background-color:#000000; ←曜日部分の背景色の指定<BR> padding: 3px 0px 3px 0px;<BR>}


<BR>td.calender_body_bg {<BR> border:1px solid #333333;<BR> background-color:#000000; ←日付部分の背景色の指定<BR> padding: 5px 0px 5px 0px;<BR>}


<BR>td.calender_body_bg_mark {<BR> border:1px solid #333333;<BR> background-color:#666666; ←書き込みがあった日の背景色の指定<BR> padding: 5px 0px 5px 0px;<BR>}


<BR>.calender_weekday {<BR> color:#cccccc; ←平日(日付)の文字色の指定<BR> font-size: 12px;<BR>}


<BR>.calender_saturday {<BR> color:#0000cc; ←土曜(日付)の文字色の指定<BR> font-size: 12px;<BR>}


<BR>.calender_sunday {<BR> color:#cc0000; ←日曜(日付)の文字色の指定<BR> font-size: 12px;<BR>}


<BR>.calender_day_mark {<BR>}<BR>


====================


 


どこを変更すると、どの部分の色が変わるのか、などは改めて追記します。


 


中途半端ですが、時間が空いた時にチョコチョコ内容を書き換えていきますので、たまに覗いて下さい。


 


−−−−−−−−−−−−−−−−−−


1日1枚アメショーの写真


アメリカンショートヘアーの「タム」と「クー」


−−−−−−−−−−−−−−−−−−

スタイルシートの編集 その2 タイトル部分

1134045977816970.jpg「スタイルシートの編集 その1」では基本となる部分のみを取り上げたので、「その2」はタイトル部分を。


 


====================


<BR>.title {<BR> font-size: 24px;<BR> font-weight: bolder;<BR> color: #000000;<BR> padding: 60px 0px 0px 20px;<BR>}


 


タイトル部分(ここでは「1日1枚アメショーの写真」)の文字の大きさ、太さ、色などを指定。


<BR>.title a:link {<BR> color: #000000;<BR> text-decoration: none;<BR>}


 


タイトル部分は基本的にリンクされているので、リンク色の指定。上と同じ色にしておけば問題ないでしょう。


<BR>.title a:visited {<BR> color: #000000;<BR>}


 


訪問済みのリンク色の指定。


<BR>.title a:hover,a:active{<BR> color: #cc0000;<BR> text-decoration: underline;<BR> background: none;<BR>}


 


タイトル部分にポインタをかざした時のリンク色の指定。


 


.subtitle {<BR> font-size: 12px;<BR> color:#000000;<BR> font-weight: bold;<BR> padding: 5px 0px 0px 20px;<BR>}


 


タイトル下のサブタイトルの文字の大きさ、色、太さの指定。


 


.richtextbox p {<BR> margin:0px;<BR>}


 


省略 (-_-;)


 


.frame {<BR> border-top: #000000 0px solid;<BR> border-right: #333333 1px solid;<BR> border-left: #333333 1px solid;<BR> background-color: #000000;<BR>}


 


タイトル部分や記事部分を囲む一番大きな枠の背景色と枠線の色を指定。


 


.head {<BR> background-color:#000000;<BR>}


 


タイトル部分の背景色の指定。ここの色とタイトル色を一緒に考えないとタイトルが見えなくなってしまいます(涙)


 


.head {<BR> background-color:#000000;<BR>background-image: url("../_img/head.jpg");<BR>height:120px;<BR>}


 


ここでは、上記のように追加すると、オリジナルの画像を背景に設定できます。 


 


.foot {<BR>}


 


省略 (-_-;)


 


====================


 


というわけで、ここまででタイトル部分と大枠部分の色指定ができます。


 


−−−−−−−−−−−−−−−−−−


1日1枚アメショーの写真


アメリカンショートヘアーの「タム」と「クー」


−−−−−−−−−−−−−−−−−−

スタイルシートの編集 その1

1134045977816970.jpgカスタマイズテンプレート用のスタイルシートの編集方法を聞かれたので、簡単な解説をしていきたいと思います。


 


「オリジナルデザイン設定」→「スタイルシートを編集する」で、以下の内容が表示されます。


 


まずは基本となる部分から。


 


色は下記のカラーコードで指定します。


 


ブラック #000000


グレー #999999


シルバー #CCCCCC


ピンク #FF00FF


レッド #FF0000


オレンジ #FF9900


マルーン #990000


オリーブ #999900


グリーン #009900


ブルー #0000FF


ホワイト #FFFFFF


 


などなど。


6桁の数字を0〜Fの間で変更することで、中間色も指定できます。


 


====================


 


body {<BR> background-color:#FFFFFF; ←ベースの背景色<BR> color:#000000; ←ベースの文字色<BR> font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif;<BR> font-size: 12px;<BR>}


 


td,tr,p,ol,ul {<BR> font-size: 12px;<BR> color:#000000; ←これもベースの文字色。個人的には、上のbodyかこちらのどちらかで指定すればOKのような・・・気がします。<BR>}


 


a:link {<BR> color: #0000FF; ←リンク部分の文字色<BR> text-decoration: none;<BR>}


<BR>a:visited {<BR> color: #990099; ←訪問済みリンク部分の文字色<BR> text-decoration: none;<BR>}


<BR>a:hover,a:active{<BR> color: #FF0000; ←リンク部分にポインタをかざした時の文字色<BR> text-decoration: underline;<BR> background: none;<BR>}


 


form {<BR> padding-right: 0px;<BR> padding-left: 0px;<BR> padding-bottom: 0px;<BR> margin: 0px;<BR> padding-top: 0px;<BR>}


<BR>input {<BR> font-size:12px;<BR>}


<BR>textarea {<BR>color: #000000; ←コメントを書き込む部分の文字色<BR>background-color:#ffffff; ←コメントを書き込む部分の背景色 <BR>font-size:12px;<BR>}


 


<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">

blockquote {<BR> border-bottom:#000000 1px solid;<BR> border-top:   #000000 1px solid;<BR> border-right: #000000 6px solid;<BR> border-left:  #000000 1px solid; ←この4つはインデントを指定したときの枠線の色<BR> padding:1em;<BR>}


↑参考までにインデント指定してみました。


 


====================


 


こうやってイジることで色のや文字の大きさなどを変更することができます。


 


どこを変更すると、どの部分の色が変わるのか、などは改めて追記します。


 


中途半端ですが、時間が空いた時にチョコチョコ内容を書き換えていきますので、たまに覗いて下さい。


 


−−−−−−−−−−−−−−−−−−


1日1枚アメショーの写真


アメリカンショートヘアーの「タム」と「クー」


−−−−−−−−−−−−−−−−−−

テキスト形式でのテスト投稿


どういうわけか、ブログの設定をテキスト形式にして投稿すると、Aタグ(リンク)に「target="_blank"」が勝手に入る。
何とかしてほしい。
試しにリンクをはってみました
1日1枚アメショーの写真
ね? 新しいウインドウで開いちゃう!
HTML形式でリンクをはったときはならないんだけどね。
勝手にbrタグが入る

「ブログの設定」画面で「投稿フォーム形式」は「テキスト形式」です。
「記事の新規投稿」で、いつもの通り本文を書き込み、一度「確認する」をクリックして内容を確認すると、勝手にbrタグが入る。

追記
あ、そのまま投稿して、「記事の修正と削除」で開いたら直ってた。  [続きを読む]
PROFILE
● タム

シルバータビーのオス。2003年3月23日生まれ

● クー

ブラウンタビーのメス。2004年7月20日生まれ

● ななか

たまに登場。バレンタインデー生まれの女の子  

● ななか・タム・クーのママ

まれに登場。そろそろバイクに乗りたい

● へな


ホームページ
RECENT
RECENT COMMENTS
RECENT TRACKBACK
ARCHIVES
CATEGORY
LINK
MYALBUM
PR


2010年11月
-
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
-
-
-
-