タグ編集手順はページの一番下です

2007年04月01日

2カラムのオリジナル

今回は2カラムの「SimpleWhite2」を使ってオリジナルに
してみましょう
先日の「遊んでワンコ」でどの部分が何処なのかを参考にして
見てもらえれば。。。
また、非表示部分は変更せずにそのまま残しています。
例として下
2カラムサンプル
変更した所は青文字
追加したところは赤文字で記載しました。
主な変更&追加した所は。。。
まず背景を画像にしました。
背景はPicture Managerを使って加工してます。
スクロールバーの色を追加・文字色の変更・の変更・
サイドバータイトル及び記事日付部分の枠変更などなど。。。

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-color:; 左色コード削除しました
background-attachment : fixed;
background-image:url(http://kkkkkkoo.a-thera.jp/bg/IMG_0227_1.JPG);
背景画像上
背景
scrollbar-3dlight-color : #fff;
 scrollbar-arrow-color : #fff;
 scrollbar-base-color : #000;
 scrollbar-face-color : #000;
scrollbar-highlight-color : #000;
 scrollbar-shadow-color : #fff;
}

スクロールバー参考ページは下
マイクロソフト

マイクロソフトの参考ページが?
TAG−INDEX
a { リンク部分
color:#6D6E71; 右 color:#000;に変更
}
a:hover{ マウスが乗った時
color:#000; 右 color:#fff;に変更
}
#container{
margin:0px auto 0px auto;
padding-right:0px;
width:740px; 右 幅を900px
padding-left:10px;
text-align:center;
color:#6D6E71; 右 color:#000;
}
#banner{
font-family:arial, Helvetica;
padding:0px 0px 0px 0px;
height:200px;
margin:0px auto 0px auto;
text-align:left;
}
h1 {
margin:0px 0px 8px 0px;
padding-top:30px;
font-weight:bolder;
font-size:18px;
}

h1 a{
color:#6D6E71; 右 color:#fff;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
h1 a:hover{
color:#6D6E71; 右 color:#000;
}

h2 {
font-weight:bolder;
font-family:arial, Helvetica;
}

h3 {
padding:16px 5px 13px 10px;
margin-bottom:0px;
font-weight:bolder;
font-family:arial, Helvetica;
border-top:1px solid #6D6E71; 左 削除しました
}

h3 a{
padding: 0px;
font-weight:bolder;
color:#6D6E71; 右 color:#FFF;
}
h3 a:hover{
color:#6D6E71; 右 color:#FF0000;
}
.description {
color:#6D6E71; 右 color:#FFF;
margin:0px 0px 0px 0px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}

.navi {
font-size:12px;
text-align:center;
margin-top:10px;
margin-bottom:10px;
}
#content {
margin-bottom:30px;
margin-left:30px;
float:left;
width:480px; 右 550px;
text-align:left;
}

.blog {
}

.blogbody {
}

.date{
font-size: 14px;
color:#6D6E71; 右 color:#00008B;
font-weight:bolder;
padding:5px 0px 5px 10px;
margin:10px 0px 0px 0px;
border-top:1px solid #6D6E71; 右 #FFE4B5;
border-left:1px solid #6D6E71; 右 #FFE4B5;
border-right:1px solid #6D6E71; 右 #FFE4B5;
border-bottom:1px solid #FFE4B5;
}

.title{
font-weight:bolder;
margin-top:0px;
}
.title a{
font-size: 12px; 右 14px;
border:none;
text-decoration: none;
}

.text{
font-size: 12px;
line-height:1.4em;
padding:5px 0px 5px 10px;
}
.posted{
color:#FF0000;
font-size: 10px;
text-align:right;
padding:5px 10px 20px 20px;
}

#links-left {
font-weight:normal;
width:220px;
float:left;
margin-top:10px;
text-align:left;
}
#links {
}

#calendar {
font-weight:normal;
margin-bottom:10px;
padding-bottom:8px;
}
#calendar table {
width:208px;
}
.calendarhead {
font-size:12px;
padding:5px 10px 5px 10px;
margin-top:0px;
border:1px solid #6D6E71; 左 削除しました
border-top:2px dotted #FFE4B5;
border-left:2px dotted #FFE4B5;
border-right:2px dotted #FFE4B5;
border-bottom:2px dotted #FFE4B5;
text-align:left;
}
.calendarday {
font-size:12px;
font-weight:normal;
background-repeat:no-repeat;
background-position:center;
padding:4px ;
color:#6D6E71; 右 color:#000;
}
.calendarday a{
color:#000;
}
.sidetitle {
font-size:12px;
padding:5px 10px 5px 10px;
margin-top:0px;
border:1px solid #6D6E71; 左 削除しました
border-top:2px dotted #FFE4B5;
border-left:2px dotted #FFE4B5;
border-right:2px dotted #FFE4B5;
border-bottom:2px dotted #FFE4B5;
}

.side {
font-size:12px;
font-weight:normal;
line-height:1.4em;
margin-bottom:10px;
padding:5px 10px 8px 10px;
}
.input-submit{
border:1px solid #FFE4B5;
background-color:#FFFE97; 左 検索文字の背景色
color+#000:
}
input
.side input{
border:1px solid #FFE4B5;
}


.powered {
padding-top:10px;
padding-bottom:10px;
text-align:center;
}

.syndicate {
font-size:10px;
line-height:140%;
text-align:center;
}
#comments {
margin-top:10px;
padding:7px 10px 7px 10px;
text-align:left;
}
#comments form{
padding-left:20px;
padding-bottom:10px;
}
#comments input{
max-width:200px;
border:1px solid #FFE4B5;
}
#comments textarea{
width:300px;
}
.comments-head{
font-weight:bolder;
font-size: 12px;
}
.comments-body {
font-size: 12px;
}
.comments-post{
font-size: 10px;
text-align:right;
padding:5px 10px 20px 0px;
}
#trackback {
margin-top:10px;
text-align:left;
font-size: 12px;
line-height:1.4em;
padding:7px 5px 7px 5px;
margin-bottom:10px;
border:1px solid #6D6E71;
}
#footer{
clear:left;
text-align:right;
}
.copyright{
font-size:10px;
width:100%;
text-align:center;
}
#diet-container{
border:1px solid #999;
padding:5px;
margin-bottom:5px;
}

.diet-title{
padding:2px 10px 2px 5px;
font-size:12px;
color:#FFFFFF;
width:90px;
margin-top:5px;
}

.diet-content{
padding-left:10px;font-size:12px;
}

#diet-foods{
padding-left:10px;font-size:12px;
}

.food-title{
width:20%;
clear:left;
float:left;
}

.food-content{
width:75%;
padding-top:10px;
}


こんなところで。。。
どうでしょう?
小鳥

【スタイルシートの最新記事】
ニックネーム kenny at 16:05| Comment(3) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
お久しぶりですわーい(嬉しい顔)
最近仔犬が産まれ、ブログデザインをリニューアルしようと思ったんですが…実は背景で躓きまして…たらーっ(汗)
背景に1枚の画像を用いて、尚且つ固定にしたいんですが、画像の大きさはどれくらいが妥当でしょうか??ちなみに背景は黒で行こうと思ってるんですが、何か気をつけることはありますか??
教えてください。お願いしますm(__)m
Posted by ロビン at 2008年09月18日 18:15
おひさしぶりですm(__)m

放置ブログ。。。

ブログリニュですねわーい(嬉しい顔)

背景に1枚の画像ってことですが、今の背景も画像を使ってられますね。

ロビンさんのブログのソースですが

background-color:#FFF;

背景固定下これを挿入です
background-attachment : fixed;

今現在の背景下
background-image:url("http://shiikuin-i.a-thera.jp/image/
new-haikei.gif");

画像の大きさですが。。。
ん〜私は1024×684にしてますが。
ファイルの大きさは確か300KBまででないとアップ出来ないので注意が必要ですね。

ブログ全体を黒にするなら文字の色とかも
考えないといけませんが。。。

説明下手で、すいませ〜んm(__)m
Posted by kenny at 2008年09月18日 20:27
回答ありがとうございますぴかぴか(新しい)
今は小さな画像を繰り返しで背景を作ってるわけですが、大きな画像1枚で出来ればスクロールしても絵が切れずにしたいんです。
背景黒だと、文字色も気を使いますよねあせあせ(飛び散る汗)今更気が付いたんですが、ウチの犬は黒いので黒い背景だと溶け込んでしまうんですよねあせあせ(飛び散る汗)というわけで考え直しです〜もうやだ〜(悲しい顔)
Posted by ロビン at 2008年09月18日 22:44
この記事へのトラックバックURL
http://a-thera.com/tb/786234
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
作業手順
マイブログ右デザイン右スタイルシート下
サンプルクリックで拡大

スタイルシートを選ぶと、現在使用している
テンプレートの
タイトルが表示されます。下
サンプル1

次に変更したいタイトル名をクリックします。
例として「Still life」を選びました。
サンプル2

上このようにタグが出てきますので
これを全て削除します。下
サンプル3

削除後、Still lifeの記事にあるタグをコピーします
マウスを乗せるだけでコピー可能です。
右クリックでコピー。
サンプル4
先ほど削除したテンプレートに貼り付けます。
貼り付け後、記事内容のように
http://*****.a-thera.jp/*****/*****.jpgのところを
アップされた画像のURLに変更後保存です。
サンプル5