ソラマメブログ

ブログテンプレート2

先日公開したスタイルシートを使ってくださってる方をぽろぽろと見かけてこっそり喜んでいるLabであります。その直後「男の人でも使えそうな色違いがほしい」というリクエストメッセも頂いていたのですがなんだかんだで遅くなってしまいました。まだ見ていらっしゃいましたらこちらをお使いくださいです。
ブログテンプレート2

無難に青系いっときました。
以下簡単な注意事項(前回のものコピペ)。

元々のテンプレートは保存しておくことをお勧めします。簡単なので誰でもできると思いますが自己責任ということでよろちく。
基盤はソラマメで用意されている2カラムのシンプルテンプレート(幅固定バージョン)です。
3カラムや幅100%タイプのものには使えません。
サンプル:http://labtemp.slmame.com/

スタイルシートは追記に記載してありますがメモ帳などに一旦コピペして140行目にタイトル画像のURLを記入してください。(行数表示のあるエディタを使用すると楽ちん)
タイトル画像は縦210ピクセル×横740ピクセル。これ以上大きければとりあえずは問題ないはず。
またタイトル画像の色合いによってはブログタイトル部分の文字が見えにくくなる可能性があるので144行目から148行目のブログタイトルの文字色、164行目のブログ説明文文字色のカラーコードを変更してください。

後は以下の手順です。

1・シンプルテンプレート 2カラムの中から適当に選択(色はどれでもいいです)
2・テンプレートのカスタマイズ画面から「スタイルシート」の部分のみをタイトルURL部分を修正したものと丸々入れ替える。
3・テンプレートを反映させる。

これだけです。

CSSの知識のある方なら色変更は簡単だと思うのでがつがつ変えてください。とゆか知識ある人はこんなしょぼいの使わないか・・・。

あ、あと本文中の画像にはスタイルシートで枠がつくようにしているので画像の横幅は490ピクセル以下にしたほうがキレイだと思います。はい。


@charset "UTF-8";

*{
font-family :"verdana","helvetica","osaka","MS Pゴシック",ans-serif;
}

textarea,select,input {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","MS Pゴシック","sans-serif";
}

body{
color :#222222;
margin :0px;
background :#A9AFAF;/*背景色を指定*/
text-align:center;
}


form{
margin :0px;
padding :0px;
}

table.form{
margin :25px 0px 0px 13px;
}

img{
border :none;
}

ul.rss{
margin :0px;
padding :0px;
width :100%;
text-align :center;
}

ul.rss li {
border-right :#999 1px solid;
display :inline;
font-size :12px;
font-style :normal;
font-weight :bold;
letter-spacing :0.2px;
margin-right :0.3em;
padding-right :0.5em;
padding-left :0.2em;
}

ul.rss a:link {
color :#333333;
text-decoration :none;
}

ul.rss a:visited {
color :#333333;
text-decoration :none;
}

ul.rss a:hover {
color :#999999;
text-decoration :none;
}

ul.rss a:active {
color :#333333;
text-decoration :none;
}

a {color:#272E3F;text-decoration:none;}
a:link {color:#272E3F;text-decoration:none;}
a:visited {color:#272E3F;text-decoration:none;}
a:active {color:#272E3F;text-decoration:none;}
a:hover {color:#222222;text-decoration:none;}

a.acalendar {color:#DB6D00;text-decoration:none;}
a.acalendar:link {color:#DB6D00;text-decoration:none;}
a.acalendar:visited {color:#DB6D00;text-decoration:none;}
a.acalendar:active {color:#DB6D00;text-decoration:none;}
a.acalendar:hover {color:#5A5F3A;text-decoration:none;}

a.acontinues {color:#5A5F3A;text-decoration:none;}
a.acontinues:link {color:#5A5F3A;text-decoration:none;}
a.acontinues:visited {color:#5A5F3A;text-decoration:none;}
a.acontinues:active {color:#5A5F3A;text-decoration:none;}
a.acontinues:hover {color:#DB6D00;text-decoration:none;}

a.amenu {color:#5A5F3A;text-decoration:none;}
a.amenu:link {color:#5A5F3A;text-decoration:none;}
a.amenu:visited {color:#5A5F3A;text-decoration:none;}
a.amenu:active {color:#5A5F3A0;text-decoration:none;}
a.amenu:hover {color:#DB6D00;text-decoration:none;}

.header_scroll{/*ヘッダ広告*/
background: #ffffff url(/img/bg_head.gif) repeat-x;
background-position:bottom;
text-decoration:none;
color:#333333;
font-size:12px;
margin:0px;
letter-spacing:2px;
padding:0px 0px 3px 5px;
}

.header_scroll a:link {
font-size: 12px;
color: #333333;
letter-spacing:2px;
text-decoration:none;
}

.header_scroll a:visited {
font-size: 12px;
color: #333333;
letter-spacing:2px;
text-decoration:none;
}

.header_scroll a:hover {
font-size: 12px;
color: #333333;
letter-spacing:2px;
}

.header_scroll a:active {
font-size: 12px;
color: #333333;
letter-spacing:2px;
text-decoration:none;
}

#container{ font-size:12px;
width :740px;
background-color :#FFFFFF;
margin :0px auto;
text-align:left;
}

#banner,#subbanner{
background :#272E3F url(http://) right bottom;/*タイトル画像をURLで指定(740px×210px以上のサイズ)*/
padding :0px 10px 10px 10px; :0px 10px 10px 10px; }

#banner a {color:#575E5E;text-decoration:none;}/*タイトル画像の色によっては変更が必要*/
#banner a:link {color:#575E5E;text-decoration:none;}/*タイトル画像の色によっては変更が必要*/
#banner a:visited {color:#575E5E;text-decoration:none;}/*タイトル画像の色によっては変更が必要*/
#banner a:active {color:#575E5E;text-decoration:none;}/*タイトル画像の色によっては変更が必要*/
#banner a:hover {color:#D0D2D2;text-decoration:none;}/*タイトル画像の色によっては変更が必要*/

h1,h2,h3{
margin :0px;
padding :0px;
}

.blogtitle{
font-size :18px;
font-weight :bold;
padding :10px 0px 0px 10px;
text-align :left;
letter-spacing :1px;
}

.description{
color :#575E5E;/*ブログ説明文文字色・タイトル画像の色によっては変更が必要*/
font-size :10px;
padding :4px 0px 150px 35px;
text-align :left;
letter-spacing :1px;
}


#content{
width:545px;
float:right;
background-color :#ffffff;
}

#links{
width:185px;
float:left;
text-align :left;
margin :0px 0px 0px 0px;
padding :20px 0px 0px 10px;
background-color :#ffffff;
overflow:hidden;
}


#footer{
clear :both;
}

#copyright{/*最下段Copyrightの部分*/
background :#272E3F bottom;/*背景色*/
width :100%;
height :16px;
font-size :10px;
font-weight :bold;
color :#fff;/*文字色*/
margin :0px;
padding :0px;
line-height :16px;
text-align :center;
}

.blog{
margin :20px 10px 20px 15px;
}

.date{
border-top :3px solid #272E3F;
background :#FFFFFF;
background-position :1px 1px;
color :#272E3F;
font-size :12px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
}

.blogbody{
background :#fff;
margin :0px 0px 10px 0px;
padding :8px;
}

.title{
background :#A9AFAF;
color :#FFFFFF;
font-size :12px;
font-weight :bold;
height :10px;
padding :3px 3px 3px 3px;
}

.main{
width :502px;
color :#222222;
font-size :11px;
padding :15px 0px 15px 0px;
overflow:auto;
line-height:135%;
}

.main a:link {color:#272E3F;text-decoration:underline;}
.main a:visited {color:#272E3F;text-decoration:underline;}
.main a:active {color:#272E3F;text-decoration:underline;}
.main a:hover {color:#D7683E;text-decoration:none;}

.main img{
margin:5px;
padding:5px;
border-top:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
background-color:#F6F6F6;
}


.main-continues{
font-size :11px;
}

.posted{
color :#222;
font-size :10px;
text-align :right;
margin :0px 0px 25px 0px;
}

a.aposted {color:#272E3F;text-decoration:none;font-weight:bold;font-size:10px;}
a.aposted:link {color:#272E3F;text-decoration:none;font-weight:bold;}
a.aposted:visited {color:#272E3F;text-decoration:none;font-weight:bold;}
a.aposted:active {color:#272E3F;text-decoration:none;font-weight:bold;}
a.aposted:hover {color:#D7683E;text-decoration:none;font-weight:bold;}

.menu{
color :#222;
font-size :11px;
text-align :right;
}

.comments-head{
color :#222;
font-size :11px;
font-weight :bold;
padding :0px 0px 0px 0px;
height:10px;
}

.comments-body{
font-size :11px;
line-height :135%;
margin :20px 0px 15px 13px;
}

.comments-post{
color :#222;
font-size :11px;
text-align :right;
margin :0px 0px 25px 0px;
}

.trackback-url{
color :#691815;
font-size :11px;
font-weight :bold;
margin :20px 0px 15px 13px;
}

.trackback-body{
font-size :10px;
line-height :135%;
margin :20px 0px 15px 13px;
}

.trackback-post{
color :#222;
font-size :10px;
text-align :right;
margin :0px 0px 25px 0px;
font-weight :bold;
}

a.atrackback-post {color:#272E3F;text-decoration:none;font-weight:bold;}
a.atrackback-post:link {color:#272E3F;text-decoration:none;font-weight:bold;}
a.atrackback-post:visited {color:#272E3F;text-decoration:none;font-weight:bold;}
a.atrackback-post:active {color:#272E3F;text-decoration:none;font-weight:bold;}
a.atrackback-post:hover {color:#D7683E;text-decoration:none;font-weight:bold;}

label{
font-size :10px;
font-weight :bold;
}

#author{
width :200px;
border :1px solid #222;
}
#email{
width :200px;
border :1px solid #222;
}
#url{
width :200px;
border :1px solid #222;
}
#text{ font-size:12px;
width :400px;
height :200px;
border :1px solid #222;
}
.pagetop{
font-size :11px;
text-align :right;
margin :0px 0px 25px 0px;
}
.calendarhead{
border-top : 1px none #666;
border-left : 1px none #666;
border-right : 1px none #666;
color:#333;
font-size:12px;
font-weight:bold;
letter-spacing:2px;
padding:0px 0px 2px 0px;
text-align:left;
padding:3px 0px 3px 15px;

}
.calendartable{
margin:0px auto 10px auto;
width:183px;
text-align:left;
background:#fff;
border-top:1px solid #5C5243;
border-left:1px solid #5C5243;
border-right:1px solid #5C5243;
border-bottom : 1px solid #5C5243;
border-spacing:0px;
}

.calendartable a:link {color:#DB6D00;text-decoration:none;}
.calendartable a:visited {color:#DB6D00;text-decoration:none;}
.calendartable a:active {color:#DB6D00;text-decoration:none;}
.calendartable a:hover {color:#5A5F3A;text-decoration:none;}

.calendarweek{
color:#222;
font-size:10px;
font-weight: bold;
}


.calendarwd{
/* border-left : 1px solid #222;
border-right : 1px solid #222;*/
background:#FFFFFF;
background-position:-2px 0px;
color :#fff;
font-size:10px;
font-weight:bold;
letter-spacing : 2px;
padding:2px 0px 2px 5px;
}
.calendard{
empty-cells:show;
border-top:1px solid #efefef;
border-right:1px solid #efefef;
text-align: center;
}
.calender{
font-size:10px;
padding:2px 2px;

}


.sidetitle{
border-top :3px solid #272E3F;
background :#FFFFFF top left;
background-position :1px 1px;
color :#272E3F;
font-size :11px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
width:178px;
}

.side{
font-size :11px;
line-height :140%;
margin :0px 0px 10px 0px;
padding :8px;
border-left :1px solid #FFFFFF;
border-right :1px solid #FFFFFF;
border-bottom :1px solid #FFFFFF;
width:167px;
}

a.aside {color:#272E3F;text-decoration:none;}
a.aside:link {color:#272E3F;text-decoration:none;}
a.aside:visited {color:#272E3F;text-decoration:none;}
a.aside:active {color:#272E3F;text-decoration:none;}
a.aside:hover {color:#D7683E;text-decoration:none;}

a.arss {color:#5A5F3A;text-decoration:none;}
a.arss:link {color:#5A5F3A;text-decoration:none;}
a.arss:visited {color:#5A5F3A;text-decoration:none;}
a.arss:active {color:#5A5F3A;text-decoration:none;}
a.arss:hover {color:#DB6D00;text-decoration:none;}

.photo{
text-align :center;
}

.nickname{
color :#272E3F;

font-weight :bold;
margin :10px 0px;
}

.message{

}

.quotetable{
}

.quote{
color :#000;
font-size :12px;
padding :1px;
}

.blogtimes{

margin :0px 0px 16px 0px;
text-align :center;
}

.powered{
text-align :center;
margin :0px 0px 10px 0px;
}

.syndicate{
font-size :12px;
text-align :center;
}
.checkers{
font-size :12px;
margin-top:10px;
}

a.adtitle {font-weight:bold;text-decoration:none;}
a.adtitle:link {font-weight:bold;text-decoration:none;}
a.adtitle:visited {font-weight:bold;text-decoration:none;}
a.adtitle:active {font-weight:bold;text-decoration:none;}
a.adtitle:hover {font-weight:bold;text-decoration:none;}

a.addescription {color:black;text-decoration:none;}
a.addescription:link {color:black;text-decoration:none;}
a.addescription:visited {color:black;text-decoration:none;}
a.addescription:active {color:black;text-decoration:none;}
a.addescription:hover {color:black;text-decoration:none;}

a.adurl {color:#0000FF;text-decoration:none;}
a.adurl:link {color:#0000FF;text-decoration:none;}
a.adurl:visited {color:#0000FF;text-decoration:none;}
a.adurl:active {color:#0000FF;text-decoration:none;}
a.adurl:hover {color:#0000FF;text-decoration:none;}

a.adld {text-decoration:none;}
a.adld:link {text-decoration:none;}
a.adld:visited {text-decoration:none;}
a.adld:active {text-decoration:none;}
a.adld:hover {text-decoration:none;}

body.ad{
background :#f7p39f;
}

blockquote {
border-left :3px solid #A9AFAF;
background :#D0D2D2;
padding: 7px;
color:#222;
}


同じカテゴリー(番外編)の記事画像
ブログテンプレート
同じカテゴリー(番外編)の記事
 ブログテンプレート (2008-02-10 12:43)

Posted by Lab at 2008年02月29日08:33│Comments(6)番外編
この記事へのコメント
いただきましたw
Posted by tama at 2008年03月03日 05:03
どうせならどピンクで新たにつくろうか?w
Posted by LabLab at 2008年03月07日 09:38
アワウィ水色にしましたw
ピンクはもういからwww
あ、DEMODOさんとことかみててブログパーツっておもろいなーおもって、
3個配置ングしてみた^^
もっと追加したいんだけど、できるんかなぁ~?(ちょいフリ)
Posted by tama助 at 2008年03月07日 15:15
追加は簡単にできると思うよー。
でもあんまり付けすぎるとページ開く時重くなるので注意ます!
Posted by LabLab at 2008年03月08日 00:30
ナルホドッ!
では手ほどき夜艪師苦ス♪
Posted by TAMATAMA at 2008年03月09日 04:16
はじめまして。

先日ブログをはじめて、テンプレがどーにかならないものか
悩んでいたところ、こちらの記事を拝見しました。
こういうことには全く疎い私ですが、とりあえず形になったの?w
わかりませんが。
試行錯誤しつつ、手を加えていきます。

ありがとうございました^^
Posted by NanaoNanao at 2009年04月21日 15:22
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。