サンプルページ　　　ブログのスタイルシート

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾌﾞﾛｸﾞのｽﾀｲﾙｼｰﾄ　　blog_css.htm　

ﾌﾞﾛｸﾞのｽﾀｲﾙ・ｽｷﾝ・ｽﾀｲﾙｼｰﾄ（CSS）の編集と、ｻｲﾄﾞﾊﾞｰのﾌﾘｰｽﾍﾟｰｽへのｺﾝﾃﾝﾂ（HTML）挿入（例）です。　　　　ｺﾝﾃﾝﾂ表示幅や、背景画像、全体のﾊｲﾊﾟｰﾘﾝｸ色、ﾄｯﾌﾟﾀｲﾄﾙ（ﾊﾞﾅｰ）背景画像、〃ﾊｲﾊﾟｰﾘﾝｸ色など。　　　　　CSS。　　　　　ｽﾀｲﾙｼｰﾄ（ﾃｷｽﾄﾌｧｲﾙ、半角で記述）などの編集ﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。　　　　　

< ご使用方法 >

　・　このﾌｧｲﾙのﾛｰｶﾙ（=PC）への保存は、blog_css.htm　を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。

　・　CSSﾌｧｲﾙの作成・保存 : 【任意のﾎﾙﾀﾞｰ】- [右ｸﾘｯｸ] - [新規作成] - [ﾃｷｽﾄﾄﾞｷｭﾒﾝﾄ] - ”新規ﾃｷｽﾄﾄﾞｷｭﾒﾝﾄ.txt”を作成します。　　Wordpadなどで開き、ﾌﾞﾛｸﾞの”[ｽｷﾝCSSの編集] ”から目的のCSSをｺﾋﾟｰ、ﾍﾟｰｽﾄ、css_so-net1.txt（任意名）　で保存・ﾊﾞｯｸｱｯﾌﾟできます。　　　　※: （CSS）編集ﾒﾆｭｰなどの”ﾃｷｽﾄ表示ﾌｫｰﾑ”以外からの、ﾌﾞﾗｳｻﾞに表示のHTMLﾌｧｲﾙからのｺﾋﾟｰは、Wordpadなどに一旦ﾍﾟｰｽﾄしてから行います（不要ﾀｸﾞの混入を排除が目的）。　　

　・　ｽﾀｲﾙｼｰﾄ（CSS）の編集・実装は、それぞれｽﾀｲﾙｼｰﾄ（CSS）編集ﾒﾆｭｰなどで直接行えます。　　　表示効果とCSSの対象は、blog_css.htm などを参考に！。　　　下記の（例） (*1) : So-netと、(*2) : Ameba、(*2g) : gooを参考に太字部分の編集を任意に行います。　　　また予め、PCに取り込んだｽﾀｲﾙｼｰﾄ（CSS）や、〃の目的箇所のみを編集し、それぞれのﾌﾞﾛｸﾞの編集ﾒﾆｭｰからﾍﾟｰｽﾄすることも可。

　・　要素のまとめ指定は、『 , 』で、属性は、『 ; 』で複数を区切り指定可。　　　同じものへの複数の定義は後方の定義が優先。　　　　ｾﾚｸﾀ具体性：　同ｴﾚﾒﾝﾄ対して、ｾﾚｸﾀCLASSより、ｾﾚｸﾀIDが優先。　　ｾﾚｸﾀHTMLｴﾚﾒﾝﾄ名より、CLASSが優先。　　　優先順位は、(1) ｲﾝﾗｲﾝｽﾀｲﾙ、(2) ID、(3) CLASS、および(4) HTMLｴﾚﾒﾝﾄの順。　　　ｶｽｹｰﾃﾞｨﾝｸﾞは特定のｴﾚﾒﾝﾄのｽﾀｲﾙ順を決定。　　　継承は、ｽﾀｲﾙﾌﾟﾛﾊﾟﾃｨの次のｴﾚﾒﾝﾄへの継承を指定。

　･　ｽﾀｲﾙｼｰﾄ（CSS）編集ﾒﾆｭｰ（画面） : So-netは、【管理ﾍﾟｰｼﾞ】- [ﾃﾞｻﾞｲﾝ] - [ｽｷﾝ管理] -　該当ｽｷﾝを選択へ。　　　Amebaは、【Amebaﾄｯﾌﾟへ】- [ﾌﾞﾛｸﾞ] - [ﾃﾞｻﾞｲﾝの変更] - [ｽｷﾝCSSの編集] - で。　　gooは、ﾛｸﾞｲﾝ - 【gooﾌﾞﾛｸﾞ】- [ﾃﾞｻﾞｲﾝﾒﾆｭｰ　→　ﾃﾝﾌﾟﾚｰﾄ編集] - [ﾃﾞｰﾀ編集　→　CSSﾃﾞｰﾀ] 　で。　　　ﾛｰｶﾙ・PCへのﾊﾞｯｸｱｯﾌﾟは、cssをﾃｷｽﾄﾌｧｲﾙにｺﾋﾟｰ。

　・　ｻｲﾄﾞﾊﾞへ任意ＨＴＭＬ挿入方法（”ｰ”ﾌﾘｰﾌﾟﾗｸﾞｲﾝ”や”ﾌﾘｰｽﾍﾟｰｽ”へ） : Amebaは、【Amebaﾄｯﾌﾟへ】- [ﾌﾞﾛｸﾞ] - [ｻｲﾄﾞﾊﾞｰの設定] - ﾌﾘｰﾌﾟﾗｸﾞｲﾝ〔設定〕- で、あるいは、　〃　ﾌﾘｰｽﾍﾟｰｽ〔設定〕- で。　　　So-netは、【管理ﾍﾟｰｼﾞ】- [ﾃﾞｻﾞｲﾝ] - [ﾚｲｱｳﾄ] -　で。　　　　HTML（例） : (*3) : DIV・ｵｰﾊﾞｰﾌﾛｰｽｸﾛｰﾙ、(*4) : 折り畳みｺﾝﾃﾝﾂ（spanの隠しｺﾝﾃﾝﾂを右に表示）、(*5) : ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ53　（ﾏｳｽｵｰﾊﾞｰでﾘﾝｸﾃｰﾌﾞﾙを表示）-IE8では、“互換表示”で有効。　　　　　　関連情報いろいろ : ”月別表示”をﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰに変更する（org）、”ｻｲﾄﾞﾊﾞｰを折り畳みに”（org）。　

　・　表示ﾃｽﾄは、それぞれ、”ｽﾀｲﾙｼｰﾄ（CSS）編集ﾒﾆｭｰ” > ”ﾌﾟﾚﾋﾞｭｰ”で保存前・直接行えます。　　　　また、ﾌﾞﾗｳｻﾞで既に表示中であった場合は、[F5]ｷｰを押すなどで、ｷｬｯｼｭを更新・最新ﾃﾞｰﾀ読み込んで、行います。（※: 再ｱｸｾｽ・Enterｷｰや、前に”戻る”では未反映。）

(*1) ：　css_so-net1.txt　　　　〔So-net〕（例）　　　5　Back to Top

　表示効果の説明　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓太字部分などを編集、該当CSSにﾍﾟｰｽﾄ、使用。

/* */ 内はｺﾒﾝﾄ、CSSは半角英数

body 文字色　背景色・画像　下線
ﾊｲﾊﾟｰﾘﾝｸ〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
　

ｶｰｿﾙ（画像ﾌｧｲﾙのURLはめいめいの値、以下、同様。）

x : 元背景色無効

ﾍｯﾀﾞｰ（so-netﾌﾞﾛｸﾞ …… Q&A）

背景画像（以下、同様。）
※: 2008-3～　ｶｽﾀﾏｲｽﾞ無効化。

”◇ JavaScript DHTML XML CSS”
ﾊﾞﾅｰ（ﾄｯﾌﾟﾀｲﾄﾙ枠）
幅
外上右下左余白
内上右下左余白　（※ : 内=ﾀｲﾄﾙ文字位置=ﾊﾞﾅｰ画像表示高さ-40px）
ﾌｫﾝﾄ種類

ﾊﾞﾅｰ画像（背景画像）URL

ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃

外上右下左余白
内上右下左余白
ｻｲﾄ名文字ｻｲｽﾞ
ﾌｫﾝﾄｻｲｽﾞ（ｻｲﾄ名）

ｻｲﾄ紹介文

内上右下左余白
ﾌｫﾝﾄｻｲｽﾞ
ﾌｫﾝﾄ

幅

矢画像

記事幅+2

記事幅

背景画像（画像ﾌｧｲﾙのURLはめいめいの値、以下、同様。）

記事
ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
　

ｻｲﾄﾞﾊﾞｰ幅

内余白上下・左右

背景画像（画像ﾌｧｲﾙのURLはめいめいの値、以下、同様。）

ｻｲﾄﾞﾊﾞｰ
ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
　

@charset "UTF-8";

/*-----Common-----*/

body { color:#000000; background: #F9F8F9 url('……/xxxx.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#EEFFD6; text-decoration:underline; }

BODY {
cursor:url("……/xxxx.ani");
}
xbody {
background:#ffffff;
}

blockquote {
margin:10px 0;
padding:6px;
border:1px solid #D8D7E9;
}

#container {
margin:0 auto;
line-height:1.4;
text-align:left;
color:#515151;
}

/*-----Header-----*/

#header {
background-image: url('……/xxxx.giff');
height:15px;
padding:5px 20px;
xbackground:#e5e5e5;
border-left: #D8D7E9 1px solid; border-top: #D8D7E9 1px solid; border-right: #C9C5E4 1px solid; border-bottom: #C9C5E4 1px solid;
font-size:x-small;
}

#header p {
margin:0;
padding:0;
}

#memberMenu{
float:left;
}

#globalMenu{
float:right;
}

.menuDecoration{
margin-left:10px;
padding-left:10px;
background:url(/blog/_skin/system/images/arrow2R_small_black.gif) no-repeat left center;
}

#banner {
width:900px;
margin:2px auto 5px auto;
padding:210px 0px 0px 0px;
font-family: "Lucida Sans Unicode","Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
clear:both;
background: #F9F8F9 url('……/xxxx.jpg');
}
#banner a:link { color:#514A3A; background-color:#9D939E; text-decoration:none; }
#banner a:visited { color:#514A3A; background-color:#BCB6C2; text-decoration:none; }
#banner a:hover { color:#8F8B9C; background-color:#E9DEDA; text-decoration:underline; }
#banner a:active { color:#514A3A; background-color:#EEFFD6; text-decoration:underline; }

#banner h1{
margin:1px 1px 1px 1px;
padding:1px 1px 1px 10px;
font-size:14px;
}

　

#lead{
margin:0;
padding:1px 1px 0px 10px;
font-size:12px;
font-family: MS PGothic,MS Gothic,Verdana, Arial, Helvetica, sans-serif;
}

/*-----Content-----*/

#content {
width:900px;
margin:0 auto;
color:#000000;
xbackground: #eee url('x……/xxxx.gif');
xtext-decoration:none;
}

/* Links */

.archive-title{
margin-bottom:10px;
font-size:x-small;
}

.archive-bottom{
font-size:x-small;
}

.archive-name{
float:left;
}

.previousLink{
padding-left:10px;
background:url(/blog/_skin/system/images/arrow2L_small_black.gif) no-repeat left center;
}

.nextLink{
padding-right:10px;
background:url(/blog/_skin/system/images/arrow2R_small_black.gif) no-repeat right center;
}

.archive-links{
float:right;
padding-left:10px;
background:url(/blog/_skin/system/images/arrow2T_small_black.gif) no-repeat left center;
}

/* Articles */

#main {
width:680px;
overflow:hidden;
}

.articles {
width:678px;
border:1px solid #D8D7E9;
overflow:hidden;
}

.articles-title {
margin:0 0 15px 0;
padding:5px 20px;
border-bottom:1px dotted #D8D7E9;
font-size:small;
color:#1c1c1c;
background-image: url(……/xxxx.gif');
}

.articles-body a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:underline; }
.articles-body a:visited { color:#270037; background-color:#EDECEF; text-decoration:underline; }
.articles-body a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:none; }
.articles-body a:active { color:#1F002E; background-color:#EEFFD6; text-decoration:none; }

.articles-body {
line-height:160%;
padding:5px 20px;
}

.articles-top { }
.articles-bottom {
margin-bottom:20px;
}

.articles-body img {
margin:5px;
}

.posted{
padding:15px 20px;
font-size:x-small;
}
　

====　　この間、説明を省略。　　====

/*-----Side-----*/

#side-a, #side-b {
width:200px;
color:#808080;
overflow:hidden;
}

.sidebar {
width:198px;
padding-bottom:10px;
border:1px solid #D8D7E9;
margin-bottom:10px;
overflow:hidden;
}

.sidebar-title {
margin:0;
margin-bottom:10px;
padding:5px 10px;
border-bottom:1px dotted #D7D6E9;
font-size:x-small;
color:#1c1c1c;
background-image: url('……/xxxx.gif');
}

.sidebar-title a:link { text-decoration:none; color:#1c1c1c; }
.sidebar-title a:visited { text-decoration:none; color:#1c1c1c; }
.sidebar-title a:active { text-decoration:none; color:#1c1c1c; }
.sidebar-title a:hover { text-decoration:underline; color:#4d4d4d; }

.sidebar-body {
margin:0;
padding:0 10px;
}

.sidebar-body ul, .sidebar-body li, .sidebar-body dl, .sidebar-body dt, .sidebar-body dd, .sidebar-body form {
margin:0;
padding:0;
}

.sidebar-body li {
padding:3px 0;
list-style-type:none;
}

.new {
margin-left:6px;
color:#ff0000;
font-weight:bold;
}

/*--Profile--*/

dt.profile-img {
float:left;
}

dd.profile-status{
margin-left:85px;
line-height:180%;
}

.profileLink {
padding-left:10px;
background:url(/blog/_skin/system/images/arrow2R_small_black.gif) no-repeat left center;
}

.nice {
margin:0;
padding:0 2px;
background:#ffd900;
border:1px solid #0090ff;
color:#0090ff;
}

　

====　　この間、説明を省略。　　====

(*2) ：　css_ameba1.txt　　　　〔Ameba〕（例）　　　5　Back to Top

　表示効果の説明　

(*2) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓太字部分などを編集、該当CSSにﾍﾟｰｽﾄ、使用。

全体背景画像（画像ﾌｧｲﾙのURLはめいめいの値、以下、同様。）

常時ｶｰｿﾙ（ｱﾆﾒ）
ﾏｳｽｵｰﾊﾞｰ時ｶｰｿﾙ（ｱﾆﾒ）

ﾒｲﾝ枠幅

ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
　

ﾄｯﾌﾟ背景画像

ﾄｯﾌﾟｻｲﾄ名
外上右下左余白
内上右下左余白（ﾀｲﾄﾙ文字位置）
ｻｲﾄ名文字ｻｲｽﾞ
ﾌｫﾝﾄｻｲｽﾞ（ｻｲﾄ名）
太字
行高さ

ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃

ｻｲﾄ説明文
外上右下左余白
内上右下左余白
ﾌｫﾝﾄｻｲｽﾞ（ｻｲﾄ名）
細字
文字色
行高さ

ﾀｲﾄﾙﾊﾞｰ背景画像
”ｻｲﾄ名 … … ﾌﾟﾚｾﾞﾝﾄ”外余白
上右下左

記事ﾀｲﾄﾙ背景画像（画像ﾌｧｲﾙのURLはめいめいの値、以下、同様。）

ｺﾝﾃﾝﾂﾀｲﾄﾙ背景画像

記事枠幅

内余白上下・左右
罫線

====　　この間、説明を省略。　　====

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■ 基本設定 ■■■■■■■■■■■■*/
html {
font-size:12px !important;
*font-size:90% !important;/*forIE6IE7*/
}
body{
margin: 0;
padding: 0;
background: #F9F8F9 url(……/xxxxb.gif');
background-color: #FFFFFF;
text-align:center;
color:#222222;
font-family: Lucida Sans Regular,Verdana,Arial,MS PGothic,MS Gothic,sans-serif;
}
body {cursor:url("http://……/xxxx.ani");}
a:hover {cursor:url("http://……/xxxx2.ani");}
#frame{
width: 840px;
margin:0 auto;
background: #F9F8F9 url('……/xxxxb.gif');
background-color: #FFFFFF;
text-align:left;
}
#wrap{
width: 840px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a,
#sub_b,
#main{
overflow:hidden;
word-break:break-all;
}
#sub_a{
color:#666666;
background: #F9F8F9 url('……/xxxxb.gif');
background-color: #FFFFFF;
}
#sub_b{
color:#666666;
background: #F9F8F9 url('……/xxxxb.gif');
background-color: #FFFFFF;
}

img{
border: 0;
}

blockquote{
margin:12px 0;
padding:10px;
border:2px dotted #D4D4D4;
}

pre{
margin:0;
padding:0;
}

a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#EEFFD6; text-decoration:underline; }

input,
textarea{
}

p{
margin: 0;
padding: 0;
}

.menu_frame ul,
.menu_frame li,
.menu_frame dl,
.menu_frame dt,
.menu_frame dd,
#comment_module ul,
#comment_module li,
#trackback ul,
#trackback li,
#reader_list ul,
#reader_list li,
#favorite_list ul,
#favorite_list li,
#bookmark_list ul,
#bookmark_list li{
margin: 0;
padding: 0;
list-style-type:none;
}

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

#frame:after,
#wrap:after,
#defaultAd dl:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#frame,
#wrap,
#defaultAd dl{display: inline-block;min-height: 1%;}

/* Hides from IE-mac \*/
* html #frame,
* html #wrap,
* html #defaultAd dl{height: 1%;}
#frame,
#wrap,
#defaultAd dl{display: block;}
/* End hide from IE-mac */

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■ ヘッダー ■■■■■■■■■■■■*/
div#header{
background: #F9F8F9 url('……/xxxxｈ.jpg');
background-color: #FFFFFF;
}

div#header h1{
margin:0;
padding:275px 5px 0px 15px;
font-size:14px;
font-weight: bold;
line-height:1.2;
}

div#header h1 a { color:#8A8879;background-color:#4F4239;}
div#header h1 a:hover { color:#EFC36C; background-color:#8D7B65; text-decoration:underline; }
div#header h1 a:active { color:#1F002E; background-color:#EEFFD6; text-decoration:underline; }

div#header h2{
margin:0px;
padding:5px 5px 10px 15px;
font-size:1.0em;
font-weight: normal;
color:#8A8884;
line-height:1.2;
}

/*■■■ヘッダー内ナビゲーション*/

div#userNaviArea{
background-image: url('……/xxxxｔ.gif');
padding:2px 0 2px 0 !important;
}

div#userNaviArea a#userNickName{
float:left;
padding:0 2px 0 2px;
font-size:18em;
}

div#userNaviArea a{
font-weight:bold;
}

ul#navigationList{
margin:0;
padding:8px 0 0 0;
list-style-type:none;
}

ul#navigationList li{
float:left;
margin:0;
padding:0 8px;
border-right:1px solid #999999;
}

ul#navigationList li.lastItem{
border:none;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■ メインコラム ■■■■■■■■■■■*/

/*■■■メインコラム＿メッセージボード*/
#message{
margin-bottom:14px;
}

#message .contents{
padding:14px 24px;
border:1px solid #D4D4D4;
}

/*■■■メインコラム＿記事*/
.entry{
margin-bottom: 40px;
}

.entry .entry_head{
height:16px;
}

.entry .theme{
display:block;
padding:0 0 5px 0;
border-bottom:1px dotted #7E8984;
}

.entry .date{
display:block;
float:left;
margin:0;
padding: 1px 0px;
}

.entry .name{
display:block;
float:right;
margin:2px 0 0 0;
padding:0;
color:#666666;
font-size:0.85em;
}

.entry h3.title{
clear:both;
margin:0 0 8px 0;
padding:3px 5px;
background-image: url(……/xxxxｔ.gif');
background-color:#EFEFEF;
color:#222222;
font-size:1.5em;
font-weight: bold;
line-height:1.1;
}

.entry .contents{
margin:15px 0 15px 0;

line-height: 1.5;
}

.entry .foot{
padding-top: 5px;
border-top: 1px dotted #7E8984;
font-size:0.85em;
text-align: right;
}

/*■■■メインコラム＿記事下部広告*/
#footer_ad{
margin:20px auto 10px auto;
text-align: center;
}

/*■■■メインコラム＿ページ送り*/
.page{
margin:0 auto 14px auto;
padding:0;
font-size:0.85em;
text-align: center;
}

/*■■■メインコラム＿トラックバック*/
#trackback{
margin:15px 0 0;
padding:0;
border-top:3px double #7E8984;
line-height: 1.5;
}

#trackback h3.title{
margin: 0px;
padding:7px 0 8px 0;
background:none;
font-size:1.17em;
}

#trackback .label{
font-weight: bold;
}

#trackback p.tr_URL{
margin-bottom: 16px;
padding:0 0 8px 0;
border-bottom:1px dotted #7E8984;
}

#trackback ul{
margin:8px 0 18px 0;
padding:0 0 8px 0;
border-bottom:1px dotted #7E8984;
}

/*■■■メインコラム＿コメント*/
#comment_module{
border-top:3px double #7E8984;
line-height: 1.5;
}

#comment_module h3.title{
margin: 0px;
padding:7px 0 8px 0;
background:none;
font-size:1.17em;
}

#comment_module p.list{
margin: 0px 0px 10px 0px;
padding: 0px;
font-size:0.85em;
}

#comment_module .comment_body{
margin: 0;
padding:0 0 10px 0;
}

#comment_module .each_comment{
margin: 0;
padding:0 0 20px 0;
}

#comment_module .comment_footer{
margin:0;
padding:0;
border-top:1px dotted #7E8984;
}

#comment_module .error{
margin-top: 20px;
padding-bottom: 10px;
color:#FF0000;
}

#comment_module .label{
font-weight: bold;
}

#comment_module form ul{
width: 340px;
margin:0 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;
width: 80px;
font-size:0.91em;
}

/*■■■メインコラム＿読者一覧■*/
#reader_list h3.title{
margin: 0px;
padding:7px 0 8px 0;
background:none;
font-size:1.17em;
}

#reader_list li{
margin:0;
padding:8px 0;
border-bottom: 1px dotted #7E8984;
}

#reader_list .reader_blog{
display:block;
margin-top:2px;
}

/*■■■メインコラム＿お気に入りブログ一覧*/
#favorite_list h3.title{
margin:0;
padding:0 0 5px 0;
background:none;
font-size:1.17em;
}

#favorite_list ul{}

#favorite_list li{
margin: 0;
padding:8px 0;
border-bottom: 1px dotted #7E8984;
}

#favorite_list .favorite_blog{
display:block;
margin-top:2px;
}

#favorite_list .favorite_theme{
display:block;
margin-top:2px;
}

/*■■■メインコラム＿ブックマーク一覧*/
#bookmark_list h3.title{
margin: 0px;
padding:7px 0 8px 0;
background:none;
font-size:1.17em;
}

#bookmark_list ul{}

#bookmark_list li{
margin-bottom: 4px;
padding:4px 0;
border-bottom: 1px dotted #7E8984
}

/*■■■メインコラム＿最新記事一覧*/
#recent_entries_list h3.title{
margin: 0px;
padding:7px 0 8px 0;
background:none;
font-size:1.17em;
}

#recent_entries_list li{
margin:0;
padding:8px 0;
border-bottom: 1px dotted #7E8984;
}

/*■■■メインコラム＿気になるテーマ一覧*/
#joinbookList h3{
margin: 0px;
padding:7px 0 8px 0;
border:none;
background:none;
font-size:1.17em;
}

#joinbookList a:link{ color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
text-decoration:none;
}

#joinbookList a:visited{ color:#270037; background-color:#EDECEF; text-decoration:none; }

#joinbookList a:hover{ color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }

#joinbookList a:active{ color:#1F002E; background-color:#EEFFD6; text-decoration:underline; }

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■ サイドA(sub_a)&サイドB(sub_b) ■■■■■■*/

/*■■■サイド＿サイドA,B共通項目*/
.list{
}

h4.menu_title{
margin:0 0 10px 0;
padding:3px 6px;
color: #222222;
background-image: url(……/xxxxｔ.gif');
background-color:#EFEFEF;
font-size:1.17em;
font-weight: bold;
}

div.mainMenu{
margin:0 0 30px 0;
padding:0;
font-size:0.91em;
line-height: 1.3;
}

div.menu_frame{}

/*■■■サイド＿ランキング*/
#ranking .menu_frame{
line-height: 1.4;
}

#ranking .rank_ttl{
font-size:1.2em;
font-weight:bold;
}

#ranking .menu_frame img{
vertical-align:bottom;
}

/*■■■サイド＿プロフィール*/
#profile p{
display: block;
}

#profile #new_profile{
color:#666666;
}

/*■■■サイド＿ブログの読者*/
#reader dl{
margin-bottom: 7px;
}

#reader dd{}

#reader ul{
margin:5px 5px 0 5px;
padding:8px 0 0 0;
border-top:1px dotted #7E8984;
}

#reader li{}

#reader p{
display: inline;
}

/*■■■サイド＿カレンダー*/
#calendar{}

#calendar .menu_title{}

#calendar table{
width: 168px;
font-size:0.91em;
line-height:1.3;
}

#calendar caption{
padding:5px 0px;
}

#calendar caption a{
padding:0px 5px;
}

#calendar .sun{}
#calendar .sat{}

#calendar td,
#calendar th{
padding:0px;
text-align:center;
}

#calendar td a{
font-weight:bold;
text-decoration: underline;
}

/*■■■サイド＿テーマ*/
#theme_list{}

/*■■■サイド＿最近の記事一覧*/
#recent_entries{}

/*■■■サイド＿アーカイブ*/
#archives{}

/*■■■サイド＿検索*/
#search form{
margin:0 7px;
}

#search .searchbox{
width: 100px;
}

#search .searchbtn{
width: 40px;
}

/*■■■サイド＿お気に入りブログ*/
#favorite{}

/*■■■サイド＿ブックマーク*/
#bookmark{}

/*■■■サイド＿最近のコメント*/
#ecent_comment{}

/*■■■サイド＿ランキング*/
#ranking .rank_ttl{
display: block;
}

#ranking .rank{
display: block;
padding:0 3px 0 3px;
}

#ranking a{}

#ranking img{
margin-left: 5px;
}

#ranking .rank_all,
#ranking .rank_genre{
margin-bottom: 8px;
}

/*■■■サイド＿アメブロ推奨枠*/
#ameblo{
padding-top: 7px;
font-size:0.85em;
text-align: center;
}

#ameblo p{
padding:0 7px 7px 7px;
line-height: 1.25;
text-align: left;
}

#ameblo li{
display: block;
margin-bottom: 5px;
}

/*■■■サイド＿RSS*/
#rss{
margin: -3px auto 0 auto;
padding-bottom:16px;
border: none;
background-image: none;
text-align: center;
}

/*■■■サイド＿プラグイン*/
.plugin{
margin-bottom:15px;
text-align: center;
}

/*■■■サイド＿PR*/
#defaultAd {
margin:0 0 15px;
}
#defaultAd dl {
padding:0 0 5px 0;
}
#defaultAd dt {
float:left;
margin:0;
padding:0 0 5px 0;
}
#defaultAd dt img{
border:1px solid #ccc;
}
#defaultAd dd {
float:right;
width:100px;
margin:0;
padding:0 0 3px;
}
#defaultAd dd a {
font-weight: bold;
}
#defaultAd dd.adName a{
text-decoration:underline;
}
#defaultAd dd.adDetail{
}

/*■■■サイド＿気になるテーマ*/
#joinbook{
margin-bottom:15px;
padding:1px;
padding-bottom:5px;
background-color:#FFFFFF;
border:none;
font-size:0.85em;
}

#joinbook h4{
margin:0 0 4px 0;
padding:4px 6px;
background-image:none;
background-image: url(……/xxxxｔ.gif');
background-color:#EFEFEF;
border:none;
font-size:1.17em;
font-weight: bold;
text-align:left;
color: #222222;
}

#joinbook h4 span{
margin:0;
padding:0;
background-image:none;
}

#joinbook h4 a:link{
color:#222222;
text-decoration:none;
}
#joinbook h4 a:hover{
color:#222222;
text-decoration: underline;
}
#joinbook h4 a:visited{
color:#222222;
text-decoration:none;
}

#joinbook ul{
margin: 2px;
padding:0px;
}

#joinbook li{
margin:0;
padding:0px;
list-style-type:none;
line-height:1.3;
}

#joinbook p.list{
margin:0 10px;
padding:5px 0 0 0;
background:none;
border-top:1px dotted #818C87;
text-align:right;
}

#joinbook p a{
margin:0;
font-size:0.85em;
line-height:1;
}

#joinbook .theme_title{
margin: 0 10px 8px 10px;
padding:0 0 3px 0;
border-bottom:1px dotted #818C87;
font-size:0.85em;
font-weight:bold;
text-align:left;
}
#joinbook span.themeicon{
display: block;
}

#joinbook a:link{
color:#0066CC;
text-decoration:none;
}

#joinbook a:visited{
color:#996699;
}

#joinbook a:hover{
text-decoration:underline;
color:#FF3366;
}

#joinbook a:active{
color:#FF3366;
}

#joinbook ul.left{
padding:0 10px 8px 10px;
}

#joinbook li.thumbnail{
margin-left:0;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■ フッター ■■■■■■■■■■■■*/
div#footerArea{
margin:0;
padding:12px 8px 25px 0;
border-top:1px solid #666666;
text-align:right;
}

/*-----------------------------------------------------
ameblo CSS Skin Layout Settings
Skin for: basic_ad
FileName: type_a.css
$Revision: 1.1 $
-----------------------------------------------------*/

#main {
float: right;
width: 650px;
margin:0;
padding:5px 5px;
border-left: #D8D7E9 1px dotted; border-top: #D8D7E9 1px dotted; border-right: #C9C5E4 1px dotted; border-bottom: #C9C5E4 1px dotted;

}

#sub_a{
width:170px;
margin:0;
padding: 0;
float: left;
z-index: 1;

}
#sub_b{
display: none;
}
　

(*2g) ：　css_goo1.txt　　　　〔goo〕（例）　　　5　Back to Top

　表示効果の説明　

(*2) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓太字部分などを編集、該当CSSにﾍﾟｰｽﾄ、使用。

背景画像

幅

ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃

ﾀｲﾄﾙ上右下左余白
（上=ﾀｲﾄﾙ文字位置=画像表示高さ-43px）

ﾄｯﾌﾟﾀｲﾄﾙ画像

ﾀｲﾄﾙ文字ｻｲｽﾞ
　〃　色
　〃　背景色
　〃　ﾌｫﾝﾄ
　〃　太字
　〃　影

幅（ｺﾝﾃﾝﾂ表示幅）

項目ﾀｲﾄﾙ背景画像

背景画像

項目ﾀｲﾄﾙ背景画像

背景画像

/* クリアグレー左メニューのCSS */

/* ページ全体共通指定 */

/* ページ全体の背景と余白 */
body {
background-image: url('http://www.……/xxxx.gif');
background-repeat: ;
background-position: ;
margin:0px;
padding:0px;
background-color:#EFEFEF;
}

/* ページ全体の文字　*/
BODY,TD,DIV {
FONT-SIZE : SMALL;
color: #333;
font-family: 'MS P ゴシック'Century Gothic,Verdana,Helvetica,Airal,sans-serif;
}

/* タイトル、見出し関連初期設定　*/
h1, h2, h3 {
margin:0px;
padding:0px;
font-size: small;
font-weight: normal;
}

/* ページレイアウト用　*/
#container{
margin: 0px auto;
text-align: center;
}

/* ページ全体囲み　*/
#content{
margin: 0px auto;
border-right: 1px solid #d7d7d7;
border-left: 1px solid #d7d7d7;
background-color: #FFFFFF;
text-align: left;
width: 870px;
}

/* リンク（まだ見ていない状態） */

a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }

/* ヘッダーの指定　*/
#header {
background-color: #DDDDDD;
padding:213px 5px 2px 15px;
border-bottom: 1px solid #d7d7d7;
background-image: url('http://www……/xxxx.jpg');
}

/* ブログのタイトル */
.bTitle {
font-size: 14px;
font-color: #555;
background-color: #6C4921;
font-family: Lucida Sans Unicode,VERDANA,ARIAL,SANS-SERIF,Helvetica,'ＭＳＰゴシック',Osaka;
font-weight: bold;
text-shadow: #bbb 1px 1px 1px;
text-align: left;
}
.

/* ブログタイトルのリンク（<a href="#" class="etTitleLink">で使用） */
.bTitleLink {
text-decoration: none;
}

/* ブログの概要 */
.bDesc {
text-align: left;
padding-bottom:6px;
font-size: ;
color: ;
font-family: VERDANA,ARIAL,SANS-SERIF,Helvetica,'ＭＳＰゴシック',Osaka;
}
====　　この間、説明を省略。　　====

/* エントリー背景　*/
#entry{
float:right;
width : 660px;
padding: 15px 15px 15px 0px;
overflow: hidden;
height:100%;
}

/* エントリータイトル */
.etTitle {
color: #333333;
font-size : large;
font-weight: bold;
background-image: url('http://www……/30tbwh2.gif');
}

/* エントリータイトル下点線 */
.etTitleKazari {
padding: 3px 0px;
border-bottom: 1px dashed #999999;
margin: 0px 0px 2px 0px;
}

/* エントリータイトルの飾り（<a href="#" class="etTitleLink">で使用） */
.etTitleLink {
text-decoration: none;
}

/* エントリー本文 */
.etBody {
font-size: 105%;
line-height:160%;
word-break:break-all;
text-align: left;
}

/* エントリー本文背景 */
.entryBg{
padding: 15px;
background-color: #F3F3F3;
margin:0px 0px 40px 0px;
background-image: url('http://www……/uhskr_wh.gif');
}
====　　この間、説明を省略。　　====

/* カレンダー前月、翌月 */
.calLink {
font-size: ;
font-weight: bold;
text-decoration: underline;
}

/* カレンダー内の区切り */
.calRule {
background-color: #a0a1ad;
}

/* gooお奨めリンク内「携帯」 */
.lgBar {
color: #333333;
font-size: ;
font-weight: bold;
text-align: left;
background-image: url(/images/tmp_sm_gr_l/menu_icon.gif);
background-position: left center;
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
margin-bottom: 5px;
}

/* メニュー背景 */
#menu {
float:left;
width:170px;
padding:15px 0px 15px 10px;
background-image: url('http://www.……/wttec.gif');
}

/* メニュー全体の文字（各見出し含む）　*/
#sideBarW, #sideBarW td ,#sideBarW td div,#sideBarW, #sideBarW td {
color: ;
font-size: ;
}

/* メニューのリンク（まだ見ていない状態）　*/
#sideBarW a, #sideBarW td a {
color: ;
font-size: ;
}

/* メニューの各見出し */
.menuBar {
color: #333333;
font-size: ;
font-weight: bold;
text-align: left;
background-image: url(/images/tmp_sm_gr_l/menu_icon.gif);
background-image: url('http://www……/30tbwh2.gif');
background-position: left center;
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
margin-bottom: 5px;
}
====　　この間、説明を省略。　　====

/* ブックマーク（bookmark）リスト：説明 */
.bmText {
color: ;
font-size: ;
}

/* プロフィールの見出し */
.pfTitle {
background-color: #CCC;
background-image: url('http://www……/wttec.gif');
border: 1px solid #CCC;
font-weight:bold;
color: #000000;
display:block;
padding: 2px 2px 2px 4px;
}
====　　この間、説明を省略。　　====
　

(*3) ：　DIV・ｵｰﾊﾞｰﾌﾛｰ時ｽｸﾛｰﾙ　　　　　5　Back to Top

・　“Sio-net Blog 月別表示”　での応用例　　　　管理ﾍﾟｰｼﾞ → ﾃﾞｻﾞｲﾝ → ﾚｲｱｳﾄ → 月別表示 → ｺﾝﾃﾝﾂHTML編集 → 保存 → 前画面・保存

　　HTMLの編集方法

　下記↓ をｺﾋﾟｰし、ﾃｷｽﾄﾌｧｲﾙにﾍﾟｰｽﾄ後、ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、太字部分などを編集、HTML挿入にﾍﾟｰｽﾄします。

〔この列ﾍﾟｰｽﾄ不要〕

追加します　背景画像

追加します

　・　“Ameba Blog ﾙｰﾑ” と、“Sio-net Blog ﾌﾟﾛﾌｨｰﾙ”での応用例。

＝（ΦωΦ）＝　　= （・。．・）=　　（´。｀）　　ΘΘΠΠ～
大原かおり　（´。｀）
魚住りえ　ﾚﾃｨｰｼｱちゃん　（´。｀）
ニャーロック探偵事務所　ΘΘΠΠ～
玉川美沙　ΘΘΠΠ～
荻窪圭　猫写真　混沌の屋形船　ΘΘΠΠ～
矢野健夫　　└|･.･|┘…*～～～＊
岸田一郎　　〔｀。´ 〕
鬼頭あゆみ -ﾄｺﾄｺ世界遺産
平井礼子 -ｱﾌｶﾞﾆｽﾀﾝ便り
三好礼子　┌|・.・|┐
三上和美　┌|・.・|┐
KCﾁｮｰﾄｸｶﾒﾗ日記　（＠＠）
古見きゅう - 水中ｶﾒﾗ　（＠＠）
国井律子　　φ（．．　）　　（－．”－；）
前田紅華
星野真里　　　（＊＾．＾＊）　　(*^.^*)
山田キヌヲ
武下公美
平野いえな
山内智恵

====　この間、説明を省略。　　====

diskunion新宿Jazz館Blog
jml.jp 関心空間
矢野沙織

　・　Ameba Blog ﾙｰﾑの応用例　　　

　　HTMLの編集方法

下記↓ をｺﾋﾟｰし、ﾃｷｽﾄﾌｧｲﾙにﾍﾟｰｽﾄ後、または blog_css.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開きｺﾋﾟｰ後、太字部分などを編集、ﾌﾘｰﾌﾟﾗｸﾞｲﾝやﾌﾘｰｽﾍﾟｰｽなどのHTML挿入にﾍﾟｰｽﾄします。

※ : < >内英数は基本半角限定。

ﾌｫﾝﾄ（頭優先）　DIV幅・高さ　左詰め　行間　自動ｽｸﾛｰﾙﾊﾞｰ　背景色・〃画像　内余白、透明度
ﾊｲﾊﾟｰﾘﾝｸﾀｰｹﾞｯﾄ　URL　ﾊﾞﾙｰﾝ・吹き出し　ｻｲﾄ名　改行

以下、同様にｻｲﾄ〔<a ～　</a><br/>〕を編集、数を加減。

”ﾙｰﾑ” の例は、”font:normal 12px → 11px”と、”height:300px → 500px”、line-height:130% → 90%”、部分は、”→ それぞれの値”に変更して使用。

<div style="font:normal 12px Arial,MS PGothic,Lucida Sans Unicode; width:300px; height:300px; text-align:left; line-height:130%; overflow:auto; background:#F9F8F9 url('http://www001.upp.so-net.ne.jp/oka/uhskr_wh.gif'); padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px;filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=50, FinishOpacity=50)">
<a target="_blank" href="http://www.flickr.com/photos/tags/cat/" title="表示ﾃｷｽﾄ・吹き出し">＝（ΦωΦ）＝　　= （・。．・）=　　（´。｀）　　ΘΘΠΠ～</a><br/>

<a target="_blank" href="http://www.flickr.com/photos/tags/cat/" title="Flickr">＝（ΦωΦ）＝　　= （・。．・）=　　（´。｀）　　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://ameblo.jp/maho-toyota/">とよた真帆　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://ameblo.jp/tama-ch/">玉川美沙　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://stray-cats.blog.so-net.ne.jp/">猫を探して三千里　=ΘΘ=ΠΠ～</a><br/>
<a href="http://　……　猫写真" target="_blank">荻窪圭　猫写真</a>　<a href="http://　……　.html" target="_blank">混沌の屋形船　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://ameblo.jp/ohtaki/">太田あき　（´。｀）</a><br/>
<a target="_blank" href="http://ameblo.jp/fumie-otawa/">おおたわ史絵　（´。｀）</a><br/>
<a target="_blank" href="http://ameblo.jp/ohara-kaori/">大原かおり　（´。｀）</a><br/>
<a target="_blank" href="http://uozumirie.cocolog-nifty.com/blog/">魚住りえ　ﾚﾃｨｰｼｱちゃん　（´。｀）</a><br/>
<a target="_blank" href="http://risa.blog.ocn.ne.jp/journal/">Risa’s Journal　（´。｀）</a><br/>
<a target="_blank" href="http://ameblo.jp/zino-kishida/">岸田一郎　　〔｀。´ 〕</a><br/>

====　この間、説明を省略。　　====

<a target="_blank" href="http://i-love-tochigi.blog.so-net.ne.jp/">山、登ろう！</a><br/>
<a href="http://　……　/blog_css.htm#(*3)" target="_blank" title="この、ｵｰﾊﾞｰﾌﾛｰ時ｽｸﾛｰﾙDIVの作成方法など。">・　ﾌﾞﾛｸﾞのCSS・ｽﾀｲﾙｼｰﾄ編集（例） </a><br/>
<a href="http://　……　s=&safe=images" target="_blank" title="100件/ﾍﾟｰｼﾞ">・　ｵﾌｨｼｬﾙﾌﾞﾛｸﾞ検索</a>
</div>

　・　“Sio-net Blog ﾌﾟﾛﾌｨｰﾙ” の応用例　　　

　　HTMLの編集方法

※ : < >内英数は基本半角限定。

ﾌｫﾝﾄ　DIV幅・高さ　左詰め　行間　自動ｽｸﾛｰﾙﾊﾞｰ　背景色・〃画像　内余白　外余白
☆画像　吹き出し
ﾊｲﾊﾟｰﾘﾝｸﾀｰｹﾞｯﾄ　URL　ﾊﾞﾙｰﾝ・吹き出し　ｻｲﾄ名　改行

以下、同様にｻｲﾄ〔<a ～　</a><br/>〕を編集、数を加減。

<div style="font:normal 12px Arial,MS PGothic,Lucida Sans Unicode; width:350px; height:600px; text-align:left; line-height:75%; overflow:auto; background:#F9F8F9 url('http://　……　.gif'); padding:0px 10px 10px 0px; margin:0px 10px 0px 0px;">
<p>　<img border="0" src="http://　……　.gif" alt="= （＾。＾）=　こんにちわ！" align="absbottom"> 　 <b>お気に入り</b><br/>
<a target="_blank" href="http://www.flickr.com/photos/tags/cat/" title="Flickr">＝（ΦωΦ）＝　　= （・。．・）=　　（´。｀）　　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://ameblo.jp/maho-toyota/">とよた真帆　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://ameblo.jp/tama-ch/">玉川美沙　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://stray-cats.blog.so-net.ne.jp/">猫を探して三千里　=ΘΘ=ΠΠ～</a><br/>
<a href="http://　……　猫写真" target="_blank">荻窪圭　猫写真</a>　<a href="http://　……　.html" target="_blank">混沌の屋形船　=ΘΘ=ΠΠ～</a><br/>
<a target="_blank" href="http://ameblo.jp/ohtaki/">太田あき　（´。｀）</a><br/>
<a target="_blank" href="http://ameblo.jp/fumie-otawa/">おおたわ史絵　（´。｀）</a><br/>
<a target="_blank" href="http://ameblo.jp/ohara-kaori/">大原かおり　（´。｀）</a><br/>
<a target="_blank" href="http://uozumirie.cocolog-nifty.com/blog/">魚住りえ　ﾚﾃｨｰｼｱちゃん　（´。｀）</a><br/>
<a target="_blank" href="http://risa.blog.ocn.ne.jp/journal/">Risa’s Journal　（´。｀）</a><br/>
<a target="_blank" href="http://ameblo.jp/zino-kishida/">岸田一郎　　〔｀。´ 〕</a><br/>

====　この間、説明を省略。　　====

(*4) ：　折り畳みｺﾝﾃﾝﾂ（spanの隠しｺﾝﾃﾝﾂを右・下に表示）　　　5　Back to Top

　・　“Sio-net Blog 太陽風ДζΨΠ∀1”（ｻｲﾄﾞﾊﾞｰ）での応用例　　　　　ﾃﾞﾓは、↓　のｸﾘｯｸで。

Digitally Radio　

　・　編集方法

　　HTMLの編集方法

　blog_css.htm をWordpadなどで開き、太字部分などを編集、ﾌﾘｰﾌﾟﾗｸﾞｲﾝやﾌﾘｰｽﾍﾟｰｽなどのHTML挿入にﾍﾟｰｽﾄします。

※ : < >内は半角英数限定。

★1、★2の選択、または同時使用。

ﾌｫﾝﾄ　DIV幅　〃高さ　余白　罫線　ｽｸﾛｰﾙﾊﾞｰ自動　背景画像

ｺﾝﾃﾝﾂ〔ﾊｲﾊﾟｰﾘﾝｸ : <a ～ </a>間は、加減〕　折り畳みSPAN ID
画像　ﾏｳｽｵｰﾊﾞｰ作動は、onmouseover に変更。

ｺﾝﾃﾝﾂ

DIV幅　〃高さ　内余白　外余白　罫線　ｽｸﾛｰﾙﾊﾞｰ無し　背景画像

ｺﾝﾃﾝﾂ　折り畳みSPAN ID
画像

ｺﾝﾃﾝﾂ

<div style="font:normal 11px Lucida Sans Unicode; width:150; height:150; padding:5px 5px; border:#F0F0F4 1px dotted; overflow:auto; background-color:#FFFFFF;background-image: url('……/xxxx.gif');">
<p>
<A title=広帯域♪ｽﾄﾘｰﾑｺﾝﾃﾝﾂ。 href="http://www.di.fm/" target="_blank"><IMG src="http://www……/xxxx.gif" border="0">Digitally Radio</a>　<SPAN title=ｸﾘｯｸ　→　続きを、右・下に表示/折り畳みします。 style="CURSOR: hand; COLOR: #01cdcd; BACKGROUND-COLOR:" onclick="document.all.id0001.style.display= document.all.id0001.style.display=='none' ? '' : 'none'"><IMG height=10 src="……/xxxx.gif" width=10 border=0 align="absmiddle"></SPAN><SPAN id=id0001 style="DISPLAY: none">　<a href="http://www.sky.fm/mp3/classical.pls" target="_blank" title="RealPlayerなどが起動します。">Mostly Classical ♪</a>

====　　この間、説明を省略。　　====

<a href="http://syndication.choiceradio.com/zap.cfm?og=390&broadband=true&pid=5" target="_self">ChoiceTropical ♪</a>　<a title="『*.pls　ﾌｧｲﾙの再生ｱﾌﾟﾘが不明』旨のﾀﾞｲｱﾛｸﾞ表示時は、ｸﾘｯｸ → 対処法。"
href="http://www…….htm" target="_blank">*.pls？</a></p>
</SPAN></div>

<div style="width:200; height:20; padding:0 0; margin:-8px -3px -8px 0px; border:#F0F0F4 1px dotted; overflow:visible
; z-index:0; visibility:visible; background-color:#FFFFFF;background-image: url('https://　……　/_images/blog/_c40/xml_xsl/m_wttec-075a5.gif');">
<A href="http://www001.upp.so-net.ne.jp/oka/index.html" target=_blank>
<IMG src="https://blog.so-net.ne.jp/_images/blog/_c40/xml_xsl/m_title002a.jpg" border="0" width="125" height="19" title="太陽風ДζΨΠ∀ ﾎｰﾑ・ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰで選択 → 下ﾌﾚｰﾑに表示"></a> <SPAN title=ｸﾘｯｸ　→　続きを、右に表示/折り畳みします。 style="CURSOR: hand; COLOR: #ffb100; BACKGROUND-COLOR:" onclick="document.all.idxxx00.style.display= document.all.idxxx00.style.display=='none' ? '' : 'none'">
　<IMG height=12 src="http://　……　10vl_r.gif" width=9 border=0 align=""></SPAN><SPAN id=idxxx00 style="DISPLAY: none"><br/>
<a href="http://www…….htm" "target=_blank"><IMG title=ｶﾚﾝﾀﾞｰいろいろ、日程表用、時計、潮汐表 src="http://www…….gif" border="0"></a>

====　　この間、説明を省略。　　====

<a href="http://www.…….htm" "target=_blank"><IMG height=20 alt="ﾗﾝﾀﾞﾑﾒｯｾｰｼﾞ - 小説家の箴言" src="http://www…….gif" width=20 border=0></a>

</SPAN></div>

・　“Sio-net Blog 月別表示”　での応用例　　　　　管理ﾍﾟｰｼﾞ → ﾃﾞｻﾞｲﾝ → ﾚｲｱｳﾄ → 月別表示 → ｺﾝﾃﾝﾂHTML編集

　　HTMLの編集方法

　下記↓ をｺﾋﾟｰし、ﾃｷｽﾄﾌｧｲﾙにﾍﾟｰｽﾄ後、ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、太字部分などを編集、HTML挿入にﾍﾟｰｽﾄします。

〔この列ﾍﾟｰｽﾄ不要〕

追加します　個別番号（ﾍﾟｰｼﾞ内の重複不可）IE

画像

※: IE onjy

<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<SPAN title=ｸﾘｯｸ　→　続きを、右に表示/折り畳みします。 style="CURSOR: hand; COLOR: #ffb100; BACKGROUND-COLOR:" onclick="document.all.idxxx001.style.display= document.all.idxxx001.style.display=='none' ? '' : 'none'">
　<IMG height=12 src="http://www001.upp.so-net.ne.jp/oka/10vl_r.gif" width=9 border=0></SPAN><SPAN id=idxxx001 style="DISPLAY: none"><br/>
<% content.header -%>
<ul>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<li><a href="/archive/<% archives.createstamp | date_format("%Y%m") %>-1"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ | echo('0') %>)</li>
<% /if -%>
<% /loop -%>
</ul>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>
</SPAN></div>

(*5) ：　ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ53　（ﾏｳｽｵｰﾊﾞｰ時にﾘﾝｸﾃｰﾌﾞﾙを出現。）　　　5　Back to Top

　・　“So-net blog　”お気に入り・ (*^.^*)　2” での応用例。　　　　　※: 関連・詳細情報は、top_navbar53.htm を参照。　　　Internet Explorer8では、“互換表示”で有効。　

　　HTMLの編集方法

下記↓ をｺﾋﾟｰし、ﾃｷｽﾄﾌｧｲﾙにﾍﾟｰｽﾄ後、Wordpadなどで開き、太字部分などを編集、ﾌﾘｰﾌﾟﾗｸﾞｲﾝやﾌﾘｰｽﾍﾟｰｽなどのHTML挿入にﾍﾟｰｽﾄします。

※ : < >内は半角英数限定。

外部CSS（例）、IEｷｬｯｼｭなどからｺﾋﾟｰ、任意のWebｻｰﾊﾞｰにｱｯﾌﾟﾛｰﾄﾞ。　　ﾀﾞｳﾝﾛｰﾄﾞは、ここを右ｸﾘｯｸ → 対象をﾌｧｲﾙを保存、で。　外部CSSは、既存のCSS中に記述可。

ﾒﾆｭｰ名1

ﾒﾆｭｰ名1

ﾒﾆｭｰ名2

ﾒﾆｭｰ名2

URL　ﾀｰｰｹﾞｯﾄ（新しいWin）　吹き出し　ｻｲﾄ名

以下、同様にﾊｲﾊﾟｰﾘﾝｸを記述。

※：全HTMLのｺﾋﾟｰは、IEでSo-net blogを開きます。　　右ｸﾘｯｸし、“ｿｰｽの表示” ﾒﾆｭｰを実行。　　“お気に入り・ (*^.^*)　2”　のｷｰﾜｰﾄﾞで検索（Ctrl+F）、右HTML部分を見つけます。

<div class="xxx">
<ul>
<li><a class=xx2 href="xxx.html"><b>　Fly Fishing ・ *… ― ～＼|・.・|┐</b></a>

<ul>
<li><a class="xx2" href="xxx.html">　Fly Fishing ・ *… ― ～＼|・.・|┐ -2　　　　></a>

<ul>
<li><a href="http://www.americanangler.com/" target="_blank" title="吹き出し">　American Angler</a></li>
<li><a href="http://www.americantrout.com/AT/Main/Main.html" target="_blank">　ｱﾒﾘｶﾝﾄﾗｳﾄ</a></li>

====　この間、説明を省略。　　====

<li><a target="_blank" href="http://tv.shimano.co.jp/type/trout/">　ﾄﾗｳﾄ SHIMANO TV</a></li>
<li><a href="blog_css.htm" target="_blank" title="このCSS作成方法">　ﾌﾞﾛｸﾞのｽﾀｲﾙｼｰﾄ（CSS）</a></li>
</ul>

</li>
<li><a href="http://www.onflyfishing.com/" target="_blank">　Fly Fishing Directory</a></li>
<li><a href="http://www.washingtonflyfishing.com/gallery/" target="_blank">　Fly Fishing Photo Gallery</a></li>

====　この間、説明を省略。　　====

<li><a href="http://www.nzfishing.com/" target="_blank">　New Zealand Fly Fishing</a></li>
<li><a href="http://www.washingtonflyfishing.com/" target="_blank">　Washington Fly Fishing</a></li>
</ul>

</li>
</li>
</ul>
</div>

　・　“So-net blog　”お気に入り・ (*^.^*)　3” での応用例。　　　　　※: 関連・詳細情報は、top_navbar53.htm を参照。　　　Internet Explorer8では、“互換表示”で有効。

　　HTMLの編集方法

※ : < >内は半角英数限定。

吹き出し　位置補正　個別番号（ﾍﾟｰｼﾞ内の重複不可）IE
ﾃｷｽﾄ　［>］画像　

ﾒﾆｭｰ名1

ﾒﾆｭｰ名1
　

ﾒﾆｭｰ名2　>

ﾒﾆｭｰ名2　>

URL　ﾀｰｰｹﾞｯﾄ（新しいWin）　吹き出し　ｻｲﾄ名　>

以下、同様にﾊｲﾊﾟｰﾘﾝｸを記述。

ｻｲﾄ 5の削除は、<li><a class=xx2 ～ </li> までを削除。

<div title="ｸﾘｯｸ　→　続きを、右・下に “表示/折り畳み” します。" style="position:relative; top:-20px; left:2px; width:190; height:10px; CURSOR: hand; COLOR: #3C0166; BACKGROUND-COLOR:" onclick="document.all.idxxx005.style.display= document.all.idxxx005.style.display=='none' ? '' : 'none'">いろいろ　<IMG height=12 src="http://www001.upp.so-net.ne.jp/oka/10vl_r.gif" width=9 border=0 align=""></div ><div id=idxxx005 style="DISPLAY: none">
<br/>

<div class="xxx">
<ul>
<li><a class=xx2 href="http://www./……/xxx.html" target="_blank">　 ｻｲﾄ 1</a>

<ul>
<li><a class="xx2" href="http://www./……/xxx.html" target="_blank" title="こんにちは、┌|・.・|┐">　 ｻｲﾄ 11 ></a>

<ul>
<li><a href="http://music.msn.com/" target="_blank">　msn ♪ Music</a></li>
<li><a href="http://www.live.com/" target="_blank" title="Windows Live- Powerd by Microsoft">　WindowsLive</a></li>
<li><a href="http://windowsmedia.microsoft.com/Mediaguide/Home" target="_blank" title="Microsoft">　Mediaguide/Home</a></li>

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

====　この間、説明を省略。　　====

　・　“Ameba blog ◇太陽風　>　”お気に入り・ (*^.^*)” での応用例。

　　HTMLの編集方法

※ : < >内は半角英数限定。

ieｷｬｯｼｭからｺﾋﾟｰ、任意のURLで。

ﾒﾆｭｰ名1

ﾒﾆｭｰ名2

URL　ﾀｰｰｹﾞｯﾄ（新しいWin）　吹き出し　ｻｲﾄ名

以下、同様。

※: HTMLｻｲｽﾞmax（4KB）対応は、
<li><a ～ </a></li>の行数を加減。

====　この間、説明を省略。　　====

<li><a href="http://www.　……　/hanoi.htm" target="_blank">　ﾊﾉｲの塔</a></li>
<li><a href="http://www　……　/blog_css.htm#(*5)" target="_blank" title="このCSS作成方法">　ﾌﾞﾛｸﾞのｽﾀｲﾙｼｰﾄ（CSS）</a></li>
</ul>

</li>
<li><a href="http://www　……　/google_map.htm" target="_blank">　 Google Map （地形・ｻｲｽﾞ可変変・ﾄﾞﾗｯｸﾞ）</a></li>
<li><a href="http://www.　……　/google_map3.htm" target="_blank">　 Google Map3 （ﾙｰﾄ案内）</a></li>

====　この間、説明を省略。　　====

<li><a href="http://www.　……　/google_earth10.htm" target="_blank" title="上空散歩・ｻﾝﾌﾗﾝｼｽｺなど">　 Google Earth10 （ｶﾒﾗｺﾝﾄﾛｰﾙ）</a></li>
<li><a href="http://www.pat.hi-ho.ne.jp/oka_tosho/google_api/google_feed.htm" target="_blank">　 Google Feed （ﾆｭｰｽｻｲﾄの見出し）</a></li>
</ul>

</li>
</li>
</ul>
</div>

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。