SLMaMe Blog TEMPLETE:カスタムヘッダ：横幅100%（レッド）

S	M	T	W	T	F	S
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

2007年11月01日

カスタムヘッダ：横幅100%（レッド）

シンプルな横幅100%のテンプレートです。
このままでもokですが、ヘッダの画像を自分の好みのものに変えて、遊んでほしいなと思っています。
ヘッダ画像の変更の仕方をアップしました。→コチラへ
実はまだwindowsで確認してないですが、たぶん、、、大丈夫かな？
[続きを読む]をクリックするとテンプレートが表示されます。

すみません。今日windowsのIE6.0で確認した所、レイアウト崩れまくってました！
先ほど修正済みです。
もし既に変更してくださった方居りましたら、お手数ですがもう一度変更し直してください。ごめんなさい＞＜。。
[横幅可変3カラム][横幅可変2カラム]

【カスタムヘッダ（横幅可変3カラム）】
最新版

＜デザインの適用手順＞
1.管理画面からブログの設定＞テンプレートをクリック
2.テンプレートを追加（またはテンプレートを再選択）し、「3カラム　シンプルレッド(幅100%)」を選択します。
3.表から編集[カスタマイズ]をクリック
4.スタイルシートのテキストエリアに表示されてる文字を消して、代わりに下のボックス内の文字を全てコピーし、上書きします。
5.登録ボタンを押す
6.表から「このテンプレートを使う」をクリックして、完了です。

スタイルシート：

@charset "UTF-8";

/*simple_ccustom-head_red 3colomn:requid*/

* {
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	text-decoration:none;
	font-size: 100%;
}
img {
	vertical-align:bottom;
	border:none;
}

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

body{
	font-family: font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック","sans-serif";
	font-size: 90%;_font-size: 80%;
	background-image:url(http://www.slmame.com/usr/tomoyo/cst-red_main.jpg);
	background-repeat:no-repeat;
	background-position:top right;
	color:#666;
}

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

ul.rss li	{
	border-right:#999 1px solid;
	display:inline;
	
	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:#000000;text-decoration:underline;}
a:link{color:#000000;text-decoration:underline;}
a:visited{color:#333333;text-decoration:underline;}
a:active{color:#cc000000;text-decoration:underline;}
a:hover{color:#cc000000;text-decoration:underline;}

a.acalendar{color:#000000;text-decoration:underline;}
a.acalendar:link{color:#000000;text-decoration:underline;}
a.acalendar:visited{color:#333333;text-decoration:underline;}
a.acalendar:active{color:#cc0000;text-decoration:underline;}
a.acalendar:hover{color:#cc0000;text-decoration:underline;}

a.acontinues{color:#000000;text-decoration:underline;}
a.acontinues:link{color:#000000;text-decoration:underline;}
a.acontinues:visited{color:#333333;text-decoration:underline;}
a.acontinues:active{color:#cc0000;text-decoration:underline;}
a.acontinues:hover{color:#cc0000;text-decoration:underline;}

a.amenu{color:#000000;text-decoration:underline;}
a.amenu:link{color:#000000;text-decoration:underline;}
a.amenu:visited{color:#333333;text-decoration:underline;}
a.amenu:active{color:#cc0000;text-decoration:underline;}
a.amenu:hover{color:#cc0000;text-decoration:underline;}

.header_scroll{
background: #ffffff url(/img/bg_head.gif) repeat-x;
background-position:bottom;
text-decoration:none;
color:#333333;

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{ 
	width:100%;
	margin:0px auto;
	text-align:left;
}

#banner,#subbanner{
	margin-right:24px;
	margin-left:24px;
	margin-bottom:24px;
	}

#banner a{color:#333;text-decoration:none;}
#banner a:link{color:#333;text-decoration:none;}
#banner a:visited{color:#333;text-decoration:none;}
#banner a:active{color:#cc0000;text-decoration:none;}
#banner a:hover{color:#cc0000;text-decoration:none;}

#subbanner a{color:#333;text-decoration:none;}
#subbanner a:link{color:#333;text-decoration:none;}
#subbanner a:visited{color:#333;text-decoration:none;}
#subbanner a:active{color:#cc0000;text-decoration:underline;}
#subbanner a:hover{color:#cc0000;text-decoration:underline;}

h1,h2,h3{
}

.blogtitle{
	font-size:130%;
	font-weight:bold;
	text-align:left;
	padding-top:180px;
	color:#333333;
	border-bottom:1px solid #cc0000;
	
}

.description{
	color:#333333;	
	text-align:left;
	font-size:90%;
	padding-top:3px;
}

#content{
	margin:0px 240px;
	padding:0;
	_background-color:#FFFFFF;
}

#links{
	width:190px;
	float:left;
	text-align:left;
	padding-left:24px; 
	overflow:hidden;
	_background-color:#FFFFFF;
}

html>body #links {background: url("http://www.slmame.com/usr/tomoyo/cst-alpha.png") repeat; }

#links2{
	width:190px;
	float:right;
	text-align:left;
	padding-right:24px;
	overflow:hidden;
	_background-color:#FFFFFF;
}
html>body #links2 {background: url("http://www.slmame.com/usr/tomoyo/cst-alpha.png") repeat; }

#footer{
	clear:both;
}

#copyright{
	background-image:url(http://www.slmame.com/usr/tomoyo/cst-red_foot.gif);
	background-repeat:repeat-x;
	height:24px;
	font-size:80%;
	font-weight:bold;
	color:#fff;
	line-height:16px;
	text-align:center;
	margin-left:24px;
	margin-right:24px;
}

.blog{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://www.slmame.com/usr/tomoyo/cst-alpha.png');
}
html>body .blog {background: url("http://www.slmame.com/usr/tomoyo/cst-alpha.png") repeat; }

.date{
	font-size:70%;
}

.blogbody{
padding-bottom:24px;
}

.title{
	color:#000;
	font-weight:bold;
}

.main{
	padding:15px 0px 15px 0px;
	height:100%;
	width:95%;
	overflow:auto;
    line-height:135%;
}

.main img{
	margin-top:10px;
	margin-bottom:10px;
	margin-right:10px;
}

.main-continues{
	font-size:80%;
	display:block;
	padding-top:12px;
	text-align:right;
}

.posted{
	color:#000;
	font-size:80%;
	text-align:right;
	width:95%;
}

a.aposted{color:#000;text-decoration:underline;}
a.aposted:link{color:#000;text-decoration:underline;}
a.aposted:visited{color:#333;text-decoration:underline;}
a.aposted:active{color:#cc0000;text-decoration:underline;}
a.aposted:hover{color:#cc0000;text-decoration:underline;}

.menu{
	color:#000;
	text-align:right;
}

.comments-head{
	color:#000;
	font-size:80%;
	font-weight:bold;
	padding:0px 0px 0px 0px;
	height:10px;
}

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

.comments-post{
	color:#000;
	font-size:80%;
	text-align:right;
	margin:0px 0px 25px 0px;
}

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

#trackback-text{
	width:250px;
	border:1px solid #8c0000;
}

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

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

a.atrackback-post{color:#000;text-decoration:underline;font-weight:bold;}
a.atrackback-post:link{color:#000;text-decoration:underline;font-weight:bold;}
a.atrackback-post:visited{color:#333;text-decoration:underline;font-weight:bold;}
a.atrackback-post:active{color:#cc0000;text-decoration:underline;font-weight:bold;}
a.atrackback-post:hover{color:cc0000;text-decoration:underline;font-weight:bold;}

table.form td {
	padding:3px;
	}

label{
	font-size:80%;
	font-weight:bold;
}

#author{
	width:200px;
	border:1px solid #333;
}
#email{
	width:200px;
	border:1px solid #333;
}
#url{
	width:200px;
	border:1px solid #333;
}
#text{
	width:240px;
	height:150px;
	border:1px solid #333;
}
.pagetop{
	font-size:80%;
	text-align:right;
	margin:24px 0px;
}
.calender {
	padding-bottom:24px;
	width:190px;
	}

.calendarhead{	
	font-weight:bold;
	letter-spacing:2px;
	padding-bottom:6px;
	text-align:center;
}

.calendartable{
	margin:0px auto 10px auto;
	padding:0px;
	width:160px;
	empty-cells:show;
	border-spacing:0px;
	border-collapse:collapse;
}

.calendarweek{
	color:#fff;
	font-weight:bold;
	background-image:url(http://www.slmame.com/usr/tomoyo/cst_cal_1.gif);
	background-repeat:no-repeat;
	background-position:left;
	height:17px;
	width:16px;
	display:block;
	font-size:70%;
	line-height:17px;
	margin-bottom:6px;
}

.calendarwd{
	text-align:center;	
}
.calendard{
	text-align:center;
}
.calendar{
	letter-spacing:0px;
	background-image:url(http://www.slmame.com/usr/tomoyo/cst_cal_2.gif);
	background-repeat:no-repeat;
	background-position:left;
	height:17px;
	width:16px;
	display:block;
	font-size:70%;
	line-height:17px;
	margin-bottom:6px;
}

.sidetitle{
	background-image:url(http://www.slmame.com/usr/tomoyo/cst-red_arrow_1.gif);
	background-repeat:no-repeat;
	background-position:0 3px;
	color:#333;
	letter-spacing:2px;
	padding-left:18px;
	border-bottom:1px solid #D0D0D0;
	margin-bottom:3px;
}

.side{	
	line-height:140%;
	padding-bottom:12px;
}
.side .text{
	width:80px;
}
a.aside{color:#666;text-decoration:none;}
a.aside:link{color:#666;text-decoration:none;}
a.aside:visited{color:#666;text-decoration:none;}
a.aside:active{color:#cc0000;text-decoration:none;}
a.aside:hover{color:#cc0000;text-decoration:none;}

a.arss{color:#666;text-decoration:none;}
a.arss:link{color:#666;text-decoration:none;}
a.arss:visited{color:#666;text-decoration:none;}
a.arss:active{color:#cc0000;text-decoration:none;}
a.arss:hover{color:#cc0000;text-decoration:none;}

.photo{
	text-align:center;
}
.photo img{
	width:120px;
}

.nickname{
	color:#2b5695;
	
	font-weight:bold;
	margin:10px 0px;
}

.message{
	
}

.quotetable{
}

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

.blogtimes{
	margin:0px 0px 16px 0px;
	text-align:center;
}

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

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

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

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:underline;}
a.adld:link{text-decoration:underline;}
a.adld:visited{text-decoration:underline;}
a.adld:active{text-decoration:underline;}
a.adld:hover{text-decoration:underline;}

body.ad{
	background:#f7p39f;
}

【カスタムヘッダ（横幅可変2カラム）】

＜デザインの適用手順＞
1.管理画面からブログの設定＞テンプレートをクリック
2.テンプレートを追加（またはテンプレートを再選択）し、「シンプルレッド(幅100%)」を選択します。
3.表から編集[カスタマイズ]をクリック
4.スタイルシートのテキストエリアに表示されてる文字を消して、代わりに下のボックス内の文字を全てコピーし、上書きします。
5.登録ボタンを押す
6.表から「このテンプレートを使う」をクリックして、完了です。

スタイルシート：

@charset "UTF-8";

/*simple_ccustom-head_red 2colomn:requid*/

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

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

ul.rss li	{
	border-right:#999 1px solid;
	display:inline;
	
	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;
}

.header_scroll{
background: #ffffff url(/img/bg_head.gif) repeat-x;
background-position:bottom;
text-decoration:none;
color:#333333;

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{ 
	width:100%;
	margin:0px auto;
	text-align:left;
}

#banner,#subbanner{
	margin-right:24px;
	margin-left:24px;
	margin-bottom:24px;
	}

h1,h2,h3{
}

.blogtitle{
	font-size:130%;
	font-weight:bold;
	text-align:left;
	padding-top:180px;
	color:#333333;
	border-bottom:1px solid #cc0000;
	
}

.description{
	color:#333333;	
	text-align:left;
	font-size:90%;
	padding-top:3px;
}

#content{
	margin:0px 24px 0 240px;
	padding:0;
	_background-color:#FFFFFF;
}

#links{
	width:190px;
	float:left;
	text-align:left;
	padding-left:24px; 
	overflow:hidden;
	_background-color:#FFFFFF;
}

html>body #links {background: url("http://www.slmame.com/usr/tomoyo/cst-alpha.png") repeat; }

#footer{
	clear:both;
}

.date{
	font-size:70%;
}

.blogbody{
padding-bottom:24px;
}

.title{
	color:#000;
	font-weight:bold;
}

.main{
	padding:15px 0px 15px 0px;
	height:100%;
	width:95%;
	overflow:auto;
    line-height:135%;
}

.main img{
	margin-top:10px;
	margin-bottom:10px;
	margin-right:10px;
}

.main-continues{
	font-size:80%;
	display:block;
	padding-top:12px;
	text-align:right;
}

.posted{
	color:#000;
	font-size:80%;
	text-align:right;
	width:95%;
}

.menu{
	color:#000;
	text-align:right;
}

.comments-head{
	color:#000;
	font-size:80%;
	font-weight:bold;
	padding:0px 0px 0px 0px;
	height:10px;
}

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

.comments-post{
	color:#000;
	font-size:80%;
	text-align:right;
	margin:0px 0px 25px 0px;
}

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

#trackback-text{
	width:250px;
	border:1px solid #8c0000;
}

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

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

table.form td {
	padding:3px;
	}

label{
	font-size:80%;
	font-weight:bold;
}

.calendarhead{	
	font-weight:bold;
	letter-spacing:2px;
	padding-bottom:6px;
	text-align:center;
}

.calendartable{
	margin:0px auto 10px auto;
	padding:0px;
	width:160px;
	empty-cells:show;
	border-spacing:0px;
	border-collapse:collapse;
}

.photo{
	text-align:center;
}
.photo img{
	width:120px;
}

.nickname{
	color:#2b5695;
	
	font-weight:bold;
	margin:10px 0px;
}

.message{
	
}

.quotetable{
}

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

.blogtimes{
	margin:0px 0px 16px 0px;
	text-align:center;
}

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

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

body.ad{
	background:#f7p39f;
}

同じカテゴリー（シンプル）の記事画像

同じカテゴリー（シンプル）の記事

スラッシュ（オレンジ）
スラッシュ（グリーン）

Posted by Tomoyo at 00:12│Comments(16) │シンプル

この記事へのコメント

はじめまして。
テンプレート使ってみました。とっても素敵で気に入っています＾＾
TOP画像をうまく作れなかったので、今は無しにしていますが、ゆっくり作ってみようと思っています。
ありがとうございました。

Posted by kojimas at 2007年11月05日 17:22

さっそく、使わせてもらいましたｗ
わかりやすくて助かりました><

Posted by Aika at 2007年11月05日 21:18

＞kojimasさん
ありがと〜♪うんうん、メイン画像楽しんで自分好みの作ってみてね。

＞Aikaさん
よかった〜。わかりやすかったですか？
別ページで、スクリーンショットで説明したページ作った方がいいかなぁ〜とか、思いつつ面倒でww

Posted by Tomoyo at 2007年11月06日 09:35

あらら、コメント二重投稿してしまってました＾＾；
お手数ですけど、消していただけますか？

メイン画像、背景の白に合わせるのが難しい。。。photoshopの技術があれば＞＜

Posted by kojimas at 2007年11月06日 10:15

＞kojimasさん
コメント一つ消させていただきましたmm
そうですね〜。白は奥が深いですね＞＜余白を自在に操ることができれば、デザインを制したようなもんです。
でも、すごくかっこいいのが出来そうで、楽しみです♪

Posted by Tomoyo Tomoyo

at 2007年11月06日 10:55

初めまして
ｿﾗﾏﾒのblog立ち上げに伴いﾃﾝﾌﾟﾚｰﾄを
探していたのですが、Tomoyoさんの作成されたﾃﾝﾌﾟﾚが気にいりお借りする事にしました
とても素敵で気にいってます♡
まだ工事中ですが頑張って仕上げたいと思っております
ありがとうございました！

Posted by OZ*Sugar at 2007年11月08日 14:02

度々失礼します
ｱﾄﾞﾚｽが此方に変更になりました
Tomoyoさんの作られた素敵なﾃﾞｻﾞｲﾝを崩さない様頑張ります(ﾉд`)

Posted by OZ♡制作一家

at 2007年11月08日 23:08

＞OZさん
わぁ〜！！嬉しいです♪ありがと〜〜
スタイルシートはレイアウトに、知識だけじゃなくてちょっとコツがいるので、なかなか難しいですが頑張ってくださいね！
シンプル系は特にデザインカスタマイズがしやすいので、色々挑戦してもらえると、私も楽しいです＾＾

Posted by Tomoyo at 2007年11月09日 09:54

こんにちは＾＾
こちらのテンプレ素敵だったので、使用してます♪次はヘッダ画像の変更にチャレンジしてみたいと思います＾＾

Posted by Emika at 2007年11月15日 11:34

＞Erikaさん
ありがとうございます＾＾
カスタマイズは楽しいので、ヘッダ画像制作も頑張ってみてくださいね〜

Posted by Tomoyo at 2007年11月15日 17:15

はじめまして＾＾
テンプレ使わせてもらいます♪
カスタマイズ自分でしてみたかったんですが、
一からつくるのがなかなか難しかったのですごく助かります★

Posted by Ａｙａ at 2007年12月20日 09:31

自分では何もできないくせに
どうにかしたくて、たどりつきましたw

ありがたく使わせていただきます!!

Posted by めみ at 2007年12月21日 15:21

はじめましてっ。。
ﾃﾝﾌﾟﾚ使わせていただきます☆

Posted by kinocco kinocco

at 2008年01月09日 11:10

＞Ayaさん
＞めみさん
＞kinoccoさん
みなさんありがとーー☆
ブログデザインをかっこ良くして、更新するのが楽しくなっちゃってくださいね！
自分は全然更新してないけど（笑）

Posted by Tomoyo at 2008年01月11日 11:06

初めまして┏○ﾍﾟｺ
ブログのカスタマイズに苦戦していてこちらのブログに辿りつきました！
探していた通りのテンプレでもう感動です(´；ω；｀)
早速使わせて頂きました！
どうも有難うございました(*´∀｀)

Posted by Cri-Cri Cri-Cri

at 2009年03月22日 17:04

はじめまして、テンプレート早速使わせていただきました＾＾

ありまとうございます＾＾

めんどくさくてかすたまいずしてなかったのですが、とても簡単に出来て驚きです＾＾

ありまとうございました＾＾

Posted by Hapiko Hapiko

at 2009年12月16日 19:51

名前:
メール:
URL:
情報を記憶:
コメント:
	＜ご注意＞書き込まれた内容は公開され、ブログの持ち主だけが削除できます。確認せずに書込

このページの上へ▲