サンプルページ ブログのスタイルシート
 (*1) : So-net  (*2) : Ameba  (*2g) : goo
2013/10/23 12:30 更新

ブログのスタイル・スキン・スタイルシート(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をテキストファイルにコピー。

 ・ サイドバへ任意HTML挿入方法(”ー”フリープラグイン”や”フリースペース”へ) : Amebaは、【Amebaトップへ】- [ブログ] - [サイドバーの設定] - フリープラグイン〔設定〕- で、あるいは、 〃 フリースペース〔設定〕- で。    So-netは、【管理ページ】- [デザイン] - [レイアウト] - で。    HTML(例) : (*3) : DIV・オーバーフロースクロール 、(*4) : 折り畳みコンテンツ(spanの隠しコンテンツを右に表示)、(*5) : トップナビバー53 (マウスオーバーでリンクテーブルを表示)-IE8では、“互換表示”で有効。       関連情報いろいろ  : ”月別表示”をプルダウンメニューに変更するorg)、”サイドバーを折り畳みに”(org)。 

 ・ 表示テストは、 それぞれ、”スタイルシート(CSS)編集メニュー” > ”プレビュー”で保存前・直接行えます。    また、ブラウザで既に表示中であった場合は、[F5]キー を押すなどで、キャッシュを更新・最新データ読み込んで、行います。(※: 再アクセス・Enterキーや、前に”戻る”では未反映。)

 ・ 関連情報 :色記号5〃6スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

(*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('……/xxxxh.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('……/xxxxt.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(……/xxxxt.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(……/xxxxt.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(……/xxxxt.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,'MS Pゴシック',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,'MS Pゴシック',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挿入にペーストします。
  〔この列ペースト不要〕

 

追加します 背景画像

 

 

 

追加します

 

<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<div style="width:185px; height:100px; padding:0 0; margin:-8px -3px -8px 0px;overflow:auto; background:#F9F8F9 url('https://blog.so-net.ne.jp/_images/blog/_c40/xml_xsl/m_wttec-075a5.gif');">
<% content.header -%>
<ul>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<li><a href="<% archives.page_url %>"><% 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>
</div>
 

 

 

 ・ “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%”、部分は 、”→ それぞれの値”に変更して使用。

 

<!-- ★ ----  (*3) : DIV・オーバーフロースクロール ---- ↓ この間をコピー&ペーストします。 ------------ -->
<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>
<!-- ★ ----  (*3) : DIV・オーバーフロースクロール ---- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

 ・ “Sio-net Blog プロフィール” の応用例   

  HTMLの編集方法  下記↓ をコピーし、テキストファイルにペースト後、または blog_css.htm を テキストエディターで開 きコピー後、太字部分などを編集、フリープラグインやフリースペースなどの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/>

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

<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>

 

(*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
画像

 

コンテンツ

 

<!-- ★1 ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<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>
<!-- ★1 ----------- ↑ この間をコピー&ペーストします。 ------------ -->


<!-- ★2 ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<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>
<!-- ★2 ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

・ “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部分を見つけます。

 

<link media=all href="http://www.pat.hi-ho.ne.jp/oka_tosho/00574131a.css" type=text/css rel=stylesheet>


<div class="xxx">
<ul>
<li><a class=xx2 href="xxx.html"><b> Fly Fishing ・ *… ― 〜\|・.・|┐</b></a>
<!--[if lte IE 6]>
<a href="xxx.html"><b> Fly Fishing ・ *… ― 〜\|・.・|┐</b>
<table><tr><td>
<![endif]-->
<ul>
<li><a class="xx2" href="xxx.html"> Fly Fishing ・ *… ― 〜\|・.・|┐ -2    ></a>
<!--[if lte IE 6]>
<a class="xx3" href="xxx.html"> Fly Fishing ・ *… ― 〜\|・.・|┐ -2    >
<table><tr><td>
<![endif]-->
<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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</li>
</ul>
</div>

 

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

  HTMLの編集方法  下記↓ をコピーし、テキストファイルにペースト後、Wordpadなどで開き、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。
  ※ : <   >内は半角 英数限定。

外部CSS(例)、IEキャッシュなどからコピー 、任意のWebサーバーにアップロード。  ダウンロードは、ここを右クリック → 対象をファイルを保存、で。 外部CSSは、既存のCSS中に記述可。

吹き出し 位置補正 個別番号(ページ内の重複不可)IE
テキスト >画像 


メニュー名1

メニュー名1
 

メニュー名2 >

メニュー名2 >


URL ターーゲット(新しいWin) 吹き出し サイト名 >

以下、同様にハイパーリンクを記述。

 

 

 

※: 全HTMLのコピーは、IEでSo-net blogを開きます。  右クリックし、“ソースの表示” メニューを実行。  “お気に入り・ (*^.^*) 2” のキーワードで検索(Ctrl+F)、右HTML部分を見つけます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

サイト 5の削除は、<li><a class=xx2 〜 </li> までを削除。

 

<link media=all href="http://www.pat.hi-ho.ne.jp/oka_tosho/00574131a.css" type=text/css rel=stylesheet>

 

<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/>
<!-- □ ----------- ↓ 展開/折り畳みメニュー 190x5 ------------ -->
<div class="xxx">
<ul>
<li><a class=xx2 href="http://www./……/xxx.html" target="_blank">  サイト 1</a>
<!--[if lte IE 6]>
<a href="http:// …… .html">  サイト 1
<table><tr><td>
<![endif]-->
<ul>
<li><a class="xx2" href="http://www./……/xxx.html" target="_blank" title="こんにちは、┌|・.・|┐">  サイト 11 &gt;</a>
<!--[if lte IE 6]>
<a class="xx3" href="http://www./……/xxx.html" target="_blank">  サイト 11 &gt;
<table><tr><td>
<![endif]-->
<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>

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

<li><a href="http:// …… .html">  サイト 119</a></li>
<li><a href="http:// …… .html">  サイト 1110</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="http://www.cuil.com/" target="_blank" title="Super Search"> cuil</a></li>

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

<li><a href="http:// …… .html">  サイト 110</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class=xx2 href="http://www./……/xxx.html" target="_blank">  サイト 2</a>
<!--[if lte IE 6]>
<a href="http:// …… .html">  サイト 2
<table><tr><td>
<![endif]-->
<ul>
<li><a class="xx2" href="http://www./……/xxx.html" target="_blank">  サイト 21 &gt;</a>
<!--[if lte IE 6]>
<a class="xx3" href="http://www./……/xxx.html" target="_blank">  サイト 21 &gt;
<table><tr><td>
<![endif]-->
<ul>
<li><a href="http:// …… .html">  サイト 211</a></li>

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

<li><a href="http:// …… .html">  サイト 2110</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="http:// …… .html">  サイト 22</a></li>

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

<li><a href="http:// …… .html">  サイト 210</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class=xx2 href="http://www./……/xxx.html" target="_blank">  サイト 3</a>
<!--[if lte IE 6]>
<a href="http:// …… .html">  サイト 3
<table><tr><td>
<![endif]-->
<ul>
<li><a class="xx2" href="http://www./……/xxx.html" target="_blank">  サイト 31 &gt;</a>
<!--[if lte IE 6]>
<a class="xx3" href="http://www./……/xxx.html" target="_blank">  サイト 31 &gt;
<table><tr><td>
<![endif]-->
<ul>
<li><a href="http:// …… .html">  サイト 311</a></li>

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

<li><a href="http:// …… .html">  サイト 3110</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="http:// …… .html">  サイト 32</a></li>

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

<li><a href="http:// …… .html">  サイト 310</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class=xx2 href="http://www./……/xxx.html" target="_blank">  サイト 4</a>
<!--[if lte IE 6]>
<a href="http:// …… .html">  サイト 4
<table><tr><td>
<![endif]-->
<ul>
<li><a class="xx2" href="http://www./……/xxx.html" target="_blank">  サイト 41 &gt;</a>
<!--[if lte IE 6]>
<a class="xx3" href="http://www./……/xxx.html" target="_blank">  サイト 41 &gt;
<table><tr><td>
<![endif]-->
<ul>
<li><a href="http:// …… .html">  サイト 411</a></li>

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

<li><a href="http:// …… .html">  サイト 4110</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="http:// …… .html">  サイト 42</a></li>

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

<li><a href="http:// …… .html">  サイト 410</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class=xx2 href="http://www./……/xxx.html" target="_blank">  サイト 5</a>
<!--[if lte IE 6]>
<a href="http:// …… .html">  サイト 5
<table><tr><td>
<![endif]-->
<ul>
<li><a class="xx2" href="http://www./……/xxx.html" target="_blank">&lt;  サイト 51</a>
<!--[if lte IE 6]>
<a class="xx3" href="http://www./……/xxx.html" target="_blank">&lt;  サイト 51
<table><tr><td>
<![endif]-->
<ul class="left">
<li><a href="http:// …… .html">  サイト 511</a></li>

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

<li><a href="http:// …… .html">  サイト 5110</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="http:// …… .html">  サイト 52</a></li>

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

<li><a href="http:// …… .html">  サイト 510</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</li>
</ul>
</div>
<!-- □ ----------- ↑ 展開/折り畳みメニュー 190x5 ------------ -->
</div>

 

 

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

  HTMLの編集方法  下記↓ をコピーし、テキストファイルにペースト後、Wordpadなどで開き、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。
  ※ : <   >内は半角 英数限定。

ieキャッシュからコピー、任意のURLで。

メニュー名1

メニュー名1


メニュー名2

メニュー名2


URL ターーゲット(新しいWin) 吹き出し サイト名

以下、同様。

※: HTMLサイズmax(4KB)対応は、
<li><a 〜 </a></li>の行数を加減。

 

 

<link media=all href="http:// …… /00574131a.css" type=text/css rel=stylesheet>
<div class="xxx">
<ul>
<li><a class=xx2 href="xxx.html"><b> お気に入り ・ (*^.^*)</b></a>
<!--[if lte IE 6]>
<a href="xxx.html"><b> お気に入り ・ (*^.^*)</b>
<table><tr><td>
<![endif]-->
<ul>
<li><a class="xx2" href="xxx.html"> お気に入り ・ (*^.^*) -2    ></a>
<!--[if lte IE 6]>
<a class="xx3" href="xxx.html"> お気に入り ・ (*^.^*) -2    >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="http://www …… /koro-tyanf.html" target="_blank" title="吹き出しテキスト・(^。^)/">  =(・。.・)= ころちゃん f +larbo+</a></li>
<li><a href="http://www. …… /5narabe.htm" target="_blank">  5並べ</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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</li>
</ul>
</div>

 

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

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。