FC2blogの着せ替えブログ

まず、ＣＳＳのレイアウト部分にサイトタイトル部分を追加します。
たとえばサイトタイトル部分に「branding」というＩＤを付けた場合、以下のようになります。
（ＩＤ名は他の名前をつけてもけっこうです。）

#branding ｛
width: 720px;
background-color: #カラーコード;
｝

上記の場合ですと、サイトタイトル部分は、カレンダー部分と同じ幅になり、バックグラウンドカラーが着きます。

次は、ＨＴＭＬに、サイトタイトル部分（branding）を配置します。

<!-- ページ全体 ▽ -->
<div id="container">

ここにサイトタイトル部分（branding）を配置します。

<!-- カレンダー ▽ -->
<div id="calendar">

配置するとこんな感じです。

<!-- ページ全体 ▽ -->
<div id="container">

<div id="branding">
ここにサイトタイトル部分他をペーストします。
</div>

<!-- カレンダー ▽ -->
<div id="calendar">

次に、すでにあるサイトタイトル、ブログ説明文、ＲＳＳやプロフィールへのリンク部分を、そっくり切り取り、ペーストします。

切りとってくる部分は下の部分です。

<!-- サイトタイトル、説明、他 ▼ -->
<div class="entry_header"><img src="画像のＵＲＬが入っています" サイズとかも入っています /></div>
<div class="entry">
<div class="site_title"><a href="<%url>" title="<%blog_name>" name="pagetop"><%blog_name></a></div>
<div class="description"><%introduction></div>
<div class="entry_author"><a href="#profile">AUTHOR</a> <img src="画像のＵＲＬが入っています" サイズとかも入っています /> <a href="<%url>?xml">RSS</a> <img src="画像のＵＲＬが入っています" サイズとかも入っています /> <a href="<%url>?admin" title="管理者用"> LOG_IN</a></div>
</div><div class="entry_footer"><img src="画像のＵＲＬが入っています" サイズとかも入っています /></div>
<!-- サイトタイトル、説明、他 ▲ -->

そして、先程の<div id="branding">から</div>の間に、そっくりペーストします。
すると、次のようになります。

<!-- ページ全体 ▽ -->
<div id="container">

<div id="branding">
<!-- サイトタイトル、説明、他 ▼ -->
<div class="entry_header"><img src="画像のＵＲＬが入っています" サイズとかも入っています /></div>
<div class="entry">
<div class="site_title"><a href="<%url>" title="<%blog_name>" name="pagetop"><%blog_name></a></div>
<div class="description"><%introduction></div>
<div class="entry_author"><a href="#profile">AUTHOR</a> <img src="画像のＵＲＬが入っています" サイズとかも入っています /> <a href="<%url>?xml">RSS</a> <img src="画像のＵＲＬが入っています" サイズとかも入っています /> <a href="<%url>?admin" title="管理者用"> LOG_IN</a></div>
</div><div class="entry_footer"><img src="画像のＵＲＬが入っています" サイズとかも入っています /></div>
<!-- サイトタイトル、説明、他 ▲ -->
</div>

<!-- カレンダー ▽ -->
<div id="calendar">

あとは、タイトル部分、説明部分、プロフィールやＲＳＳへのリンク部分以外の、不要な部分をカットします。
すると、下のようになります。

<!-- ページ全体 ▽ -->
<div id="container">

<div id="branding">
<div class="site_title"><a href="<%url>" title="<%blog_name>" name="pagetop"><%blog_name></a></div>
<div class="description"><%introduction></div>
<div class="entry_author"><a href="#profile">AUTHOR</a> <img src="画像のＵＲＬが入っています" サイズとかも入っています /> <a href="<%url>?xml">RSS</a> <img src="画像のＵＲＬが入っています" サイズとかも入っています /> <a href="<%url>?admin" title="管理者用"> LOG_IN</a></div>
</div>

<!-- カレンダー ▽ -->
<div id="container">

これで、出来あがりです。
細かいレイアウトは、マージンやパディングでお好みに調整してください。
（こちらは、ＣＳＳで行います。）


なお、タイトルバナー部分に画像を使う場合は、カレンダーやフッター部分の画像を、参考にご自身で作っていただく必要があります。

タイトルバナー画像は、カレンダー部分の画像をもとに、幅を変えないで、高さだけをある程度とって大きく作るか、もしくは、カレンダー部分の画像を、上・中・下に分けてスライスして使用するか。
どちらにせよ、カドを丸くしてあるので、透過ＧＩＦ画像が扱える、お絵描きソフトが必要になります。

画像を使わない場合は、カドを丸くする事は出来ません。