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の メニューを入れるスペース。
どうぞよろしくお願いいたします。
No.1
856
97
27pt
1,左サイドのカラム＝幅325px
2,右サイドのカラム＝幅325px
3,中央のカラム=幅412px
CSSを以下のように変更してください。
227
215
@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> <!--ヘッダ終点-->
No.2
22023
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
No.3
26251149
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でした
1
1
コメント（7件)
<!--ラップ開始-->
<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;
}
（極力見た目も同じように調整しましたが人力とダイアリーでは仕様が異なるため縦長になっています）
http://d.hatena.ne.jp/windofjuly/20101224/1293207297
ついでにcssファイルも丸ごと置いておきます
http://d.hatena.ne.jp/windofjuly/20101224/1293208187
丸ごとコピーで使ってもらっても良いですが、回答本文のほうを順に実施して、どこで何をしているのかを理解して欲しいですね
（丸ごとコピーのほうが回答するのも簡単なのですが、どこで何をしているかを理解していないと、間違いにも気づかないということになりますからね）
IDやクラスに対しての書き方を覚えること。
width が幅であること。
の2点かな。
できれば、外部CSSへのリンクの貼り方。
この3点を抑えられると今回の質問については自力で解決できるようになると思いますよ。
windows環境ならば、
http://www.kashim.com/eve/index.html
http://h2ham.seesaa.net/article/154387441.html
の2つを見てみてもいいかも。何を変えたいまでが見えているのでそれはどれか、がわかればクリアできそうなんで頑張ってみてください。
ご回答、ありがとうございました。
現在、サイトを調整しております。調整が終わりましたら、
質問を終了させていただこうと思います。
いただいた回答は、どの回答も大変ありがたく参照させていただきました。
適応箇所毎に説明を付けて下さった、windofjulyさんにいるか賞を進呈させていただきます。
皆さま本当にありがとうございました。
http://q.hatena.ne.jp/1293955268
遅まきですし、何の証拠能力もありませんが、年明け２日にメッセージ付きポイント送信でお約束どおりのポイントをお送りいただきましたこと、ここに記します
ありがとうございました