趣味でいろんな事やってます。今はテンプレートやカスタマイズ方法 HTML CSSについて書いています。『完成!』とか『クリア!』と達成感を味わいたい。 そんなこんなで へたのヨコズキ 趣味紹介ページです。
 
 
 
 
 
 
スポンサーサイト
 
 
【--/--/-- --:--】
 
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
テンプレート修正しました
 
 
【2006/03/06 12:28】
 
 
本日の11時頃 テンプレート修正版をUPしました。
koju-hitsuji1(羊テンプレ3カラム) の修正箇所について
詳しく書いています。
ご自分で修正される方は 参考にしてください。

後に また変更かけました
申し訳ないです(´;ェ;`)ウゥ・・・

書き換えた箇所

○koju-hitsuji1(羊テンプレ3カラム)
HTMLでの修正箇所

一番上から HEAD部分を以下に変更
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head profile="http://www.w3.org/2003/g/data-view">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<%introduction>" />
<link href="<%css_link>" type="text/css" rel="stylesheet" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />
<title><%blog_name> <%sub_title></title>
</head>

CSSでの修正箇所
/* ブログのタイトルの設定 */において
div#branding {
width : 860px; /* コンテンツ幅に合わせて幅変更可能 */
height : 250px ;
}
となっていたものに paddingを加え
div#branding {
width : 860px; /* コンテンツ幅に合わせて幅変更可能 */
height : 250px ;
padding : 0px 0px 10px 0px;
}


タイトル部分の不要になったpaddingの数値を0pxに修正
div#t-left {
float : left; /* タイトル欄左を中心の左側に回り込ませる */
width : 85px; /* 幅は85pxに設定してください */
height : 250px ; /* 高さは250pxに設定してください */
align : center ;
padding : 0px 0px 0px 0px;
background-image : url(http://blog-imgs-18.fc2.com/h/e/t/hetanoyokozuki/h-back3_left.gif);
background-repeat : no-repeat;
background-position : center top;
}

div#t-right{
float : right; /* タイトル欄右を左と中心の右側に回り込ませる */
width : 85px; /* 幅は85pxに設定してください */
height : 250px ; /* 高さは250pxに設定してください */
align : center ;
padding : 0px 0px 0px 0px;
background-image : url(http://blog-imgs-18.fc2.com/h/e/t/hetanoyokozuki/h-back3_right.gif);
background-repeat : no-repeat;
background-position : center top;
}

.t-btm {
height : 45px ;
align : center ;
padding : 0px 0px 0px 0px;
background-image : url(http://blog-imgs-18.fc2.com/h/e/t/hetanoyokozuki/h-back3_btm.gif);
background-repeat : no-repeat;
background-position : right top;
}

サイトタイトルと説明文の位置指定するために使用していた
padding指定を 別のclassにて指定

paddingをすべて0pxに変更
.t-mdl {
width : 100%;
height : 110px ;
padding : 0px 0px 0px 0px;
background-color : #ffffff
}

.t-mdl で指定していたpaddingを.site_title.site_s にて指定
.site_title{
font-family: "Comic Sans MS",Tahoma,Verdana,Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro",Osaka,"MS Pゴシック";
padding : 20px 0px 0px 0px;
background-repeat : no-repeat;
background-position : center top;
text-align : center;
}
.site_title a:link {font-size: 20px; color: #666633; font-weight : bold;}
.site_title a:active {font-size: 20px; color: #999933; font-weight : bold;}
.site_title a:visited {font-size: 20px; color: #666633; font-weight : bold;}
.site_title a:hover {font-size: 20px; color: #999933; font-weight : bold;}

/* ブログの説明文の設定 */
.site_s{
padding : 0px 50px 0px 50px;
color : #666666;
font-family: Tahoma,Verdana,Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro",Osaka,"MS Pゴシック";
font-size : 12px ;
font-weight : normal;
line-height : 20px;
text-align : left;
}

スポンサーサイト

 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
共有テンプレート >> ブログ
 
 
 
▲TOP
 
 
 
 
この記事に対するコメント
 
 
 
 
 
▲TOP

 
 
 
 
この記事に対するコメント投稿
 
 















 
 
 
▲TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。