Tomo回答ポイント 80ptウォッチ

【いるか賞の方に500P差し上げます。】

FC2ブログのテンプレートを加工したいのですが、
スタイルシート（必要であればHTMLファイルも）をどのように、修正すればよいか教えていただけると
助かります。

テンプレート名:sea_simple_seo_v2
テンプレートを利用しているブログ：http://goodman777.blog24.fc2.com/

cssファイル
http://blog-imgs-46.fc2.com/g/o/o/goodman777/csssample.txt

htmlファイル
http://blog-imgs-46.fc2.com/g/o/o/goodman777/htmlsample.txt

[加工したい箇所]
1,左サイドのカラム＝幅325px
2,右サイドのカラム＝幅325px
3,中央のカラム=幅412px
4,ヘッダーの下に、幅1162px(ブログの左枠～右枠まで）縦70pxの　メニューを入れるスペース。

どうぞよろしくお願いいたします。

• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• あすか2010/12/24 18:50:50

  満足27pt

  1,左サイドのカラム＝幅325px

  2,右サイドのカラム＝幅325px

  3,中央のカラム=幅412px

  CSSを以下のように変更してください。

  @charset "EUC-JP";
  
  /*Sea_Simple_Seo_v2
  ---------------------------------------------------------*/
  
  /*色変更－色を変える時は、ここを変えればだいたいＯＫです。
  ---------------------------------------------------------*/
  #blogtitle a{
  	color : #0066CC; /*ブログのタイトル色*/
  }
  
  .color_mainframe{
  	border-left : 4px solid #0066CC; /*枠の色 左*/
  	border-right : 4px solid #0066CC; /*枠の色 右*/
  }
  
  .color_topframe{
  	border-bottom : 2px solid #0066CC;
  }
  
  .color_sidetitle{
  		color: #FFF; /*サイドバーの文字色*/
  }
  
  .color_sidebar{
  	background-color: #0066CC; /*サイドバーの背景色*/
  }
  
  .color_entrybg{
  	background-color: #F5F5F5; /*エントリーの背景色*/
  }
  
  .color_entrytitle{
  	background-color: #0066CC; /*エントリータイトル色*/
  	color: #FFF; /*エントリータイトルの文字色*/
  }
  
  .color_entrytext{
  	color: #333; /*エントリー本文の文字色*/
  }
  
  
  /*全体
  ---------------------------------------------------------*/
  *{
  	margin: 0px;
  	padding: 0px;
  	font-size :100%;
  	font-style :normal;
  	font-family: "Lucida Grande","Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
  }
  
  body{
  	margin: 0px;
  	padding: 0px;
  	background-color: #FFF;
  	text-align: center;
  }
  
  #container {
  	width: 1062px;
  	margin-right: auto;
  	margin-left: auto;
  	font-size: 13px;
  	line-height: 140%;
  	background-color: #FFF;
  }
  
  #wrap{
  	width: 1062px;
  	margin:0px;
  }
  
  #box2 {
  	width: 660px;
  	text-align: left;
  	float : left;
  }
  #left {
  	float : left;
  	width : 325px;
  	overflow: hidden;
  }
  
  #right {
  	float : left;
  	width : 325px;
  	overflow:hidden
  }
  
  #main {
  	padding: 15px 0px;
  	float: right;
  	width: 412px;
  	overflow: hidden;
  }
  
  #mainbox {
  	margin: 0px auto;
  	width: 412px;
  }
  
  /*ヘッダ
  ---------------------------------------------------------*/
  #header {
  	text-align: left;
  	width:1062px;
  	height : 110px;
  }
  
  #header a{
  	text-decoration: none;
  }
  
  #header a:hover{
  	text-decoration: underline;
  }
  
  #blogtitle {
  	font-weight : bold;
  	padding : 10px;
  	margin : 0px;
  	font-size : 20px;
  }
  
  .introduction {
  	width: 550px;
  	font-size: 12px;
  	font-weight: normal;
  	line-height: 16px;
  	padding-top: 8px;
  	padding-left: 10px;
  }
  
  a { color: #483D8B; text-decoration : underline; }
  a:hover { color: #FF4500; text-decoration : underline; }
  a:link { color: #483D8B; text-decoration : underline; }
  a:visited { color: #483D8B; text-decoration : underline; }
  a:active { color: #483D8B; text-decoration : underline; }
  
  /*一般再定義
  ---------------------------------------------------------*/
  img{
  	border:0px;
  }
  
  i{
  	font-style: italic;
  }
  
  blockquote {
  	margin: 5px;
  	background-color: #FFF;
  	padding: 5px;
  	border-top: 1px dotted #0066CC;
  	border-right: 1px dotted #0066CC;
  	border-bottom: 1px dotted #0066CC;
  	border-left: 1px dotted #0066CC;
  }
  
  
  pre {
  	margin: 5px;
  	background-color: #FFF;
  	padding: 5px;
  }
  
  table{
  	margin: 10px 0px;
  }
  
  /*クラス
  ---------------------------------------------------------*/
  .emoji{
  	margin: 0px 1px;
  	vertical-align: middle;
  }
  
  /*エントリー
  --------------------------------------------------*/
  
  /*エントリー部------------------------------------*/
  h2{
  	border-bottom: 1px solid Black;
  	border-right: 1px solid Black;
  	font-size: 15px;
  	text-align: left;
  	font-weight: bold;
  	padding: 3px 5px 3px 5px;
  }
  
  .entry h2 a:link   { color : #FFF; text-decoration : none; }
  .entry h2 a:visited{ color : #FFF; text-decoration : none; }
  .entry h2 a:hover  { color : #FFF; text-decoration : none; }
  .entry h2 a:active { color : #FFF; text-decoration : none; }
  
  
  .entry{
  	width:490px;
  	margin: 0px auto;
  	text-align: center;
  }
  
  .entrybox{
  	margin: 0px auto;
  	width: 468px;
  	text-align: left;
  }
  
  .entry a:link   { color : #0000FF; text-decoration : underline; }
  .entry a:visited{ color : #0000FF; text-decoration : underline; }
  .entry a:hover  { color : #0000FF; text-decoration : underline; }
  .entry a:active { color : #0000FF; text-decoration : underline; }
  
  .date {
  	color: #0066CC;
  	font-family: 'Trebuchet MS', Verdana, sans-serif;
  	font-size: 10px;
  	text-align: right;
  	font-weight: bold;
  	margin-bottom: 2px;
  }
  
  .entry p{
  
  	margin: 17px 0px;
  }
  
  .entry h3{
  	font-size:11px;
  	margin: 14px 15px;
  }
  
  .entry span{
  	line-height: 140%;
  }
  
  .entry ul,.entry ol {
  	margin : 14px 0px;
  }
  
  .entry li {
  	list-style-type: none;
  	margin-left :0px;
  }
  
  .entry dl{
  	margin : 14px 0px;
  }
  
  /*エントリーフッタ------------------------------*/
  .posted {
  	color: #0066CC;
  	font-family: 'Trebuchet MS', Verdana, sans-serif;
  	font-size: 12px;
  	border-top: 1px dotted #0066CC;
  	text-align: right;
  	line-height: normal;
  	margin-bottom: 18px;
  }
  
  .posted a {color: #666666; text-decoration: none;}
  .posted a:link   { color: #666666; text-decoration: none;}
  .posted a:visited{ color: #666666; text-decoration: none;}
  .posted a:hover  { color: #666666; text-decoration: underline;}
  .posted a:active { color: #666666; text-decoration: none;}
  
  .bottom{
  	text-align: left;
  	margin: 10px;
  }
  
  .commment{
  	color: #000;
  	font-size: 15px;
  	padding-bottom: 2px;
  	border-bottom: 1px solid #472E12;
  	text-align: left;
  	font-weight: bold;
  }
  
  .commment a {text-decoration: none;}
  
  .commenttext{
  	width: 430px;
  	margin: 6px 0px 6px 40px;
  	font-size: 11px;
  	color: #333;
  	line-height: 140%;
  }
  
  #comment_edit{
  	text-align: left;
  }
  
  .tbtext{
  	margin: 5px 0px 5px 100px;
  	font-size: 10px;
  	color: #0066CC;
  	line-height: 140%;
  }
  
  .tburl input{
  	width: 100%;
  	font-size: 11px;
  }
  
  .tbtitle{
  	font-size: 11px;
  }
  
  .entry_navi{
  	width:490px;
  	color: #333;
  	margin: 0px auto;
  	text-align: center;
  }
  
  .entry_navi a{
  	font-size:12px;
  	font-weight:bold;
  }
  
  /*検索
  ----------------------------------------------------------*/
  #search{
  	margin-top:10px;
  }
  
  /* 自己紹介部分の画像
  --------------------------------------------------*/
  .prof{
  	text-align: center;
  }
  
  .prof img{
  	margin: 5px 0px;
  } 
  
  .proftext{
  	margin: 0px 5px;
  	text-align: left;
  }
  
  /* 左右サイドバー
  ------------------------------------------------------------*/
  .side {
  	padding: 15px 5px 15px 5px;
  	font-size: 10px;
  }
  
  .sidetitle {
  	border-bottom: 1px solid Black;
  	border-right: 1px solid Black;
  	font-size: 12px;
  	text-align: left;
  	font-weight: bold;
  	padding: 3px 5px 3px 5px;
  	margin-top: 0px;
  	margin-bottom: 5px;
  }
  
  .side ul {
          padding: 0px;
          margin : 0px 0px 10px 0px;
  }
  
  .side li {
  	margin:3px 0px 0px 3px;
  	list-style-type: none;
  	text-align: left;
  	font-size: 10px;
  	color:#000;
  	line-height: 15px;
  }
  
  /*フッタ
  ---------------------------------------------------------*/
  #footer {
  	clear: both;
  	width: 1062px;
  	height: 70px;
  	font-size: 12px;
  	color: #063050;
  	text-align: center;
  	padding:10px 0px 0px 0px;
  	border-top: 1px dotted #0066CC;
  }
  
  #footer a {
  	text-decoration: underline;
  }
  
  #footer a:hover {
  	color: #0066CC;
  }
  
  /*汎用
  ---------------------------------------------------------*/
  .center{
  	text-align:center;
  }
  .right{
  	text-align:right;
  }
  .left{
  	text-align:left;
  }
  

  
  

  4,ヘッダーの下に、幅1162px(ブログの左枠～右枠まで）縦70pxの　メニューを入れるスペース。

  HTMLのヘッダ部分を下記のように変更してください。

  <!--ヘッダ開始-->
  <div class="color_topframe" id="header">
  <h1 class="introduction">日々のメモ</h1>
  <p id="blogtitle"><a href="http://goodman777.blog24.fc2.com/">メモ</a></p>
  <div style="height:70px;">
  <!-- ここにメニューを挿入 -->
  </div>
  </div>
  <!--ヘッダ終点-->
  

  スター

kent06082010/12/24 19:35:38

満足27pt

HTMLを下記のように修正

(修正箇所にコメントを付けてあります）

<?xml version="1.0" encoding="euc-jp"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="robots" content="index,follow" />
<meta name="author" content="<%author_name>" />

<meta name="description" content="<%sub_title><%topentry_title>について" />
<meta name="keywords" content="<%sub_title><%topentry_title>,ここにキーワード,ここにキーワード" />

<link rel="stylesheet" type="text/css" href="<%css_link>" media="screen,tv" title="デフォルト" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
<link rel="top" href="<%url>" title="トップ" />
<link rel="start" href="<%url>" title="最初の記事" />
<!--prevpage--><link rel="prev" href="<%prevpage_url>" title="前のページ" /><!--/prevpage-->
<!--nextpage--><link rel="next" href="<%nextpage_url>" title="次のページ" /><!--/nextpage-->
<!--preventry--><link rel="next" href="<%preventry_url>" title="<%preventry_title>" /><!--/preventry-->
<!--nextentry--><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry-->
<title><%topentry_title><%sub_title>[<%blog_name>]</title>
</head>

<body>

<!--コンテナ開始-->
<div class="color_mainframe" id="container">

<!--ヘッダ開始-->
<div class="color_topframe" id="header">
<h1 class="introduction"><%introduction></h1>
<p id="blogtitle"><a href="<%url>"><%blog_name></a></p>
</div>
<!--ヘッダ終点-->

<!--ラップ開始-->
<div id="wrap">

<div id="top_menu">
ここにメニューの内容を記述<br />
(要求仕様）4.ヘッダーの下に、幅1162px(ブログの左枠～右枠まで）縦70pxの　メニューを入れるスペース。
</div>

<!--box2開始-->
<div id="box2">

<!--メイン開始-->
<div id="main">

<!--メインボックス開始-->
<div id="mainbox">
	(要求仕様）3.中央のカラム=幅412px（訂正：512pxの間違いでは？　325+325+512=1162）<br />

	<!--エントリー開始-->
	<div class="entry color_entrybg">

	<!--＠トップエントリー開始エントリーがあった場合繰り返す範囲-->
	<!--topentry-->

	<h2 class="color_entrytitle"><a href="<%topentry_link>"><%topentry_title></a></h2>
	
		<!--エントリーボックス開始ここから幅４６８ｐｘ-->
		<div class="entrybox color_entrytext">

			<div class="date">
			<%topentry_year>.<%topentry_month>.<%topentry_day>
			</div>
			
			<!--エントリー本文-->
			<%topentry_body>

			<!--続きを読む-->
			<!--more_link-->
			<p class="right">記事：<a href="<%topentry_link>"><%topentry_title></a>の続きを読む</p>
			<!--/more_link-->
			<!--more-->
			<div id="more"><%topentry_more></div>
			<!--/more-->

			<!--投稿情報開始-->
			<div class="posted">
			<a href="<%topentry_link>">記事URL</a> | 
			<a href="<%topentry_category_link>"><%topentry_category></a> | 
			<!--allow_tb--><a href="<%topentry_link>#trackback">トラックバック(<%topentry_tb_num>)</a><!--/allow_tb-->
			<!--deny_tb-->トラックバック(-)<!--/deny_tb--> | 
			<!--allow_comment--><a href="<%topentry_link>#comments">コメント(<%topentry_comment_num>)</a><!--/allow_comment-->
			<!--deny_comment-->コメント(-)<!--/deny_comment--> | 
			【<%topentry_hour>:<%topentry_minute>】
			</div>
			<!--投稿情報終点-->
			
		</div>

		<!--エントリーボックス終点ここまで幅４６８ｐｘ-->
		
	<!--
	<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
	 xmlns:dc="http://purl.org/dc/elements/1.1/">
	<rdf:Description
	rdf:about="<%topentry_link>"
	trackback:ping="<%url>tb.php/<%topentry_no>"
	dc:title="<%topentry_title>"
	dc:identifier="<%topentry_link>"
	dc:subject="<%topentry_category>"
	dc:description="<%topentry_discription>"
	dc:creator="<%author_name>"
	dc:date="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00" />
	</rdf:RDF>
	-->

	<!--/topentry-->
	</div>
	<!--＠トップエントリー終点エントリーがあった場合繰り返す範囲ここまで-->

		<!--エントリー直下ナビゲーション開始-->
		<div class="entry_navi">
		<!--ページ移動-->
		
		<!--＠コメントエリア開始-->
		<!--comment_area-->
			<!--prevpage-->
			≪<a href="<%prevpage_url>">前ページ</a><br />
			<!--/prevpage-->
			<a href="<%url>">トップページ</a><br />
			<!--nextpage-->
			<a href="<%nextpage_url>">次ページ</a>≫
			<!--/nextpage-->
		</div>
		<!--エントリー直下ナビゲーション終点-->

		<!--ボトム－コメント・ＴＢ表示部分開始-->
		<div class="bottom">

			<!--コメント表示部開始-->
			<p class="commment"><a id="comments" name="comments">コメント</a></p>
			<!--comment-->
			<div class="commenttext"><%comment_body></div>
				<div class="posted">
				<%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute>
				<%comment_url+str> | <%comment_mail+name> #<%comment_trip> | <a href="<%comment_edit_link>" title="編集">編集</a>
				</div>
			<!--/comment-->
			<!--コメント表示部終点-->

			<!--＠コメント投稿フォーム開始-->
			<p class="commment"><a id="comment_post" name="comment_post">コメントの投稿</a></p>
			<form method="post" action="./" name="comment_form" id="comment_form">
			<input type="hidden" name="mode" value="regist" />
			<input type="hidden" name="comment[no]" value="<%pno>" />
			<label for="name">NAME:</label><br />
			<input id="name" type="text" name="comment[name]" size="30" /><br />
			<label for="subject">TITLE:</label><br />
			<input id="subject" type="text" name="comment[title]" size="30" /><br />
			<label for="mail">MAIL:</label><br />
			<input id="mail" type="text" name="comment[mail]" size="30" /><br />
			<label for="url">URL:</label><br />
			<input id="url" type="text" name="comment[url]" size="30" /><br />
			<label for="comment">COMMENT:</label><br />
			<script type="text/javascript" src="http://blog69.fc2.com/load.js"></script><br />
			<textarea id="comment" cols="40" rows="8" name="comment[body]"></textarea><br />
			<label for="pass">PASS:</label><br />
			<input id="pass" type="password" name="comment[pass]" size="20" /><br />
			<label for="himitu">SECRET:</label><br />
			<input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示を許可する<br />
			<div><input type="submit" value="送信" /></div>
			</form>
			<!--＠コメント投稿フォーム終点-->

			<!--/comment_area-->
			<!--＠コメントエリア終点-->

			<!--＠コメント編集フォーム開始-->
			<!--edit_area-->
			<div id="comment_edit">
			<p class="commment">コメントの編集</p>
			<form method="post" action="./" name="comment_form">
			<input type="hidden" name="mode" value="edit" />
			<input type="hidden" name="mode2" value="edited" />
			<input type="hidden" name="edit[rno]" value="<%eno>" />
			<label for="name">NAME:</label><br />
			<input id="name" type="text" name="edit[name]" size="30" value="<%edit_name>" /><br />
			<label for="subject">TITLE:</label><br />
			<input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /><br />
			<label for="mail">MAIL:</label><br />
			<input id="mail" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /><br />
			<label for="url">URL:</label><br />
			<input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /><br />
			<label for="comment">COMMENT:</label><br />
			<script type="text/javascript" src="http://blog69.fc2.com/load.js"></script><br />
			<textarea id="comment" cols="30" rows="8" name="edit[body]"><%edit_body></textarea><br />
			<label for="pass">PASS:</label><br />
			<input id="pass" type="password" name="edit[pass]" size="20" /><br />
			<label for="himitu">SECRET:</label><br />
			<input id="himitu" type="checkbox" name="edit[himitu]" />秘密にする<br />
			<div>
			<input type="submit" value="送信" /> 
			<input type="submit" name="edit[delete]" value="削除" />
			</div>
			</form>
			
			</div>
			<!--/edit_area-->
			<!--＠コメント編集フォーム終点-->

			<!--トラックバック部開始-->
				<!--trackback_area-->
				<p class="commment"><a id="trackback" name="trackback">トラックバック</a></p>
				<div class="tburl">トラックバックURL：<br />
				<form name="tburl" id="tburl" method="post" action="#">
				<input type="text" name="trackback_url" value="<%trackback_url>" />
				</form>
		</div>
					<!--trackback-->
					<p class="tbtitle"><a href="<%tb_url>" name="trackback<%tb_no>"><%tb_title></a> ／ <%tb_blog_name></p>
					<div class="tbtext"><%tb_excerpt></div>
					<div class="posted">
					【<%tb_year>/<%tb_month>/<%tb_day> <%tb_hour>:<%tb_minute>】
					</div>
					<!--/trackback-->
				<!--/trackback_area-->
			<!--トラックバック部終点-->

		</div>
		<!--ボトム－コメント・ＴＢ表示部分終点-->

		<!--コメントＴＢ部下のナビ部開始-->
		<div class="center">
		<div class="entry_navi">
		<!--prevpage-->
		≪<a href
            
            スター          

うぃんど2010/12/24 21:55:12

満足26pt

変更箇所が多いので１点１点確認しながら行ってください

簡単なチェックを行ってから回答投稿してますけれど、ブラウザによってマージンとパディングの動作に違いがありますので下記の数値は鵜呑みにせずに変更の目安としてください

　

【１】htmlへの追加

classは配色の利便性からcolor_topframeではなく新たにcolor_menuframeをcss側に追加での対応としています

idは他とかぶらなければmenu以外のものでもかまいません

（１）ヘッダの枠内に追加する場合

<!--ヘッダ開始-->
<div class="color_topframe" id="header">
<h1 class="introduction">日々のメモ</h1>
<p id="blogtitle"><a href="http://goodman777.blog24.fc2.com/">メモ</a></p>
<div class="color_menuframe" id="menu">
　　ここにメニューを入れる
</div>
</div>
<!--ヘッダ終点-->

（２）ヘッダの枠外に追加する場合

<!--ヘッダ終点-->
<div class="color_menuframe" id="menu">
　　ここにメニューを入れる
</div>

　

【２】cssの変更と追加

私が行ったサイズ変更の一覧

830px → 1062px
660px → 737px
490px → 412px
468px → 390px
430px → 352px
170px → 325px
110px → 180px（ヘッダの枠内にメニューを追加する場合のみ）

（１）全体の幅調整

#container {
	width: 830px; → 1062px（左メニュー部＋エントリー部＋右メニュー部の幅）

#wrap{
	width: 830px; → 1062px

#box2 {
	width: 660px; → 737px（左メニュー部＋エントリー部の幅）

（２）ヘッダ部の幅調整とHTMLで追加したid="menu"分の追加

#header {
	text-align: left;
	width:830px; → 1062px
	height : 110px; → 180px（ヘッダの枠内にメニューを追加する場合のみ高さ70pxを増量）
}
#menu {
	text-align: left;
	width:1062px
	height : 70px;
}

（３）左メニュー部の幅調整

#left {
	float : left;
	width : 170px; → 325px

（４）エントリー部の幅調整

#main {
	padding: 15px 0px;
	float: right;
	width: 490px; → 412px

#mainbox {
	margin: 0px auto;
	width: 490px; → 412px
}

.entry{
	width:490px; → 412px
	margin: 0px auto;
	text-align: center;
}

.entrybox{
	margin: 0px auto;
	width: 468px; → 390px
	text-align: left;
}

.commenttext{
	width: 430px; → 352px

.entry_navi{
	width:490px; → 412px

（５）右メニュー部の幅調整

#right {
	float : left;
	width : 170px; → 325px

（６）フッター部の幅調整

#footer {
	clear: both;
	width: 830px; → 1062px

（７）classの追加

追加する場所はどこでもかまいませんがcssファイルの先頭のほうにカラー設定がまとまっているので、

.color_topframe と .color_sidetitle の間にでも書くと判りやすいとでしょう

下記の配色や線種は.color_topframeと同一なので必要に応じて適宜変更してください

.color_menuframe{
	border-bottom : 2px solid #0066CC;
}

　

以上、７月の風ことwindofjulyでした

スター
• その他の回答を読む

この質問へのコメント

• kent06082010/12/25 00:43:47
  長すぎて途中で途切れてしまったようです。
  
• kent06082010/12/25 00:50:09
  HTML修正箇所
  
  <!--ラップ開始-->
  <div id="wrap">
  
  ーーーー（ここから開始）ーーーーー
  <div id="top_menu">
  ここにメニューの内容を記述<br />
  (要求仕様）4.ヘッダーの下に、幅1162px(ブログの左枠～右枠まで）縦70pxの　メニューを入れるスペース。
  </div>
  
  ーーーーーーーーーーーーーーーーーーーーーー
  
  
  
  CSS修正箇所
  
  #container {
  width: 1162px;
  margin-right: auto;
  margin-left: auto;
  font-size: 13px;
  line-height: 140%;
  background-color: #FFF;
  }
  
  #wrap{
  width: 1162px;
  margin:0px;
  }
  
  #box2 {
  width: 837px;
  text-align: left;
  float : left;
  }
  #left {
  float : left;
  width : 325px;
  overflow: hidden;
  }
  
  #right {
  float : left;
  width : 325px;
  overflow:hidden
  }
  
  #main {
  padding: 15px 0px;
  float: right;
  width: 512px;
  overflow: hidden;
  }
  
  #mainbox {
  margin: 0px auto;
  width: 512px;
  }
  
  #header {
  text-align: left;
  width:1162px;
  height : 110px;
  }
  
  #footer {
  clear: both;
  width: 1162px;
  height: 70px;
  font-size: 12px;
  color: #063050;
  text-align: center;
  padding:10px 0px 0px 0px;
  border-top: 1px dotted #0066CC;
  }
  #top_menu {
  clear: both;
  height: 70px;
  width: 1162px;
  background-color: #E6E6E6;
  }
  
• うぃんど2010/12/25 01:33:58
  ブラウザによってはレイアウトがぐちゃぐちゃに崩れて私の回答部分がろくに読めなくなっている場合もあるようなので日記のほうに同じものを再掲
  （極力見た目も同じように調整しましたが人力とダイアリーでは仕様が異なるため縦長になっています）
  http://d.hatena.ne.jp/windofjuly/20101224/1293207297
  ついでにcssファイルも丸ごと置いておきます
  http://d.hatena.ne.jp/windofjuly/20101224/1293208187
  丸ごとコピーで使ってもらっても良いですが、回答本文のほうを順に実施して、どこで何をしているのかを理解して欲しいですね
  （丸ごとコピーのほうが回答するのも簡単なのですが、どこで何をしているかを理解していないと、間違いにも気づかないということになりますからね）
• きあ2010/12/25 02:45:55
  回答が2点出てますので、コメントにてコツを。
  
  IDやクラスに対しての書き方を覚えること。
  width が幅であること。
  の2点かな。
  
  できれば、外部CSSへのリンクの貼り方。
  この3点を抑えられると今回の質問については自力で解決できるようになると思いますよ。
  
  windows環境ならば、
  http://www.kashim.com/eve/index.html　
  http://h2ham.seesaa.net/article/154387441.html
  の2つを見てみてもいいかも。何を変えたいまでが見えているのでそれはどれか、がわかればクリアできそうなんで頑張ってみてください。
• Tomo2010/12/25 16:06:20
  皆様
  ご回答、ありがとうございました。
  現在、サイトを調整しております。調整が終わりましたら、
  質問を終了させていただこうと思います。
• Tomo2010/12/28 14:57:44
  ご回答、ありがとうございました。
  いただいた回答は、どの回答も大変ありがたく参照させていただきました。
  適応箇所毎に説明を付けて下さった、windofjulyさんにいるか賞を進呈させていただきます。
  皆さま本当にありがとうございました。
  
  
• うぃんど2011/01/07 20:20:27
  質問になさったのですね。コメントに書いていただければ、よかったのに･･･後からなら何とでも書けますね（笑）
  http://q.hatena.ne.jp/1293955268
  　
  遅まきですし、何の証拠能力もありませんが、年明け２日にメッセージ付きポイント送信でお約束どおりのポイントをお送りいただきましたこと、ここに記します
  ありがとうございました

質問の情報

登録日時

2010-12-24 18:20:52

終了日時

2010-12-31 18:25:02

回答条件

1人2回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• お世話になります。 早速ですが、本日はランニングシューズについてとなります。 ナイキのリアクト インフ…memberSOS121日前
• オススメのゲームはありますか？匿名質問者411日前
• オススメのアニメはありますか？匿名質問者211日前
• スマブラで、登場してほしいキャラはいますか？匿名質問者1日前
• 数年前（十年以上前かもしれません）に見たサイトを探しています。 日本の、地域のキリスト教の教会につい…匿名質問者13日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ