2007年04月03日

FC2ブログ用2カラムテンプレートのカラムサイズ変更方法

以前に、こちらで紹介していますFC2ブログ用テンプレートblogtube_basic3カラムの各カラムサイズの変更方法を説明しましたが、今回はblogtube_extraの2カラムテンプレートの各カラムサイズの変更方法を説明します。
前回は全般的に説明しましたが、今回は必要な箇所だけ説明します。細かく説明すると、逆にややこしいと思いますので。
ということで、FC2ブログ用テンプレート3カラムのサイズ変更は、ブログ全体のサイズをカスタマイズするとブログ全体のサイズをカスタマイズしてみた例をご覧下さい。

(今回は左右のマージン(15px)とカラム間のマージン(10px)は標準のまま変更しないものとします。)

1.右メニューの2カラムテンプレートカラムサイズ変更

.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

まずは全体のサイズを決めます。width: 930px;の930pxを変更して下さい。この数字が基準となります。

左カラム(エントリカラム)

.layout-three-column #box-left,
.layout-two-column-right #box-left{
float: left;
width: 660px;
}

右カラム(メニューカラム)

.layout-three-column #box-right,
.layout-two-column-right #box-right{
float: right;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)

.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

ここはエントリカラムと同じサイズに変更して下さい。以上で左右カラムの変更は終了です。(フリーエリアを使用する場合、フリーエリアのサイズ変更に進んで下さい。)

2.左メニューの2カラムテンプレートカラムサイズ変更

.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

左メニューの場合も全体サイズはここで決めます。

.layout-two-column-left #box-left{
width: 900px;
}

ここは全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)

右カラム(エントリカラム)

.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

左カラム(メニューカラム)

.layout-two-column-left #box-sub{
float: left;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)

3.フリーエリアのサイズ変更

#kousin{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

.topadfull{
width: 900px;
margin: 10px auto 20px;
background: #fff;
}

.topbox{
width: 900px;
background: #fff;
margin: 10px auto 20px;
}

#bottombox{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

上記部分は全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)

.topleft{
float: left;
width: 445px;
}

.topright{
float: right;
width: 445px;
}

これは2分割のフリーエリアです。上で設定した、(全体サイズ-30px)-10pxをまず計算し、次にその合計になるように左右サイズを決定して下さい。左右違うサイズでも問題ありません。(例:(全体830px-30)-10px=790px。790px/2=395px。もし左右違うサイズにするなら、400px+390px=790pxなどにする。)

2007年04月03日

エントリ部分の画像のマージンを削除する

何人かの方から質問を受けています、エントリ部分の画像のマージンについて説明しておきます。
まずは、記事を投稿する時に使用するタグのエントリをご覧下さい。こちらで説明しているように、画像は標準で右に16px、下に16pxのマージンが入ります。ですので、どの種類の画像(絵文字含む)を貼り付けたとしても、上のスペースが入ってしまいます。
個人的に、画像は先ほどのエントリで紹介しているような使い方しかしないため、私自身は問題ないんですが、画像を連続して貼り付けたり、絵文字を使用したりする場合には問題がでるようです。
このような、エントリ部分に画像を隙間無く貼り付けたい場合は以下のようにして下さい。

1.テンプレートのスタイルシート修正

#box-main img{
margin-right: 16px;
margin-bottom: 16px;
}

上記箇所がエントリ部分で画像を貼り付けた場合にマージンを設定している部分です。これを丸ごと削除してください。これだけで大丈夫です。

2.画像にマージンを設定する場合

画像によってマージンを個別に設定するには、以下のようにしてみて下さい。(まずは上の標準マージンを削除してから)

<img style="margin: 10px;" src="" width="" height="" alt="" />

styleで直接マージンを設定します。marginのサイズや場所(margin-topなど)は個別に指定してください。

2007年04月03日

カテゴリページにカテゴリーの記事一覧を表示するカスタマイズ

今回は、FC2ブログのカテゴリページ上部にそのカテゴリのエントリリストを表示するカスタマイズです。あまり融通が利かないので、表示されてるエントリのリストのみ(FCブログの、環境設定→ブログの設定にある、1ページ上に表示するエントリ数だけ)しか表示できないようです。
それでもリストで表示してあれば、エントリの内容がわかりやすくなりますので、興味のある方はお試し下さい。
また、折角エントリ上部にフリーエリアを設定していますので、カテゴリのリストはそちらに表示することにします。

1.blogtube_basicを使う場合

blogtube_extraでは、エントリ上部のフリーエリアを増やす場合を考えて、blogtube_basicから少し変更を行っています。ですので、お使いのテンプレートに合わせてカスタマイズしてください。

エントリ上部のフリーエリアを使用していない場合

この場合はそのままテンプレートのフリーエリアを使って表示します。以下の箇所を追加してください。
現在フリーエリアを使用していない場合、!-- メイン開始 --から!-- エントリ開始 --の間に挿入してください。(わかりやすくするためにメイン開始とエントリ開始は表記してありますが、もちろんこれは重複して追加しないで下さい。それぞれの間だけです。)blogtube_basic、blogtube_basic01共に同じです。

<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div id="rss">
<div id="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div id="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>）</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

標準でカスタマイズする場合と同様に、タイトル部分と表示部分に今回のカスタマイズを挿入します。これだけで大丈夫です。

2.エントリ上部のフリーエリアを使用している場合

追加する場合、スタイルシートもカスタマイズする必要があります。以下を変更して下さい。(idをclassに変更します。)

/*　　　　　RSS　　　　　*/

.rss{
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.rsstitle{
padding: 3px;
text-align: center;
font-size: 12px;
color: #000;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.rssmain{
padding: 3px;
text-align: left;
font-size: 12px;
color: #000;
line-height: 175%;
}

/*　　　　　RSS　　　　　*/

次はhtmlです。スタイルシートを変更したのは、エントリ上部のフリーエリアを追加しやすくするためです。この変更により、フリーエリアをそのままコピー&ペーストでいくつでも追加できます。

使用しているフリーエリアの変更

<div class="rss">
<div class="rsstitle">
<div class="rssmain">

構成は同じだとして、idをclassに変更します。これにより、フリーエリアをそのまま増やすことができます(idはそのページで一回しか使用できない)。
カテゴリリストの追加ですが、現在使用しているフリーエリアの上でも下でもお好きな位置に以下を追加します。

<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div class="rss">
<div class="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div class="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>）</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

これも全部idからclassに変更しています。違いはそれだけです。

3.blogtube_extraの場合

blogtube_extraの場合、最初からclassにしてありますので、スタイルシートの変更は必要ありません。エントリ上部のフリーエリアを使用していない場合はエントリ上部に、使用している場合はお使いのフリーエリアの上か下に追加します。

<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div class="rss">
<div class="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div class="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>）</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

!-- メイン開始 --から!-- エントリ開始 --の間に挿入してください。フリーエリアを使用している場合も同様に、この間の、フリーエリアの上か下に挿入します。

4.いくつかのヒント

ここではカテゴリページにエントリの一覧を表示しましたが、変数を理解していれば、同様のカスタマイズをトップページなどでも表示できます。以下に関連するFCブログ用の変数を掲載しますので、カスタマイズにチャレンジしてみて下さい。

<!--category_area-->
カテゴリー画面(blog-category-x.html)の時に表示するブロック(フラグ)
<!--/category_area-->

<!--index_area-->
トップの時(?mode 等のクエリーが無し)のみに表示するブロック(フラグ)
<!--/index_area-->

次は日付の表示です。簡単に月/日の表記ですが、変数を変更すれば好きな表示にカスタマイズできます。

<%topentry_year> - 年を表示
<%topentry_month> - 月を表示
<%topentry_day> - 日を表示
<%topentry_hour> - 時を表示
<%topentry_minute> - 分を表示
<%topentry_second> - 秒を表示
<%topentry_youbi> - 曜日（洋風）を表示
<%topentry_wayoubi> - 曜日（和風）を表示
<%topentry_wayoubi> - 曜日（和風）を表示