EKKEN♂

このブログは http://ekken.blog1.fc2.com/ に移転しました

アドバンスでデザインを変える

2005-02-11 | goo BLOG
 またブログのデザイン変えちゃいました。
 シンプルグリーンテンプレです。

 
クリックで拡大します


 スタッフブログには、ときどき「アドバンスのカスタマイズ法がよく分からない」と言うコメントが寄せられます。
先日、アドバンスの申し込みをしました。
HTMLやCSSなどいろいろ変えられるということで
期待は膨らみますが、いまいちよく分かりません。

gooブログ スタッフブログ:教えて!gooチャレンジのPRコメント欄より

 gooブログのカスタマイズに関する説明(CSS(スタイルシート)の使いかたテンプレート編集機能)は、他所のブログサービスと比べても、非常に分かりやすいです。ここの説明を読んでも「何がなんだかサッパリ」という人は、カスタマイズに手を出さない方が賢明です。
 それでも「せっかくアドバンスにしたんだから、既存のテンプレートじゃなくて、ちょっと違ったものにしてみたい」と言う方はいらっしゃるでしょう。
 カスタマイズしている人のHTMLやCSSを参考にして変えるといかがでしょうか。
 ちなみに「シンプルグリーンテンプレ」、記事欄の丸いグリーン部分と、サイドバーのカテゴリなどの丸いグリーン(同じ色にしたつもりが、間違った・・・)部分は、CSSではなくHTMLで記述されているので、このデザインをgooブログフリー版で使うことが出来ません。また「緑色じゃなくて別の色が欲しい」と言う方は、このテキストファイルをパクって、色に関する部分だけ書き換えてください。
 丸い囲みを作るのは簡単です。テーブル素材屋さんを利用しましょう。なお、cssファイルは下記のようになります。

/* ページ全体の背景と文字と余白 */
BODY {background-color:#FFFFFF;
}
/* 引用の設定 */
blockquote {
background-color: #009900;
font-size: 86%;
color:#FFFFFF ;
margin-left:25px;
margin-right:5px;
margin-top:12px;
margin-bottom:8px;
border: 2px #00CC66 inset;
padding: 10px;
line-height: 160%;
}
q { color:#FFFFFF ;
font-size: 88%;
border-bottom-style:dashed;
border-bottom-width:1px;
border-color:#009933 ;
}
/* ■■強調色■■ */
/* 赤 */
strong {color:#FF3300;font-style:normal;font-weight: bold;}
/* 青 */
em {color:#0000FF;font-style:normal;font-weight: bold;}
/* マーカーオレンジ */
big { color: #990000;background-color:#FFFF99;font-style:normal;font-size :88%;}
/* マーカー黄色 */
u {color: #990000;background-color:#FFCC99;font-style:normal;text-decoration:none;font-size :88%;}
/* 背景同色 */
i {color:#ffffff;font-style:normal;}
/* 見出し */
h3 {
font-size: 103%;
font-weight: bolder;
border-top: 3px #B07200 dotted;
border-bottom: 1px #009933 dotted;
margin-bottom:1px;
}
h4 {
font-size: 98%;
font-weight: normal;
border-bottom: 1px #009933 dotted;
padding-left: 25px;
margin-bottom: 1px;

}



/* 全体の文字 */
TD {color :#006600;}
/* 全体のリンク飾り */
a:link {
color : #006633;
text-decoration : underline;
}
a:visited {
color : #006600;
}
a:hover {
color : #FFFFFF;
text-decoration : none;
background-color: #006600;
}
/* ページ全体共通指定 */
/* ブログのタイトル部上 */
.headerLight {background-color:#CCFFCC;}
/* ブログタイトル部等の区切り線 */
.rule {background-color:#009900;}
/* ブログのタイトル部下 */
.headerDark {background-color:#ffffff;}
/* ブログのタイトル */
.bTitle {
font-size: 30px;
font-weight: bold;

color:#006600;}
/* ブログタイトルのリンク) */
.bTitleLink { text-decoration: none;}
/* ブログの概要 */
.bDesc {
font-size: 12px;
color:#00CC00;}
/* カレンダー背景 */
.calendar {width: 150px;
}
/* カレンダー年月 */
.calMonth { font-weight: bold;}
/* カレンダー曜日 */
.calWeek { font-weight: bold;background-color:#99FF99; color:#FFEBCD;}
/* カレンダー日付 */
.calDay { color: #006600; background-color: #99FF99;}
/* カレンダー日付のリンク */
.calDayLinked {
font-weight: bold;
text-decoration: underline;
}
/* カレンダー前月、翌月 */
.calLink {
color: #006600;
font-size: 80%;
font-weight: bold;
text-decoration: underline;
}
/* カレンダー内の区切り */
.calRule {}
/* 左メニュー背景 */
#menu {
background-image:url();
background-color:##FFFFFF}
/* 左メニュー文字(各見出し含む) */
#menu TD {font-size:75%;line-height:140%;
color:#006600;}
/* 左メニューの各見出し */
.menuBar { font-weight: bold; padding: 2px; width: 25%; text-align: left; font-style: oblique;color:#006600;}
/* 左メニューのリスト背景 */
.menuBg { padding: 2px; width: 240px; text-align: center;
}
/* 過去の投稿(ENTRY ARCHIVE)のリスト */
.arcLink {color:color:#006600;}
/* 最新の投稿(RECENT ENTRY)のリスト */
.entLink {color:color:#006600;}
/* 最新のコメント(RECENT COMMENT)のリスト */
.comLink {color:color:#006600;text-decoration: none;}
/* 最新のコメント(RECENT COMMENT)のリスト:投稿者名 */
.comText {color:color:#006600;text-decoration: none;}
/* 最新のトラックバック(RECENT TRACKBACK)のリスト */
.traLink {color:color:#006600;text-decoration: none;}
/* 最新のトラックバック(RECENT TRACKBACK)リスト:ブログ名 */
.traText {color:color:#006600;}
/* カテゴリー(cotegory)のリスト */
.catLink {color:color:#990000;text-decoration: none;}
/* ブックマーク(book mark)のリンク:サイト名 */
.bmLink {text-decoration: none;}
/* ブックマーク(book mark)リスト:説明 */
.bmText {font-size: 90%;}
/* プロフィールの見出し */
.pfTitle { font-weight: bold;}
/* プロフィールの内容 */
.pfText {}

/* エントリーの背景 */
.entry {
background-color:#ffffff;

}
/* エントリータイトル */
.etTitle {font-size: 115%;font-weight: bold;
color:;
padding-left:5px;
 ;
}
/* エントリータイトルの飾り(<a href=# class=etTitleLink>で使用) */
.etTitleLink {text-decoration: none;}
/* エントリー本文 */
.etBody {
font-size: 88%;
line-height: 190%; text-align: left;
color:#006600;}
/* エントリーに表示されているカテゴリ */
.etCategory {
color: #009900;
font-size: 70%;
text-decoration: none;
}
/* エントリーに表示されている日時 */
.etTime {
color: #009900;
font-size: 70%;
text-decoration: none;
}
/* エントリーに表示されている「コメント()」 */
.etCommentLink {
font-size: 90%;
color: ;
}
/* エントリーに表示されているコメントの数字 */
.etCommentLink A {
font-size: 90%;
color: ;
}
/* エントリーに表示されているトラックバックの数字 */
.etTBLink {
font-size: 90%;
color: ;
}
/* エントリーに表示されているトラックバックの数字 */
.etTBLink A {
font-size: 90%;
color: ;
}
/* エントリーに表示されているカテゴリー、時間などの「/」や「|」 */
.etText {
font-size: 70%;
color: ;
}
/* 各エントリー、コメント、トラックバックの区切り線 */
.etRule {
background-color: #006600;
}

/* 前のページ、次のページ */
.etNextPrev {
font-size: 90%;
color: ;
}
/* エントリー内の画像位置 */
.thumbnail {
float: right;
}
/* --エントリー枠固定用(変更不可)-- */
.Posi{
text-align: left;
width: 100%;
}

/* コメントの背景(別ウィンドウ、エントリー下ともに) */
.comment {
background-color: ;
background-image: url();
background-repeat: ;
background-position: ;
}

/* エントリー下の「コメント」 */
.cmHeadText {
color: ;
font-size: 70%;
font-weight: bold;
}

/* エントリー下の「コメント」の囲み */
.cmHeadFrame {
background-color: ;
}

/* エントリー下「コメントを投稿する」、別ウィンドウ「コメント」「コメントを投稿する」 */
.cmText {
color: ;
font-size: 80%;
}

/* コメントタイトル(エントリー下、別ウィンドウともに) */
.cmTitle {
color: ;
font-size: 80%;
font-weight: bold;
}

/* コメント投稿者名(エントリー下、別ウィンドウともに) */
.cmName {
font-size: 80%;
}

/* コメント投稿日時(エントリー下、別ウィンドウともに) */
.cmDate {
color: ;
font-size: 75%;
}

/* コメント見出しの各タイトル(エントリー下、別ウィンドウともに)と規約導入の文字 */
.cmForm {
color: ;
font-size: 80%;
}

/* コメント本文(エントリー下、別ウィンドウともに) */
.cmBody {
background-color: #99FFCC;
font-size: 75%;
color:#006600 ;
margin-left:20px;
margin-right:5px;
margin-top:12px;
margin-bottom:8px;
border: 2px #009900 inset;
padding: 7px;
line-height: 150%;
}

/* トラックバックの背景(エントリー下、別ウィンドウともに) */
.trackback {
background-color: ;
background-image: url();
background-repeat: ;
background-position: ;
}

/* エントリー下の「この記事のTrackback Ping-URL」 */
.tbHeadText {
color: ;
font-size: 80%;
font-weight: bold;
}

/* エントリー下の「この記事のTrackback Ping-URL」の囲み */
.tbHeadFrame {
background-color: ;
}

/* 別ウィンドウの「この記事のTrackback Ping-URL」 */
.tbtrackback {
color: ;
font-size: 70%;
}

/* トラックバックURL(エントリー下、別ウィンドウともに) */
.tbUrl {
color: ;
font-size: 65%;
white-space: nowrap;
}

/* トラックバックされた方のサイト名(エントリー下、別ウィンドウともに) */
.tbBTitle {
color: ;
font-size: 80%;
}

/* トラックバックされた記事名(エントリー下、別ウィンドウともに) */
.tbETitle {
color: ;
font-size: 75%;
font-weight: bold;
}

/* トラックバック本文(エントリー下、別ウィンドウともに) */
.tbDesc {
color: ;
font-size: 80%;
line-height: 150%;
}