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%;
}