fc2blogについての質問です。

質問

fc2blogについての質問です。
HPのタイトルの下にサイト幅一杯のフリースペースを作りたいのですが、htmlの編集などどこをいじればいいかわかりません。
どうすればよいかご存知のかたはどうか教えてください。よろしくお願いします。
現在は３カラムのgd_blackというテンプレを使っております。

文章だけでは分かりづらいかもしれないので絵を書きました。
適当ですみません。

回答No.2

zeff · ベストアンサー

注：＃１さんとは別人です。

このテンプレは元々プラグイン3が記事の上に来るタイプなので、
それをヘッダの下に移動してやれば、
あとは「フリーエリア」プラグインをプラグイン3に置き、
それをフリースペースとして書き込めばOKです。

テンプレートの複製は必ず行うこと。

※省略※
</div><!--/header_outline-->

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
<!--index_area-->
<!--plugin-->
<!--plugin_third-->
<div class="plugin3_outline">
<div class="plugin3_title ta_<%plugin_third_talign>">
<%plugin_third_title></div>
<div class="plugin3_body">
<!--plugin_third_description-->
<div class="p3_description ta_<%plugin_third_ialign>">
<%plugin_third_description></div>
<!--/plugin_third_description-->
<div class="ta_<%plugin_third_align>">
<%plugin_third_content></div>
<!--plugin_third_description2-->
<div class="p3_description ta_<%plugin_third_ialign>">
<%plugin_third_description2></div>
<!--/plugin_third_description2-->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--/plugin_third-->
<!--/plugin-->
<!--/index_area-->
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

</div>
<!--▲▲ ヘッダー ▲▲-->

<div id="center-left">

<div id="center">

※ココにあった物を↑移動

※省略※

左右の余白が気になる場合は、

div.hoge{
margin-right:5px;
margin-left:5px;;
}
と（名前は適当）新たにclassを作って、

<div class="plugin3_outline hoge">
と追加してやれば、ちょうど良いあんばいになります。

ちなみに、上marginは、

#header_outline {
border:1px solid #333333; /* 外枠の色 */
margin-bottom:10px; /* ヘッダ下間隔 */
background-image: url(http://blog-imgs-43.fc2.com/f/l/a/flashgameking/gd150.png);
background-repeat: repeat-x;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
}
のmargin-bottom:10px; が上marginに当たり、

下marginは、
.plugin3_outline {
border-top: #e0e0e0 1px solid; /* 個別枠(上) */
border-right: #e0e0e0 1px solid; /* 個別枠(右) */
border-bottom:#e0e0e0 1px solid; /* 個別枠(下) */
border-left: #e0e0e0 1px solid; /* 個別枠(左) */
margin-bottom:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
と元からmargin-bottom:10px;があるので設定せずとも大丈夫です。

お礼

言われたとおりにしたところ、きちんとできました！
本当にありがとうございました。

回答No.1

noname#119957

エリアを設けるには、ＨＴＭＬに追加して、ＣＳＳでレイアウトします。
ページ毎に動的に変えるのは難しいです。

■HTMLに　フリースペース部分を追加
フリースペースの部分をfrsのＩＤに記述するとして、
<div id="frs">
ここに、ＨＴＭＬと　プラグインのタグで作成できます。
</div>

■ＣＳＳの追加

#frs {
margin:0px:
padding:0px
width:800px;
などと、とりあえず枠をつくる。
}

以降のＣＳＳは、
#frs img
のように#trsの跡に記述すれば、他の部分には影響されません。

※ページごとに内容の変わるものを表示したい場合は、プラグインを作成してください。
（既存のものがあるなら利用できますが。。）

お礼

回答ありがとうございます。
いろいろと試しましたが、画像のような配置にすることができませんでした。

もう少し詳しく教えていただけると助かります！