４月１９日現在の、ここのスキンＣＳＳです。（基本は『ピーチ／２コラム－記事右』です）
編集している個所及び、確認済みの個所を解説しています。
当たりをつけながら、確認・編集していますので、
基本的には、詳しいことはわかっていません。（無責任・・・(;^_^A ）
過去の（ＣＳＳ編集）
を参考にしていただければ、色々とカスタマできると思います。
こちらのスキンのお持ち帰りは、ご自由にしてください。
お持ち帰りになられる時は、一言残していただけると、本人かなり喜びます。
こちらの記事が、他のブログｻﾝ*でその方の記事として解説されていたのを見かけたときは、
かなりへこみました・・・・・（わがままかしら･･･(;^_^A ）←4/30追記
★説明文のないＣＳＳはこちらから → クリック
コピペ、編集等をする場合は、必ず「プレビュー」で確認することをおすすめします。
記事を書いている途中で、「: 」とか「}」とか「; 」が消えてるかもしれません（大きな声ではいえませんが）
みなさんのお役に立てれば幸いです ♪(*￣ー￣)ｖ
☆☆☆☆☆４／２１､緑色で追加説明しています☆☆☆☆
/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.03/24
Skin for: all_skin
-----------------------------------------------------
*/
select{
width:88%;
}
.page a{
text-align: center;
padding: 5px;
}
.page .now{
padding: 5px;
font-weight:bold;
}
.entry .contents{
line-height:150%;
}
.entry .contents img{
margin-right:5px;
margin-left: 5px;
}
#message .contents:after,
.entry .contents:after,
#profile .contents:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#message .contents,
.entry .contents,
#profile .contents
{display: inline-table;}
/* Hides from IE-mac \*/
* html #message .contents,
* html .entry .contents,
* html #profile .contents{height: 1%;}
#message .contents,
.entry .contents,
#profile .contents {display: block;}
/* End hide from IE-mac *//*
-----------------------------------------------------
ameblo ucs CSS Basic Settings
FileName: common.css
Version: 2005.03/24
Skin for: peach
-----------------------------------------------------
*/
/* ----------------------- common ----------------------- */
* {
margin: 0;
padding: 0;
}
body#mainIndex {
margin: 0;
padding: 0;
text-align:center;
}
#frame{
text-align:left;
}
#sub_a,#sub_b,#main{
padding-top:15px;
}
img {
border: 0;
}
a {
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {background-color : #ffffb3; ← リンク先にポインタを置いたときの状態（色をつける）
border-bottom: 1px dotted #ff2899; ← リンク先にポインタを置いたときの状態（線をつける）
}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */
#header{
height:190px; ← ＴＯＰタイトルエリアの高さ
ackground:
url("画像のＵＲＬ"); ← TOPタイトルエリアの背景
background-repeat:no-repeat;} ←背景画像をくりかえしませんよと言う意味
#header h1 {
padding-top: 45px; ← タイトルの表示場所（上から４５px、下へ下がると言う意味）
argin-left: 200px; ← タイトルの表示場所（左から２００px、右へ移動と言う意味）
text-decoration: none;
}
#header h2{
padding-top: 15px; ← 概要（ｻﾌﾞﾀｲﾄﾙ）の表示場所（タイトルの文字から、１５ｐｘ下へ下がると言う意味)
margin-left: 200px; ← 概要の表示場所（左から２００px、右へ移動と言う意味）
}
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#000000; ← 基本の文字の色
font-size:12px; ← 基本の文字の大きさ
}
.list{
font-size:10x;
}
#header h1,
#header h1 a{
text-align : left; ← タイトル文字の表示位置（真中にしたい場合は『center』）
color:#ff3366; ← タイトルの文字の色
font-size: 40px; ← タイトルの文字の大きさ
font-weight: bold; ← タイトルの文字の太さ
line-height: 115%;
}
#header h2{
text-align : center; ← 概要（サブタイトル）文字の表示位置（真中にしたい場合は『center』）
color: #ff3366; ← 概要の文字の色
font-size:14px; ← 概要の文字の大きさ
font-weight: normal; ← 概要の文字の太さ
line-height:115%;
}
.menu_title {
color: #ff4d00; ← メニューリスト（ﾌﾟﾛﾌｨｰﾙ・ﾌﾞﾛｸﾞﾃｰﾏ一覧等）の文字の色
font-size:12px; ← メニューリストの文字の大きさ
font-weight: bold; ← メニューリストの文字の太さ
}
.mainMenu {
font-size: 11px; ← メニューリスト内の文字の大きさ
line-height: 130%;
}
#profile,
#reader {
color:#666666; ← プロフィール欄内の基本文字の色
}
#reader dd {
}
#calendar table {
font-size:11px; ← カレンダー欄内の文字の大きさ
line-height:130%;
color:#666666; ← カレンダー欄内の文字の色
}
#ranking *{
font-size: 12px; ← アメブロランキング欄内の[ ]←これの中の文字の大きさ
line-height: 140%;
}
#ranking .rank_ttl{
font-weight:bold; ← アメブロランキング欄内の[ ]←これの中の文字の太さ
color:#666666; ← アメブロランキング欄内の[ ]←これの中の文字の色
}
#ranking .rank{
color: #000000; ← アメブロランキング欄内の数字の文字の色
}
#ameblo{
fnt-size: 10px; ← アメブロバナー欄内（ﾌﾞﾛｸﾞを作るがあるとこ）の文字の大きさ
color: #000000; ← アメブロバナー欄内（ﾌﾞﾛｸﾞを作るがあるとこ）の文字の色
}
#ameblo p{
line-height: 125%;
}
#rss {
font-size: 12px;
} ↓トラックバックも含みます
h3.title { ← 記事の下の、「ここからコメントエリアですよ」と言う意味の「コメント」と言う表題のこと
font-size: 12px; ← 「コメント・トラックバック」と言う文字の大きさ
font-weight: bold; ← 「コメント・トラックバック」と言う文字の太さ
color:#FF6766; ← 「コメント・トラックバック」と言う文字の色
}
.label {
font-weight: bold;
}
.entry .contents p,
#message .contents p{
font-size: 12px;
line-height: 150%;
}
.entry .theme{
font-size: 10px;
color:#000000;
}
.entry .title{ ← 記事のタイトルの情報
font-size:15px; ← 記事のタイトルの文字の大きさ
font-weight:bold; ← 記事のタイトルの文字の太さ
color:#FF6766; ← 記事のタイトルの文字の色
}
.entry .foot {
font-size:10px;
}
#comment_module,
#trackback {
line-height: 150%;
}
#comment_module .error{
color:#FF0000;
margin-top: 20px;
padding-bottom: 10px;
}
html, body {
scrollbar-base-color: #FFFFFF; ← スクロールバーの色
scrollbar-track-color: #FFFFFF; ← スクロールバーの色
scrollbar-face-color: #FFFFFF; ← スクロールバーの色
scrollbar-shadow-color: #ff661a; ← スクロールバーの色
scrollbar-darkshadow-color: #FFFFFF; ← スクロールバーの色
scrollbar-highlight-color: #ff661a; ← スクロールバーの色
scrollbar-3dlight-color: #FFFFFF; ← スクロールバーの色
scrollbar-arrow-color: #ff4d00; ← スクロールバーの色
}
/* ----------------------- background-color-control ----------------------- */
BODY {
background-image : url("画像のＵＲＬ"); ← 背景の画像（固定背景の設定にしてあります）
background-attachment: fixed;
background-position:60% 95%; ← サイドメニューの下に隠れないように表示位置を調整しています
background-repeat: no-repeat;} ← 背景を繰り返しませんよと言う意味
#frame {
}
#sub_a{
background-image : url("画像のＵＲＬ"); ← サイドバーの背景
background-repeat: repeat; ← 背景を繰り返しますよと言う意味
}
#sub_b{
background-color:;
}
/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
border: 1px solid #ff8000; ← 各メニューに枠をつける
}
.menu_title {
margin: 0px 2px 7px;
padding: 3px 0px 3px 10px;
border-bottom: 1px solid #ff8000; ← メニューリストの文字の下線の情報
background-image: url("画像のＵＲＬ"); ← メニューリスト前のリストマークの画像
background-repeat: no-repeat;
background-position: 3px 7px; ← リストマークの画像が差し込まれる位置
text-indent: 6px; ← メニューリストの文字が、６ｐｘ下がると言う意味
}
/* ----------------------- menu_element_background ----------------------- */
/* ----------------------- menu_elements_margin_leftright ----------------------- */
.menu_title,
.mainMenu ul,
.mainMenu dl,
.mainMenu p,
.list,
.link_blog,
#archives select,
#theme_list select,
#search form{
margin-left: 6px;
margin-right: 6px;
}
p.list,
p.link_blog {
padding-top: 5px;
}
/* ----------------------- each menu setting ----------------------- */
/*profile*/
#profile p{
display: block;
}
/*readers*/
#reader dl {
margin-bottom: 7px;
}
#reader ul {
margin-top: 5px;
}
#reader p {
display: inline;
}
/*calendar*/
#calendar{
}
#calendar .menu_title {
}
#calendar table {
width: 168px; ← カレンダーの日にちの表示幅
text-align:center;
}
#calendar caption {
padding:5px 0px;
}
#calendar caption a{
padding:0px 5px;
}
#calendar .sun {
color:#FF0000; ← カレンダーの日曜日の色
}
#calendar .sat{
color:#0000CC; ← カレンダーの土曜日の色
}
#calendar td {
text-align:center;
}
#calendar td a {
color:#CC0000; ← 記事が書いてある場合の色（記事がある場合は日にちが赤になってます）
text-decoration: underline; ← 記事が書いてある場合は日にちの下線がつきます
}
/*theme_list*/
/*recent_entries*/
/*archives*/
/*search*/
#search form{
margin-top: 7px;
margin-bottom: 7px;
}
#search .searchbox{
width: 100px;
}
#search .searchbtn{
width: 40px;
}
/*favorites*/
/*bookmarks*/
/*recent_trackback*/
/*recent_comment*/
/*ranking*/
#ranking .rank_ttl{
display: block;
}
#ranking .rank{
display: block;
padding-top: 3px;
padding-bottom: 3px;
}
#ranking a{
background-image: url("画像のＵＲＬ"); ←アメブロランキング内のリストマークの画像
background-repeat: no-repeat;
background-position: left center;
padding-left: 9px;
}
#ranking img{
margin-left: 5px;
}
#ranking .rank_all,
#ranking .rank_genre {
margin-bottom: 8px;
}
/* ----------------------- advertising ----------------------- */
#advertising {
border: 1px solid #ff4d00; ← 広告スペースの枠の情報
}
#advertising .menu_title {
background-color: #ff661a; ← 広告スペースのタイトルバーの色
background-image: none;
color: #ffffff; ← 広告スペースのタイトルバーの文字の色
margin: 1px;
padding-left: 7px;
border-bottom: none;
}
/*ameblo*/
#ameblo{
border: 1px solid #ff4d00; ← アメブロバナー欄内（ﾌﾞﾛｸﾞを作るがあるとこ）の枠の情報（線の太さ等）
text-align: center;
padding-top: 7px;
}
#ameblo p{
text-align: left;
padding-right: 7px;
padding-bottom: 7px;
padding-left: 7px;
}
#ameblo li {
display: block;
margin-bottom: 5px;
}
/*RSS*/
#rss{
margin-top: -3px;
margin-right: auto;
margin-left: auto;
border: none;
background-image: none;
text-align: center;
}
/*plugin*/
.plugin{
margin-bottom:15px;
text-align: center;
}
/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{
width:98%;
margin-bottom: 15px;
border:5px double #00b3cc; ← メッセージボックスの枠の情報（太さ５px、二重線、色と言う意味）
background:
url("画像のＵＲＬ"); ← メッセージボックスの背景画像
background-repeat:x-repeat; ←メッセージボックスの背景を横に並べると言う意味
text-indent: 5px; ← メッセージボックスの文字の開始を、５px下げると言う意味
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/
.entry{
width: 99%;
margin-bottom: 20px;
}
.entry .date{
width:99%;
background-color: #ff8000; ← 記事の日付バーの背景色
padding: 5px 0px 2px 5px;
border: 1px solid #ff8000; ← 記事の日付バーの枠の情報
display: block;
color: #ffffff; ← 記事の日付バーの日にちの色
}
.entry .name{
margin-top: 5px;
display: block;
}
.entry .theme{
margin-bottom: 10px;
display: block;
}
.entry .title{
margin-top: 10px;
margin-bottom: 10px;
}
.entry .contents{
margin-top: 15px;
margin-bottom: 15px;
}
.entry .foot{
text-align: right;
padding-top: 5px;
padding-right: 20px;
border-top: 1px dotted #ff8000; ← 『記事』と『|この記事のｕｒｌ|ｺﾒﾝﾄ|ﾄﾗｯｸﾊﾞｯｸ|』の境の線の情報
}
/*page*/
.page{
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 7px;
margin-bottom: 10px;
}
#footer_ad{
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
h3.title {
margin-bottom: 10px;
margin-top: 5px;
}
/*trackback*/
#trackback{
border-top: 1px solid #FF6766; ← コメントとトラックバックの境目の線の情報
margin-top: 25px;
margin-bottom: 10px;
padding-top: 5px;
}
#trackback p.tr_URL {
margin-bottom: 10px;
}
#trackback ul {
margin-bottom: 10px;
}
/*comment_module*/
#comment_module{
border-top: 1px solid #FF6766; ← 記事とコメントの境目の線の情報
padding-top: 5px;
}
#comment_module .each_comment {
margin-bottom: 10px;
}
#comment_module .comment_footer {
margin-top: 5px;
padding-top: 5px;
background-color: #ffe6b3; ← コメント書込み者の名前と日付のバーの背景色
}
#comment_module .error{
margin-top: 20px;
padding-bottom: 10px;
}
#comment_module label{
display: block;
float: left;
width: 70px;
text-align: right;
}
#f_name,#f_url,#f_title,#f_com{
display:inline;
width: 400px; ← コメント記入欄の幅
margin-bottom: 3px;
margin-left: 6px;
}
#f_com{
background-image: url("画像のＵＲＬ"); ← コメント記入欄の「コメント：」枠内への背景表示
background-attachment: fixed; ← 背景固定指定
background-repeat: no-repeat;
background-position: 95% 95%;
}
#comment_module form ul {
width: 340px;
margin-left: auto;
margin-right: auto;
}
#comment_module form li {
display: block;
width: 340px;
margin-bottom: 5px;
}
#comment_module li.lastItem {
display: block;
width: 330px;
margin-bottom: 5px;
text-align: right;
}
#comment_module .button {
margin-left: 5px;
font-size: 11px;
width: 80px;
background-color: #ffe6b3; ← コメントの「投稿ボタン」に色をつける
}
/*reader_list*/
#reader_list ul{
width:100%;
}
#reader_list li{
padding-bottom: 2px;
margin-bottom: 8px;
border: 1px dotted #cccc33; ← 読者一覧ページのサイトごと枠の情報
}
#reader_list .reader_blog {
display:block;
margin-top:2px;
}
/*favorite_list*/
#favorite_list ul{
width:100%;
}
#favorite_list li{
padding-bottom: 2px;
margin-bottom: 8px;
border: 1px dotted #cccc33; ← お気に入り記事覧ページのサイトごと枠の情報
}
#favorite_list .favorite_blog {
display:block;
margin-top:2px;
}
/*bookmark_list*/
#bookmark_list ul{
width: 100%;
}
#bookmark_list li{
margin-bottom: 3px;
}/*
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a.css
Version: 2005.03/03
Skin for: peach
-----------------------------------------------------
*/
#frame:after,
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#frame,
#wrap {display: inline-table;}
/* Hides from IE-mac \*/
* html #frame,
* html #wrap {height: 1%;}
#frame,
#wrap {display: block;}
/* End hide from IE-mac */
#frame {
width: 760px;
margin-left: auto;
margin-right: auto;
}
#wrap {
position: relative;
width: 100%;
}
#main {
width: 570px;
float: right;
padding-left: 10px;
padding-right: 10px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;
float: right; ← サイドバーの位置（右ｏｒ左）
z-index: 1;
}
#sub_b{
display: none;
}
