「使えて+いじれる」FC2ブログテンプレート

今回は、アフィリエイトなどの広告を自動で挿入するカスタマイズを紹介します。全てのエントリに同様の広告を掲載する場合などならば、記事に広告コードを入れるより簡単です。
また、他のサイトへのリンクなどなら、テンプレートに挿入しておいた方が楽かもしれまん。これなら簡単に全ページのリンクが自動で書き換わります(記事の場合は該当記事全部を書き換える必要がある)。
それ程難しくありませんし、テンプレートの挿入箇所さえわかれば、他のFC2ブログ用テンプレートを使用していても利用可能です。
いくつかパターンがありますので、使用目的に合わせて選んで下さい。

1.固定リンクページに広告を貼り付けるカスタマイズ

この場合、本文を追記にしておいて、続きを読むのリンク先で表示するページに広告コードを貼り付ける形になります。

htmlのカスタマイズ(追加)箇所

<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<!--permanent_area-->
<div class="mainad">
<a href="<%url>">広告リンク</a>
</div><!-- mainad -->
<!--/permanent_area-->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

cssのカスタマイズ(追加)箇所

.mainad{
margin-top: 10px;
font-size: 12px;
color: #000;
line-height: 1.5;
}

仕組みとしては、固定リンク画面に移ったときのみ表示するための変数、permanent_area内に広告コードを貼っているだけです。ここではタグ表示の上に表示して、かつスペースもcssによって空けていますが、ここを本文と追記の間においたり、あえて本文記事とつなげて表示したりもできます。表示箇所及び、広告用のコードは適宜変更してください。例ではブログのトップページへのリンクを表示しています。

2.トップページの追記の前に広告を貼るカスタマイズ

よく見かけるパターンですが、これをテンプレートで行ってみましょう。

<!--more_link-->
<div class="mainmore">
<!--index_area-->
<a href="<%url>">広告リンク</a><br />
<!--/index_area-->
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->

実は簡単で、追記を表示する箇所に広告のコードを貼り付けるだけです(スペースを取らない場合)。例の赤部分が広告のコードで、青の部分はトップページのみの表示にする場合(検索、カテゴリなどでも表示するなら外す)の表記です。

3.各エントリの最後に貼り付けるカスタマイズ

1のパターンは追記の場合でしたので、普通に追記無しの場合でエントリの下部(フッターの前)に広告をテンプレートに貼り付けるカスタマイズです。

htmlのカスタマイズ(追加)箇所

<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<div class="mainad">
<a href="<%url>">広告リンク</a>
</div><!-- mainad -->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

cssのカスタマイズ(追加)箇所

.mainad{
margin-top: 10px;
font-size: 12px;
color: #000;
line-height: 1.5;
}

勘のいい方はお分かりかもしれませんが、固定リンク画面のみ表示する変数を削除するだけです。これで、自動的にエントリ下部に指定した広告が表示されるようになります。

テンプレート中で使える変数一覧という公式のページがありますので、特定のページのみ表示する変数などを使用する場合に参考にしてみて下さい。

以前に、こちらで紹介しています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などにする。)

何人かの方から質問を受けています、エントリ部分の画像のマージンについて説明しておきます。
まずは、記事を投稿する時に使用するタグのエントリをご覧下さい。こちらで説明しているように、画像は標準で右に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など)は個別に指定してください。

今回は、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> - 曜日（和風）を表示

今回はFC2ブログテンプレートのカスタマイズの実例として、背景色を黒、文字を白にする、簡単に言うと色を反転させたカスタマイズを紹介します。
特に説明するほどのものではありませんので、興味がある方はスタイルシートをダウンロードして適用してみて下さい。

注意:以下でご紹介するカスタマイズは、blogtube_extra用のカスタマイズになります。

1.カスタマイズしたスタイルシートを適用

フリーエリア有り(blogtube_extra)

フリーエリア無し(blogtube_extra01)

2.スタイルシートのダウンロード

フリーエリア有り(blogtube_extra_bkcss.txt)
フリーエリア無し(blogtube_extra_bk01css.txt)

テキストファイルはクリックで表示ではなく、右クリックメニューからダウンロードして下さい。その後テキストエディタで開きます。
色の変更だけなので、スタイルシートに貼り付ければそれだけでカスタマイズ完了です。

3.カスタマイズのポイント

カスタマイズした範囲が広いので、詳細は控えさせていただきます。
基本的には色を反転させているんですが、文字の色やカラムの背景色などはコントラストの関係上、控えめな明るさにしています。文字の色が白(#ffffff)だと目に良くありません。
また、同様にボーダーも外周だけにして、それ以外は削除しています。これもコントラストの関係で、ボーダーをつけるとかなりしつこくなります。
見た感覚的に、通常の色の反転を再現してみました。

ちなみにフリーエリア有り無しで違う箇所は、フリーエリア無しはバナーの下に20pxのマージンを設けています。違いはそれだけです