人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【いるか賞の方に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の メニューを入れるスペース。

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

●質問者: Tomo
●カテゴリ:ウェブ制作
✍キーワード:CSS FC2ブログ HTML いるか賞 カラム
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● あすか
●27ポイント

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

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

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

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

@charset "EUC-JP";

/*Sea_Simple_Seo_v2
---------------------------------------------------------*/

/*色変更?色を変える時は、ここを変えればだいたいOKです。
---------------------------------------------------------*/
#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", "MS ゴシック", "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>
<!--ヘッダ終点-->

2 ● kent0608
●27ポイント

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>

<!--エントリーボックス開始ここから幅468px-->
<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>

<!--エントリーボックス終点ここまで幅468px-->

<!--
<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>
<!--エントリー直下ナビゲーション終点-->

<!--ボトム?コメント・TB表示部分開始-->
<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>
<!--ボトム?コメント・TB表示部分終点-->

<!--コメントTB部下のナビ部開始-->
<div class="center">
<div class="entry_navi">
<!--prevpage--><a href


3 ● うぃんど
●26ポイント

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

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

【1】htmlへの追加

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

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

(1)ヘッダの枠内に追加する場合

<!--ヘッダ開始-->
<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>
<!--ヘッダ終点-->

(2)ヘッダの枠外に追加する場合

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

【2】cssの変更と追加

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

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

(1)全体の幅調整

#container {
width: 830px; → 1062px(左メニュー部+エントリー部+右メニュー部の幅)
#wrap{
width: 830px; → 1062px
#box2 {
width: 660px; → 737px(左メニュー部+エントリー部の幅)

(2)ヘッダ部の幅調整とHTMLで追加したid="menu"分の追加

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

(3)左メニュー部の幅調整

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

(4)エントリー部の幅調整

#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

(5)右メニュー部の幅調整

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

(6)フッター部の幅調整

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

(7)classの追加

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ