--年--月--日
スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
今回は、アフィリエイトなどの広告を自動で挿入するカスタマイズを紹介します。全てのエントリに同様の広告を掲載する場合などならば、記事に広告コードを入れるより簡単です。
また、他のサイトへのリンクなどなら、テンプレートに挿入しておいた方が楽かもしれまん。これなら簡単に全ページのリンクが自動で書き換わります(記事の場合は該当記事全部を書き換える必要がある)。
それ程難しくありませんし、テンプレートの挿入箇所さえわかれば、他のFC2ブログ用テンプレートを使用していても利用可能です。
いくつかパターンがありますので、使用目的に合わせて選んで下さい。
この場合、本文を追記にしておいて、続きを読むのリンク先で表示するページに広告コードを貼り付ける形になります。
<!--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 -->
.mainad{
margin-top: 10px;
font-size: 12px;
color: #000;
line-height: 1.5;
}
仕組みとしては、固定リンク画面に移ったときのみ表示するための変数、permanent_area内に広告コードを貼っているだけです。ここではタグ表示の上に表示して、かつスペースもcssによって空けていますが、ここを本文と追記の間においたり、あえて本文記事とつなげて表示したりもできます。表示箇所及び、広告用のコードは適宜変更してください。例ではブログのトップページへのリンクを表示しています。
よく見かけるパターンですが、これをテンプレートで行ってみましょう。
<!--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-->
実は簡単で、追記を表示する箇所に広告のコードを貼り付けるだけです(スペースを取らない場合)。例の赤部分が広告のコードで、青の部分はトップページのみの表示にする場合(検索、カテゴリなどでも表示するなら外す)の表記です。
1のパターンは追記の場合でしたので、普通に追記無しの場合でエントリの下部(フッターの前)に広告をテンプレートに貼り付けるカスタマイズです。
<!--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 -->
.mainad{
margin-top: 10px;
font-size: 12px;
color: #000;
line-height: 1.5;
}
勘のいい方はお分かりかもしれませんが、固定リンク画面のみ表示する変数を削除するだけです。これで、自動的にエントリ下部に指定した広告が表示されるようになります。
テンプレート中で使える変数一覧という公式のページがありますので、特定のページのみ表示する変数などを使用する場合に参考にしてみて下さい。
今回は、FC2ブログのカテゴリページ上部にそのカテゴリのエントリリストを表示するカスタマイズです。あまり融通が利かないので、表示されてるエントリのリストのみ(FCブログの、環境設定→ブログの設定にある、1ページ上に表示するエントリ数だけ)しか表示できないようです。
それでもリストで表示してあれば、エントリの内容がわかりやすくなりますので、興味のある方はお試し下さい。
また、折角エントリ上部にフリーエリアを設定していますので、カテゴリのリストはそちらに表示することにします。
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-->
<!-- エントリ開始 -->
標準でカスタマイズする場合と同様に、タイトル部分と表示部分に今回のカスタマイズを挿入します。これだけで大丈夫です。
追加する場合、スタイルシートもカスタマイズする必要があります。以下を変更して下さい。(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に変更しています。違いはそれだけです。
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-->
<!-- エントリ開始 -->
!-- メイン開始 --から!-- エントリ開始 --の間に挿入してください。フリーエリアを使用している場合も同様に、この間の、フリーエリアの上か下に挿入します。
ここではカテゴリページにエントリの一覧を表示しましたが、変数を理解していれば、同様のカスタマイズをトップページなどでも表示できます。以下に関連する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用のカスタマイズになります。
フリーエリア有り(blogtube_extra_bkcss.txt)
フリーエリア無し(blogtube_extra_bk01css.txt)
テキストファイルはクリックで表示ではなく、右クリックメニューからダウンロードして下さい。その後テキストエディタで開きます。
色の変更だけなので、スタイルシートに貼り付ければそれだけでカスタマイズ完了です。
カスタマイズした範囲が広いので、詳細は控えさせていただきます。
基本的には色を反転させているんですが、文字の色やカラムの背景色などはコントラストの関係上、控えめな明るさにしています。文字の色が白(#ffffff)だと目に良くありません。
また、同様にボーダーも外周だけにして、それ以外は削除しています。これもコントラストの関係で、ボーダーをつけるとかなりしつこくなります。
見た感覚的に、通常の色の反転を再現してみました。
ちなみにフリーエリア有り無しで違う箇所は、フリーエリア無しはバナーの下に20pxのマージンを設けています。違いはそれだけです
せっかく2カラムを作成しましたので、少しアレンジしてみましょう。トップページを3カラム、それ以外を左メニューの2カラムにしてみます。意外と簡単にできますよ。
blogtube_extra_32.txt
blogtube_extracss.txt
解説もしますが、カスタマイズ済みのテンプレートはダウンロードできます。新しいテンプレートを用意して、それに貼り付けてみて下さい。プレビューだとトップだけしか表示されませんので、更新して適用しないと確認できません。
今回はトップ(index_area)とそれ以外(not_index_area)でカラム数を変えますので、テンプレートで使用できる変数をうまく使って表示を切り替えます。
<!--index_area-->
<body class="layout-three-column">
<!--/index_area-->
<!--not_index_area-->
<body class="layout-two-column-left">
<!--/not_index_area-->
bodyでカラム数を変更できますので、index_areaとnot_index_areaの変数を用いて切り替えます。もちろん逆もできますし、右メニューと左メニューでの切り替えも可能です。意味ないと思いますが。
<!--index_area-->
<!-- 右メニュー開始 -->
<div id="box-right">
～
</div><!-- box-right -->
<!-- 右メニュー終了 -->
<!--/index_area-->
テンプレートの説明で、左メニュー2カラムの場合は右メニューを削除すると説明していますが、トップだけ表示するindex_areaで囲めばトップ以外では削除(非表示)されます。
ちなみに紹介しているテンプレートでは、フリーエリア、プラグイン2が表示されます。
汎用的にするため、トップとそれ以外で切り替えます。トップはプラグイン1とFC2ブログの広告を表示します。
<!--index_area-->
<!-- 左メニュー開始 -->
<div id="box-sub">
<!--plugin-->
<!--plugin_first-->
<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->
<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->
<!--/plugin_first-->
<!--/plugin-->
<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->
</div><!-- box-sub -->
<!--/index_area-->
次にトップ以外ですが、メニューが左だけになるので、プラグイン3を使用してみます。これでトップのメニューと完全に切り離せますので、管理が簡単になります。
もし単純にプラグイン1とプラグイン2を連続させたい場合は変更してください。もちろんFC2ブログの広告も表示します。
<!--not_index_area-->
<!-- 左メニュー開始 -->
<div id="box-sub">
<!--plugin-->
<!--plugin_third-->
<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->
<!--/plugin_third-->
<!--/plugin-->
<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->
</div><!-- box-sub -->
<!--/not_index_area-->
やっていることは単純で、カラム変更の応用です。
プラグインは以下のようになりますので、変更する場合にどうぞ。(プラグインxという文字は説明文ですので、その下から貼り付けてください)
プラグイン1
<!--plugin-->
<!--plugin_first-->
<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->
<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->
<!--/plugin_first-->
<!--/plugin-->
プラグイン2
<!--plugin-->
<!--plugin_second-->
<div class="righttitle">
<%plugin_second_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_second_description>
<%plugin_second_content>
<%plugin_second_description2>
</div><!-- rightmain -->
<!--/plugin_second-->
<!--/plugin-->
プラグイン3
<!--plugin-->
<!--plugin_third-->
<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->
<!--/plugin_third-->
<!--/plugin-->
カラムサイズの変更ですが、細かい計算は置いておいて、メニューとメインカラムの変更だけなら以下を参考にしてください。
.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;
}
上がメインカラム、下が左カラムです。合計を890pxにしてください。
今回はリクエストにお応えする形ですが、需要はあると思いますのでエントリでご紹介します。
FC2ブログの機能にある、コメント時に絵文字&装飾を使用できる機能を追加します。公式のテンプレだと付いているようですが、こちらでご紹介しているFC2ブログ用のテンプレートには付いていません。必要と思われる方は以下の方法でカスタマイズをお願いいたします。
(コメント時の絵文字&装飾機能とは関係ありませんので、それだけをカスタマイズする場合は必要ありません。)
このテンプレだと、FC2の標準機能を用いた場合の、文字を大きくしたり小さくしたりする機能がうまく利用できませんので、それを修正するカスタマイズです。以下の通りに変更してください。
* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal; /*太字を使うなら削除*/
word-break: break-all;
font-size: 12px; /*追加*/
font-family: Verdana, Arial, sans-serif;
}
.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 14px;/*追加*/
line-height: 1.5;/*変更*/
}
これで修正は終わりですので、テキストエディタ全文をコピーして、FC2ブログ管理画面のテンプレート編集画面でペーストして下さい。
プレビューでは確認できませんので、元のCSSをテキストエディタなどで保存した上で、管理画面の方も保存して、表示を確認してください。
また、エントリ本文の太字が効かない件に関してはこちらもご覧下さい。
FC2の新しく記事を書く機能を使って強調文字を使用する場合
コメント時に絵文字&装飾機能の追加はHTMLを編集します。追加だけですので、以下箇所を変更して下さい。
<!-- コメント投稿フォーム -->
から3行下にある、
<form method="post" action="./">
を
<form method="post" action="./" name="comment_form">
に変更
<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
</dl>
<div class="comment-button">
上記の部分を下記に置き換えて下さい(該当部分にそのまま貼り付けて、その下の説明箇所だけ更に変更してください)。
<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
</dl>
<script type="text/javascript" src="http://blogxx.fc2.com/load.js"></script>
<div class="comment-button">
赤が追加、青が移動箇所です。また、http://blogxx.fc2.comのxx部分はご利用のFC2ブログのサーバー名を入れて下さい。このブログならblog78.fc2.comなので、xxは78になります。
これでFC2ブログのコメント機能である、絵文字&装飾が追加されます。java scriptですので機能を有効にしないと表示されませし利用できません。
カスタマイズは以上です。ちなみにこの絵文字&装飾機能についてはこちらが公式の情報のようです。この記事もこちらを参考にしています。
コメント欄での絵文字・デコレーション機能のカスタマイズについて
Author:templatetube
ＦＣ２ブログへようこそ！
