助太刀忍者(質問掲示板)

助太刀忍者

No.48010    ブログの背景・マージンの挙動が指定と異なる
こんばんは。このたび、制作中のブログのスタイル指定と表示が異なる挙動をするので質問いたします。具体的には、コピペして使っているスタイルシートによる背景・マージン指定が、忍者ホームページでは適用されているのにブログでは適切に指定されない現象が起こっています。

忍者ホームページと忍者ブログを併用し、ホームページ・ブログに用いるCSSを全文コピペして共用したサイトを制作しています(別途ソースを示します)。
ホームページではこのスタイル指定でdb19.jpgの背景が表示され、タイトル画像title_t.pngがブラウザ表示部の上辺と隙間なく表示されます。
ブログでは、背景が表示されず白くなり、タイトル画像と上辺の間にマージンがあきます。

html文書の中身については、下記の構成です。
・<body><div id="main">..............</div></body>で囲まれている。
・<div id="header"></div>、<div id="mainpart"></div>、コメント表示部、<p id="footer"></p>、<p id="CM"></p>から成る。

スタイルシートで今回気になっている点に関連する指定を以下で示します。
*{...........}でmargin, paddingについてCSSハックを行っています。body{...............}でbackground-image属性を当てて画像を表示しています(ホームページ(現状ローカル保存です)ではindex.htmlのすぐ下にある"images"ディレクトリにタイトル画像・背景画像をおいています。ブログでは管理ページにあるアップローダで同じタイトル画像・背景画像をアップしています。)

作りかけの上にそもそもわかりにくい構造かと思いますが、背景・マージンの反映がおかしくなる原因で思いつく点があればよろしくお願いします。


1:ホームページ(index.html)のソース

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=Shift_JIS" />
<meta name="author" content="端本昴" />
<meta name="description" content="端本昴の個人イラストサイト「端本の書架 (はほん の しょか)」です。本ページがトップページです。" />
<link rel="stylesheet" href="style/style_ovs.css" />
<link rel="start" href="http://odd-volumes.net/" title="入り口" />
<title>端本の書架 - Odd volumes in a stack.</title>
</head>


<body><div id="main">

<div id="header">
<h1 id="title"><a href="http://odd-volumes.net"><img src="images/title_t.png" alt="端本の書架 - Odd volumes in a stack." /></a></h1>
<ul id="contents">
<li class="contents_item"><a href="http://gallery.odd-volumes.net/" >展示&nbsp;-&nbsp;gallery</a></li>
<li class="contents_item"><a href="http://diary.odd-volumes.net/" >日誌&nbsp;-&nbsp;diary</a></li>
<li class="contents_item"><a href="http://information.odd-volumes.net/about.html" >奥付&nbsp;-&nbsp;imprint</a></li>
</ul>
</div>

<div id="mainpart">
<h2><img id="image_index" src="" alt="ようこそ。" /></h2>
<p>(カウンタ) visitors since April, 2011.</p>
<p>当サイト「端本の書架 (はほん の しょか)」は、端本昴の個人サイトです。</p>
<h2>目次</h2>
<ul>
<li><a href="http://gallery.odd-volumes.net/">展示</a>&nbsp;:&nbsp;イラストなどを置いてます</li>
<li><a href="http://diary.odd-volumes.net/">日誌</a>&nbsp;:&nbsp;ブログです</li>
<li><a href="http://information.odd-volumes.net/about.html">奥付</a>&nbsp;:&nbsp;サイトの情報、メールフォームなどはこちらにあります</li>
</ul>
<h2>更新など</h2>
<ul>
<li>2011.4.1&nbsp;サイト制作中ですよ</li>
</ul>
</div>

<p id="footer">&copy;2011- Subaru Hashimoto All Rights Reserved.&nbsp;Wallpaper created by xxxxxxxxx.</p>

</div></body>
</html>
使用環境
  • OS:Microsoft Windows XP
  • ブラウザ:Opera 11.10
  • モニター:1024×768
  • JavaScript:ON
  • Cookie:ON
  • 回線種別:
  • ソフトウェア:
試した操作手順
Opera11.10とIE8で同じ現象が発生していることを確認しました。
投稿者:昴 投稿時間:2011-04-16 23:35:54

この質問は解決済みです

投稿者 : No Name Ninja
投稿時間:2011-04-17 05:46:42
こういうのはカスタマイズBBSで聞いた方が良いのではないかと思います。
忍者ブログでは(というかどのブログサービスもですが)
文字コードをユーザーが指定することはできません。
CSSがうまく読み込めていないのではないでしょうか

忍者ブログヘルプ
独自構文解説書/ページの種類について
http://blog.ninja.co.jp/Tag/3/
>文字コードはUTF-8限定になります
質問者からのコメント 2011-04-17 10:48:47
回答ありがとうございます!今後は適切な場所で質問するようにします。

文字コードが限定されていることには今回のご指摘で初めて気づきました。今本文とCSSの文字コード指定をすべてUTF-8に変更したら、一発で表示が改善されました!最初の最初でつまづいていたようですね。

大変助かりました!多謝です!
投稿者 : 昴@スレ主
投稿時間:2011-04-16 23:36:59
2:ブログのhtmlソース

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=Shift_JIS" />
<meta name="author" content="端本昴" />
<meta name="description" content="<!--if_entry--><!--$entry_title-->&nbsp;-&nbsp;<!--/if_entry-->展示&nbsp;-&nbsp;端本の書架 - Odd columes in a stack. " />
<link rel="stylesheet" href="<!--$g_css_link-->" />
<link rel="start" href="http://odd-volumes.net/index.html" title="入口" />
<link rel="contents" href="http://gallery.odd-volumes.net/" title="展示" />
<!--if_next_page--><link rel="next" href="<!--$pagelink_next_link-->" title="<!--$pagelink_next_title-->" /><!--/if_next_page-->
<!--if_prev_page--><link rel="prev" href="<!--$pagelink_prev_link-->" title="<!--$pagelink_prev_title-->" /><!--/if_prev_page-->
<title><!--if_entry--><!--$entry_title-->&nbsp;-&nbsp;<!--/if_entry-->展示&nbsp;-&nbsp;端本の書架 - Odd columes in a stack. </title>
</head>

<body><div id="main">

<div id="header">
<h1 id="title"><a href="http://odd-volumes.net/index.html"><img src="http://file.gallery.odd-volumes.net/title_t.png" alt="端本の書架" /></a></h1>
<ul id="contents">
<li class="contents_item"><a href="http://gallery.odd-volumes.net/" >展示&nbsp;-&nbsp;gallery</a></li>
<li class="contents_item"><a href="http://diary.odd-volumes.net/">日誌&nbsp;-&nbsp;diary</a></li>
<li class="contents_item"><a href="http://information.odd-volumes.net/about.html">奥付&nbsp;-&nbsp;imprint</a></li>
</ul>
</div>

<div id="mainpart">

<!--if_page-->
<h2>展示</h2>
<p>左、上にあるものがより新しい作品です。クリックすると全体が表示されます。</p>
<!--entry-->
<p class="thumbnail">
<a href="<!--$g_url-->Entry/<!--$entry_no-->/"><img src="http://file.gallery.odd-volumes.net/thumb-<!--$entry_text-->" alt="<!--$entry_title-->の縮小画像を表示しています。クリックしたら大きいサイズで表示します。" /></a><br />
<!--$entry_year-->.<!--$entry_mon-->.<!--$entry_day-->
</p>
<!--/entry-->
<!--/if_page-->

<!--if_entry-->
<!--if_prev_page--><p id="new"><a href="<!--$pagelink_prev_link-->">&lt;&lt;<!--$pagelink_prev_title--></a></p><!--/if_prev_page-->
<!--if_next_page--><p id="old"><a href="<!--$pagelink_next_link-->"><!--$pagelink_next_title-->&gt;&gt;</a></p><!--/if_next_page-->
<div style="clear:both;"></div>
<!--entry-->
<p id="image_box"><img id="image" src="http://file.gallery.odd-volumes.net/<!--$entry_text-->" alt="<!--$entry_title-->の画像を表示しています" /></p>
<div id="image_description_block">
<h2 id="image_title"><!--$entry_title--></h2>
<p id="image_upload">Uploaded&nbsp;on&nbsp;<!--$entry_year-->.<!--$entry_mon-->.<!--$entry_day--></p>
<p class="image-description"><!--$entry_ps_text--></p>
<p class="cmtb"><a href="#comments_header">C:<!--$entry_comment_num--></a>|&nbsp;<a href="<!--$entry_link-->">▲</a></p>
</div>
<!--/entry-->
<!--/if_entry-->

</div>

<!--if_entry-->
<!--entry-->
<!--if_cm_receipt-->
<h2 id="comments_header">[コメント]</h2>
<!--comment-->
<h3 class="comments_name"><!--$comment_no-->&nbsp;.<!--$comment_name--></h3>
<p class="comments_text"><!--$comment_text-->&nbsp;(&nbsp;<!--$comment_year-->.<!--$comment_mon-->.<!--$comment_day-->&nbsp;)</p>
<!--/comment-->
<!--/if_cm_receipt-->
<!--/entry-->
<!--/if_entry-->

<p id="footer">&copy;2011- Subaru Hashimoto All Rights Reserved.</p>

<p id="CM"><!--CM1-->,&nbsp;<!--CM2--></p>

</div></body>
</html>


3:スタイルシート(ホームページ・ブログ共通)

@charset "Shift_JIS";

/*基本設定*/
*{margin:0px;padding:0px;font-family:sans-serif;}
body{
text-align:center;/*IE*/
background-image:url("http://file.gallery.odd-volumes.net/db19.jpg");
font-size:90%;
}
div#main{
text-align:left;/*IE*/
margin-left:auto;
margin-right:auto;
width:850px;
}
#mainpart{
clear:both;
overflow:auto;
}

/*標準スタイル*/
p{
line-height:1.5em;
text-indent:1em;
}
li{
}
a:link { text-decoration:none;color:#008822; } /* 未訪のリンク */
a:visited { text-decoration:none;color:#00cc44; } /* 訪問済みのリンク */
a:hover { color: #00ffaa; } /* カーソルが上に乗っているリンク */
/*aの文字色はmada適当20110416*/
/*ヘッダー*/
#header{
width:100%;
}
#title{
}
#contents{}
.contents_item{
list-style-type:none;
display:inline;
}
/*index*/
#link_pixiv{
border-style:none;
}
#image_index{
float:left;
width:400px;
height:500px;
}

/*展示室*/
.thumbnail{
margin:0px;
padding:0px;
width:100px;
line-height:0em;
text-indent:0em;
text-align:center;
float:left;
}

/*エントリ内*/
#new{
text-indent:0em;
line-height:1em;
width:50%;
}
#old{
text-indent:0em;
line-height:1em;
width:50%;
}
#image_box{
padding-left:25px;
text-indent:0em;
float:left;
}
#image{
width:500px;
}
#image_description_block{
padding-left:10px;
padding-right:25px;
}
#image_title{
text-indent:0px;
}
#image_upload{
text-indent:0px;
}
#image_description{
}
#comments_header{
clear:both;
}
#footer{
clear:both;
}

以上。