HTML 4.01 Transitional
互換モード

Internet Explorer Sleipnir Lunascape などで「透過」が適用される。

yaplog だからといって特別な部分はありません。

スタイルシート（関連部分のみ）

body {
margin: 0;
background-image: url(http://file.sever.blog.shinobi.jp/top_bg.gif);
overflow: hidden; /* スクロールバーを表示しない */
scrollbar-3dlight-color: #ff1493;
scrollbar-arrow-color: #00f;
scrollbar-darkshadow-color: #00f;
scrollbar-face-color: #ff1493;
scrollbar-highlight-color: #00f;
scrollbar-shadow-color: #ff1493;
scrollbar-track-color: #ff1493;
cursor: url(http://abcdef.jp/ghij/klmno.cur)
}

.scroll {
width: 100%; /* 適用範囲の指定 */
height: 100%; /* 適用範囲の指定 */
overflow: auto; /* スクロールバー自動表示 */
filter: chroma(color=#ff1493) /* 透過色を指定 */
}

3 行目にページの背景画像を指定していますが、フリースキンのスタイルシートにはこの body と言う指定箇所がないので、背景画像指定時に記載することが多い。従って、スクロールバーやカーソルについてもまとめて記述するのが効率的。

yaplog ではカーソルファイルをアップロードすることが出来ないので、プロバイダ・サービススペースを含む有料サーバーにアップロードするか、もしくは直リンクが可能なカーソル提供サイトを利用することになります。

step 01 body にスクロールバーの色替えを指定。（自分の好みにカスタマイズのこと）

step 02 色を確認後 body にスクロールバー非表示とする

step 03 .scroll と言うセレクタを新設。そっくりコピーして透過色だけを変更すればよい。

メインテンプレート 3 コラムフリースキン

「アーカイブテンプレート」や「一記事テンプレート」も同じようにする。（だから yaplog はメンドークサイ）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>{$BlogName$}</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$BlogUrl$}index1_0.rdf">
<link rel="stylesheet" href="{$BlogUrl$}style.css" type="text/css">
{$GMOtabA$}
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="scroll"> 
{$GMOtabB$}
□<br> （□は「全角空白」の意味）
<table align="center" cellpadding="0" cellspacing="0" border="0" class="range" width="760">

中間省略

<br>
{$BlogAccessCounter$}
</div> 
</body>
</html>

step 04 文書型宣言に dtd ファイル URL があれば削除して
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と「互換モード」にする。

step 05 <body> のスグ下に <div class="scroll"> を挿入。

step 06 </body> のスグ上に </div> を挿入。

メインテンプレート 2 コラムフリースキン

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>{$BlogName$}</title>
<meta name="keywords" content="{$BlogName$},{$RelationWord$},ブログ">
<meta name="abstract" content="{$BlogDescription$}">
<meta name="description" content="{$BlogDescription$},{$RelationWord$}">
<meta name="robots" content="all">
<meta http-equiv="content-language" content="ja">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link rel="alternate" href="{$BlogUrl$}index1_0.rdf" type="application/rss+xml" title="RSS">
<link rel="stylesheet" href="{$BlogUrl$}style.css" type="text/css" media="all">
<link rel="shortcut icon" href="http://www.yaplog.jp/image/favicon.ico">
{$GMOtabA$}
</head>

<body class="m">
<div class="scroll"> 
{$GMOtabB$}
<a name="t"></a>

中間省略

{$BlogAccessCounter$}
</div>
</div>
</div>
</div> 
</body>
</html>

Netscape Mozilla Firefox Safari (Mac) では標準のスクロールバーで表示され、Opera では色替えしたカタチで透過しないスクロールバーになる。

HTML 4.01 Transitional互換モード

HTML 4.01 Transitional
互換モード