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

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

(*1) : So-net　　(*2) : Ameba　　(*2g) : goo

2022/10/24 09:08　更新

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

< ご使用方法 >

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

　・　CSSﾌｧｲﾙの作成・保存 : 【任意のﾎﾙﾀﾞｰ】- [右ｸﾘｯｸ] - [新規作成] - [ﾃｷｽﾄﾄﾞｷｭﾒﾝﾄ] - ”新規ﾃｷｽﾄﾄﾞｷｭﾒﾝﾄ.txt”を作成します。　　既存のﾌﾞﾛｸﾞの ”[ｽｷﾝCSSの編集] ” などから目的のCSSをｺﾋﾟｰ、css1.txt（任意名）保存・ﾊﾞｯｸｱｯﾌﾟします。

　・　ｽﾀｲﾙｼｰﾄ（CSS）の編集は、ﾃｷｽﾄｴﾃﾞｨﾀｰ（≠Wordpad）やｺｰﾄﾞ編集ﾒﾆｭｰなどで行います。　　　表示効果とCSSの対象は本例を参考に！。　　　下記の（例） (*1) : So-netと、(*2) : Ameba、(*2g) : gooを参考に太字部分の編集を任意に行います。

　・　要素のまとめ指定は、『 , 』、属性は『 ; 』で複数を区切り指定可。　　同じものへの複数の定義は後方の定義が優先。　　セレクヤ具体性：同要素に対し、セレクタIDがセレクタCLASSより優先。　　CLASSがセレクタHTML要素名より優先。　　優先順位は、(1) インラインスタイル、(2) ID、(3) CLASS、および(4) HTML要素の順。　　カスケーディングは特定の要素のスタイル順を決定。　　継承は、スタイルプロパティの次の要素への継承を指定。

　･　ｽﾀｲﾙｼｰﾄ（CSS）編集ﾒﾆｭｰ（画面） : So-netは、【管理ﾍﾟｰｼﾞ】- [ﾃﾞｻﾞｲﾝ] - [ﾃﾝﾌﾟﾚｰﾄ管理] -　該当ｽｷﾝを選択へ。　　　Amebaは、【Amebaﾄｯﾌﾟ・ﾎｰﾑへ】- [ﾌﾞﾛｸﾞ管理] - [ﾃﾞｻﾞｲﾝの設定] - [CSSの編集] - で。　　gooは、ﾛｸﾞｲﾝ - 【gooﾌﾞﾛｸﾞ】- [ﾃﾞｻﾞｲﾝﾒﾆｭｰ　→　ﾃﾝﾌﾟﾚｰﾄ編集] - [ﾃﾞｰﾀ編集　→　CSSﾃﾞｰﾀ] 　で。　

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

　・　CSS情報いろいろ : ”月別表示”をﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰに変更する（org）、”ｻｲﾄﾞﾊﾞｰを折り畳みに”（org）。　

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

　･　関連情報：色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。
　

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

　表示効果の説明　

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

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

以下ｻｰﾊﾞｰの仕様変更の影響など
　

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

ｶｰｿﾙ（個別）（無効）

※: x　背景色無効化（個別）

ﾍｯﾀﾞｰ ”SSﾌﾞﾛｸﾞ ………… AD”
※: 現在無効
背景画像（個別）

※: 2008-3～　ｶｽﾀﾏｲｽﾞ無効化。

ﾌﾞﾛｸﾞ名称
ﾊﾞﾅｰ（ﾄｯﾌﾟﾀｲﾄﾙ枠）
幅
外上右下左余白
内上右下左余白　（※ :ﾀｲﾄﾙ文字位置　ﾊﾞﾅｰ画像表示高さ）
ﾌｫﾝﾄ種類

ﾊﾞﾅｰ画像（背景画像）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:150%;
font-size: 13px;
font-family:メイリオ,Lucida Sans Regular;
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 {
line-height:150%;
font-size: 12px;
font-family:メイリオ,Lucida Sans Regular;
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) ：　css1.txt　　　　〔Ameba〕（例）　　　5　Back to Top

　表示効果の説明　

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

以下ｻｰﾊﾞｰの仕様変更の影響など

ﾘﾝｸのﾌｫﾝﾄ種類

全体のﾌｫﾝﾄｻｲｽﾞ

全体背景画像（個別）
背景色

ﾌｫﾝﾄ色
ﾌｫﾝﾄ種類
ｱﾆｶｰｿﾙ（※:無効）
　

ﾒｲﾝ枠幅

背景画像

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

ヘッダー

ﾄｯﾌﾟ背景画像

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

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

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

ヘッダー内ナビゲーション
最上談ﾊﾞｰ
”　ﾎｰﾑ　ﾋﾞｸﾞｱﾒﾌﾞﾛ　……　ｱｲｺﾝ　”
背景画像（※：無効）
　

メインコラム＿お気に入りブログ一覧

メインコラム＿ブックマーク一覧

サイド＿サイドA,B共通項目

ｻｲﾄﾞﾀｲﾄﾙﾌｫﾝﾄ色
〃背景画像（個別）
〃背景色
〃ﾌｫﾝﾄｻｲｽﾞ
〃太字

ﾌｫﾝﾄｻｲｽﾞ
行間隔

サイド＿プロフィール

サイド＿カレンダー

サイド＿プラグイン

フッター

/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2022.10.15
Skin for: all_skin
2022-10-20 15:24
-----------------------------------------------------
*/
form{
margin:0px;
}
.menu_frame select{
width:88%;
}
.page a{
text-align: center;
padding: 5px;
line-height:1.5;
font-family:メイリオ,Arial,MS PGothic,Lucida Sans Regular,Arial,;
}
.page .now{
padding: 5px;
font-weight:bold;
}
.entry .contents{
line-height:1.5;
}
.entry .contents img{
margin-right:5px;
margin-left: 5px;
}
　

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

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■ 基本設定 ■■■■■■■■■■■■*/
html {
font-size:0.95em !important;
*font-size:100% !important;/*forIE6IE7*/
}
body{
margin: 0;
padding: 0;
background: #F9F8F9 url('http://　……　uhskr_wh.gif');
background-color: #FFFFFF;
text-align:center;
color:#000000;
font-family:メイリオ,Arial,MS PGothic,Lucida Sans Regular,Arial,;
cursor:url("http://　……　ani_cursol/ani5.ani");
}
#frame{
width: 840px;
margin:0 auto;
background: #F9F8F9 url('http://　……　uhskr_wh.gif');
background-color: #FFFFFF;
text-align:left;
color:#000000;
}
#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('https://　……　……　wttec-075a5.gif');
background-color: #FFFFFF;
}
#sub_b{
color:#666666;
background: #F9F8F9 url('https://　……　……　wttec-075a5.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:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; 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('https://　……　……　40619.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:#FFFFFF; background-color:#000000; text-decoration:none; }
div#header h1 a:link { color:#FFFFFF; background-color:#000000; text-decoration:none; }
div#header h1 a:visited { color:#F8F4FE; background-color:#260052; text-decoration:none; }
div#header h1 a:hover { color:#E2FE6F; background-color:#6500D7; text-decoration:underline; }
div#header h1 a:active { color:##FBFED8; background-color:#FEBDF0; text-decoration:underline; }

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

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

div#userNaviArea{
background-image: url('https://　……　……　30tbwh2-a8413.gifh');
padding:2px 0 2px 0 !important;
}

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

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('https://　……　……　30tbwh2-a8413.gif');
background-color:#EFEFEF;
color:#222222;
font-size:1.0em;
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.2em;
}

#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.3em;
}

#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:#0F0016; background-color:#FBFAFE; text-decoration:none; }
text-decoration:none;
}

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

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

#joinbookList a:active{ color:#1F002E; background-color:#EFF7DE; 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('https://　……　……　30tbwh2-a8413.gif');
background-color:#EFEFEF;
font-size:1.17em;
font-weight: bold;
}

div.mainMenu{
margin:0 0 10px 0;
padding:0;
font-size:0.86em;
line-height: 1.4;
}

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;
font-size:1.1em;
}

#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:1.1em;
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('https://　……　……　30tbwh2-a8413.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:0;
}

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

}
#sub_b{
display: none;
}
　

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

　表示効果の説明　

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

　※: 現在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://　……　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://　……　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://　……　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://　……　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>

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

　・　ﾃｷｽﾄｴﾃﾞｨﾀｰによるHTMLｺｰﾄﾞを見ながらの直接編集方法。