FC2blogの着せ替えブログ

一応、【heart-heart】テンプレートでは、いずれの色のバージョンでも、通常のリスト形式以外に、以下の２つの形式をあらかじめＣＳＳ（スタイルシート）内で用意してあります。

・左寄せ、テキスト用
（要素にクラス名【sidetext】で、スタイルが適用されます。）

・中心寄せ、テキスト用
（要素にクラス名【sidetext_b】で、スタイルが適用されます。）


★他のメニュー同様にリスト形式で、文章を表示したい。

<div class="sidetitle">タイトル</div>
<div class="sidetext">
<ul>
<li>文章</li>
<li>文章</li>
</ul>
</div>


★新たにメニューを設けて、左寄せで文章を入れたい。

<div class="sidetitle">タイトル</div>
<p class="sidetext">文章を入れる</p>


★新たにメニューを設けて、中心寄せで文章を入れたい。

<div class="sidetitle">タイトル</div>
<p class="sidetext_b">文章を入れる</p>


★新たにメニューを設けて、左寄せで画像を入れたい。
（アマゾンやブログペットなどの、沢山のタグが発行されてそれを貼りつけるタイプ）

<div class="sidetitle">タイトル</div>
<div class="sidetext">タグを入れる</div>


★新たにメニューを設けて、中心寄せで画像を入れたい。
（アマゾンやブログペットなどの、沢山のタグが発行されてそれを貼りつけるタイプ）

<div class="sidetitle">タイトル</div>
<div class="sidetext" align="center">タグを入れる</div>

画像を中心寄せで貼りつける場合は、必ず、【align="center"】が必要です。


★新たにメニューを設けて、中心寄せで画像と自分の文章を入れたい。
（アマゾンやブログペットなどの、沢山のタグが発行されてそれを貼りつけるタイプ）

<div class="sidetitle">タイトル</div>
<div class="sidetext_b" align="center">タグや文章を入れる</div>

画像を中心寄せで貼りつける場合は、必ず、【align="center"】が必要です。
ＣＳＳ（スタイルシート）内に記述してある、【text-align: center;】によって、画像も中心寄せになるブラウザもありますが、これはあくまでも、テキスト（文字）だけですので、注意が必要です。

※自分で、リンクバナーなどのイメージタグとリンクタグのみと、文章を入れる場合は、＜div＞では無く＜p＞タグでも大丈夫です。


★既存のメニューの中に、文章や画像を追加したい。

例えば、リンクリストの上や下の方に文章を、文章や画像を入れる場合。
多くのリストタイプメニュー（最新エントリーやアーカイブなども）の場合は、以下のようになっています。

<div class="sidetitle">RECENT ENTRIES</div>
<div class="sidetext">
<!--recent-->
<ul><li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li></ul>
<!--/recent-->
</div>

上記の場合は、ＦＣ２の独自ナビゲーションタグ＜！--aaaa--＞〜＜！--/aaaa--＞の中には、記述しないで、その上や下の行に記述します。

<div class="sidetitle">RECENT ENTRIES</div>

☆ここに入れる事も出来ます。

<div class="sidetext">

ここに内容（画像や文字）を入れると、リストの上に表示される。

<!--recent-->
<ul><li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li></ul>
<!--/recent-->

ここに内容（画像や文字）を入れると、リストの下に表示される。

</div>

☆ここに入れる事も出来ます。

☆印の場所に記述する場合は、上のほうで説明してきた、タイトル部分だけ省いたものを記述します。


では、新しいメニューを、サイドバーの中に追加しましょう。

【heart-heart】のサイドバーには、画像が使われています。
たとえば、ＨＴＭＬのサイドバーの部分は、次のようになっています。

<!-- サイド ▽ -->
<div id="side">

<div class="sidetext_head"><img src="サイドバー、ヘッダー画像" width="210" height="44" alt="side_header" border="0" /></div>
<div class="side">

<!-- ここから、サイドメニューのタイトルやリスト部分の中身 ▼ -->

<div class="sidetitle">RECENT ENTRIES</div>
<div class="sidetext">
<!--recent-->
<ul><li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li></ul>
<!--/recent-->
</div>

<div class="sidetitle">RECENT COMMENTS</div>
<div class="sidetext">
<!--rcomment-->
<ul><li><a href="<%rcomment_link>#comment<%rcomment_no>" title="「<%rcomment_etitle>」に対するコメント"><%rcomment_title><br>→ <%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li></ul>
<!--/rcomment-->
</div>


【省略】


<div class="sidetitle" id="profile">PROFILE</div>
<div class="sidetext">
<div class="pay"><img src="<%image>" alt="<%author_name>" /></div>
</div>

<div class="sidetext">
<ul><li>author：<%author_name></li>
<li><%introduction2></li>
</ul></div>

<div class="sidetext">
<form action="./" method="get" class="search">
<p><input type="submit" value="On" class="button" /> <input type="text" size="20" name="q" value="Search inside" maxlength="200" /></p>
</form>
<ul><li><%ad> <%ad2></li></ul>
</div>

<!-- ここまで、サイドメニューのタイトルやリスト部分の中身 ▲ -->

</div><div class="sidetext_foot"><img src="サイドバー、フッター画像" width="210" height="33" alt="side_footer" border="0" /></div>

</div>
<!-- サイド △ -->

サイドメニューは、既存のサイドメニューとサイドメニューのそれぞれのカタマリの間に、追加する事が出来ます。
たとえば、下のような場所に、追加する事が出来ます。

<!-- サイド ▽ -->
<div id="side">

<div class="sidetext_head"><img src="サイドバー、ヘッダー画像" width="210" height="44" alt="side_header" border="0" /></div>
<div class="side">

<!-- ここから、サイドメニューのタイトルやリスト部分の中身 ▼ -->

★ここに追加すると、サイドバーの一番上に表示されます。

<div class="sidetitle">RECENT ENTRIES</div>
<div class="sidetext">
<!--recent-->
<ul><li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li></ul>
<!--/recent-->
</div>

★ここに追加すると、最新エントリーと最新コメントの間に表示されます。

<div class="sidetitle">RECENT COMMENTS</div>
<div class="sidetext">
<!--rcomment-->
<ul><li><a href="<%rcomment_link>#comment<%rcomment_no>" title="「<%rcomment_etitle>」に対するコメント"><%rcomment_title><br>→ <%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li></ul>
<!--/rcomment-->
</div>

★ここに追加すると、最新コメントの下に表示されます。


【省略】


★ここに追加すると、プロフィールの上に表示されます。

<div class="sidetitle" id="profile">PROFILE</div>
<div class="sidetext">
<div class="pay"><img src="<%image>" alt="<%author_name>" /></div>
</div>

<div class="sidetext">
<ul><li>author：<%author_name></li>
<li><%introduction2></li>
</ul></div>

★ここに追加すると、プロフィールとサーチボックスの間に表示されます。

<div class="sidetext">
<form action="./" method="get" class="search">
<p><input type="submit" value="On" class="button" /> <input type="text" size="20" name="q" value="Search inside" maxlength="200" /></p>
</form>
<ul><li><%ad> <%ad2></li></ul>
</div>

★ここに追加すると、サイドバーの一番下に表示されます。

<!-- ここまで、サイドメニューのタイトルやリスト部分の中身 ▲ -->

</div><div class="sidetext_foot"><img src="サイドバー、フッター画像" width="210" height="33" alt="side_footer" border="0" /></div>

</div>
<!-- サイド △ -->