テンプレート元1[テスト]のカスタマイズ方法

先日、ファンブログテンプレートを個人で配布してみる第0弾[テスト]と言う事で、テンプレートを公開しました。
今回はそのカスタマイズ方法について書いていきます。

ブログタイトルの設定(スタイルシート)

ブログタイトルは右上の正方形の中に表示されるわけですが、現在はこのブログに合わせたスタイルシートになっているため、文字数が多いと表示しきれないと思います。
この部分の設定はスタイルシートの、

.blogtitle{

font-size: 52px;

line-height:1em;

display: block;

margin:30px auto;

width:160px;

}

.blogtitle:before{

content:"　 "; 

}

.blogtitle:hover{

text-decoration:none;

}

の部分になります。これのfont-size、margin、width、を上手く設定して、自分のブログタイトルが綺麗に表示されるようにしてください。
font-sizeで文字の大きさ、widthで表示場所の横幅、marginで余白を調整して表示場所の調整、を行なえます。

また、このブログの場合、8文字を3×3の様に配置する為に、8~10行目の記述をしています。これは、.blogtitleの前に空白を表示するようにしてあります。なので、おそらくほとんどの場合は、この8~10行目の部分は削除して問題ありません。もし、同じ様に、ブログタイトルの先頭部分に空白を作りたい、と言う事があれば、これを使って、contentの"と"の間の空白を調整してみてください。

headタグ内の書き換え

今度はhtmlの設定です。
メイン、アーカイブ、1記事、プロフィール、4つの全てにおいて、metaタグによるキーワードの設定の部分が(キーワードを記入)、となっていると思うので、それを自分のブログにあったキーワードに書き換えて下さい。括弧は必要ないので、キーワードのみ書いて下さい。
ただ、このmetaタグによるキーワードの設定はあまり効果がないとも最近は言われているので、面倒であればその行を消すだけでも良いです。
ちなみに、1記事のページのみ、その記事のカテゴリーがキーワードになるように、{$BlogEntryCategory$}をキーワードとして書いてあります。

また、メインでは、titleタグの記述も少し変わっていると思います。

<title>(キャッチフレーズを記入) - {$BlogName$}</title>

この様に書いてあると思います。BlogNameの部分は当然ブログタイトルが表示されるようになります。キャッチフレーズ、とか書いてあるのは何かと言うと、これを書く事でより分かりやすく、より検索で引っかかりやすくするために、トップページだけタイトルを変更しよう、っていう事が目的になってます。
なので、そのブログにあった、そのブログで狙っているキーワードを含む様なキャッチフレーズを考え、それを書いて下さい。
面倒なら消しても良いですが、それなりに効果はあると思います。
2単語くらいのキーワードで、ブログにあった物を含む様にすればとりあえず良いのかな、と思います。

「お勧め記事」の書き換え

「お勧め記事」ってのが、メイン、アーカイブ、1記事、プロフィール、4つ全てのhtmlのコード内に書いてあります。この部分はこのテンプレートでは連動していないので、全て書き換える必要があります。

<div class="side_title">お勧め記事</div>

<div class="sidetext">

<ul>

<li><a href="http://fanblogs.jp/oands/archive/187/0">ファンブログで『自分のコメント』だけを目立たせる</a></li>

<li><a href="http://fanblogs.jp/oands/archive/173/0">関連記事をjavascriptで表示させる</a></li>

 

</ul>

</div>

こういう記述がどのhtmlにもあると思います。これのアドレスとタイトルを自分のブログの自分の良いと思う、お勧めの記事に書き換えて下さい。表示出来る数であればいくつでも問題ありません。
ここに良いと思う記事を書く事で、訪問者が見てくれる可能性は上がりますし、内部リンクが増えるため、その記事がブログ内で重要な記事だと評価されやすくなると思うので、検索にも他の記事に比べれば上位に表示される様になるんじゃないかな、と思っています。どの程度効果があるかは不明ですが。
一応この部分はリストのhtmlタグを使っているので、追加する場合はhtmlタグを合わせて、liタグもちゃんと書く様にして下さい。

サイドバーの設定

サイドバーは基本的にはファンブログのサイドバーのままなので、通常通り「コンテンツ設定」の「機能選択/並び替え」で、表示させたい物を表示出来ます。その画面の「使用する機能」で、左側のサイドバーがこのブログの右側に表示されているサイドバー、右側のサイドバーがこのブログのフッターに表示されている物、となります。
「項目の追加/編集」で新たに作った物を表示させる場合、サイドバーのデザインに合わせる為には、その項目のタイトルとなる部分は例えば、

<div class="side_title">ブログ内検索</div>

の様にclassがside_titleの何らかのタグで囲って下さい。例の様にdivタグで良いと思います。

また、フッターのデザインに合わせる場合は、全体を

<table class="footprof">

<tbody><tr><td class="side">

 

と、

</td></tr></tbody>

</table>

で囲って下さい。つまり、

<table class="footprof">

<tbody><tr><td class="side">

(ここに色々書く)

</td></tr></tbody>

</table>

と言う様にして下さい。こうすると、点線のボーダーが表示される様になってます。

また、フッターに表示させる物が3つ無い場合は、スタイルシートの

.footer table{

width:260px;

border:10px dashed #960;

padding:0;

float:left;

margin-left:30px;

margin-bottom:30px;

}

のwidthや、marginを調整して、横幅や余白を調整して、良い感じに表示される様にして下さい。

広告の表示について

広告については、前回の記事でも少し触れましたが、少し細かい話をここではしていきます。
一応前回までで、ブログの上の部分に200×200の広告を表示出来る事と、関連記事や次の記事へのリンクの下に300×250の広告を表示出来る事については、本当に簡単にではありますが述べました。
300×250の広告については、初期設定の表示位置よりは、関連記事の上に表示した方がクリックはされやすいと思います。当然その分関連記事のクリック率は下がるので、ページビューは減る事になるかと思いますが。
それでも、クリック率を上げたいと言う場合は、

<div class="kokoku300 clr">(広告のコードを貼る)</div>

を
<!-- snsボタン -->
と書いてある行の上に移動して下さい。こうする事で、snsボタンの上、つまり、記事直下に表示させる事が出来ます。ここが一般的には良く広告が貼られている位置だと思います。
あと、その際、classは消しても問題ありません。他のクラスに変えて、表示位置等を調整したり、ボーダーや背景色を変更したりするのに使った方が良いと思います。ただ、広告を表示させるだけであれば、消すだけで良いです。kokoku300は、次の記事へのリンクの隣に表示させるためのスタイルシートの設定になってますので。

また、これは追加ですが、1記事のページには左に余白があります。この部分には当然広告を表示させる事も出来ます。その場合は、
</div><!--/main-->
と書いてある行と、
</div><!-- /content -->
と書いてある行の間に

<div class="adsense160700">(広告のコード)</div>

とか書くと、その部分に広告が表示される様になると思います。これは、アドセンスの160×700の広告用に一回作って、一度試したんですが、自分的には窮屈になる感じが嫌だったので、割とすぐ外しちゃいました。当然スタイルシートの

.adsense160700{

width:160px;

float:left;

margin-left:10px;

padding:20px;

border-right:20px solid #91002c;

border-bottom:20px solid #8a8000;

}

の部分に設定が書いてあるので、横幅や表示位置などはここで設定出来ます。変更する場合は新しくクラスを作ってしまっても良いと思います。

コメントの絵文字

このテンプレートには、ファンブログの公式テンプレートに初期設定で使われているコメントの絵文字が使えない様になっています。ページ表示速度の問題などで外しました。(参考：コメントツールバーを無くして表示速度0.5秒削減)
これを使える様にするには、コードを1つ貼り付ければ良いだけなので、コメントで絵文字を使える様にしたい方は以下のコードを指定の位置に貼り付けて下さい。
{$BlogCommentToolbar$}
これです。これを、
<!-- SpamFilterIfCommentCaptcha -->
と書いてある行の2行上の

<td class="text"></td>

のdivタグの間に貼り付けて下さい。つまり、こうなります。

<td class="text">{$BlogCommentToolbar$}</td>

これで、コメントの絵文字が使える様になります。

最後に

一応、最初のお試しテンプレートの設定、カスタマイズについてはこんな感じかな、と思います。何か分からない事や、「こうしてみたいんですが、どこにどうすれば良いんでしょうか」、みたいな事があればコメント下されば相談に乗りますし、内容によってはこの記事にも追加していこうと思っていますので、気軽にコメント下さい。
また、このテンプレートは少し前の物になるため、現在のこのブログに使われている、ブログのコメントフォームを折り畳み式にするとか、ファンブログで『自分のコメント』だけを目立たせるとかは、初期設定では設定されていないので、自分で設定しないと使えません。割と簡単なので、興味ある方はやってみて下さい。

ちなみに、次のテンプレートの配布までは結構間が空いてしまうと思います。新しいデザインを考えて、色々試行錯誤してみないといけないので。数ヶ月後になってしまうかもなので、首を麒麟にして待っていて下さればな、と思います。ってか、待ってる人はいないかw
面白いデザインの物を作れる様、頑張ります。失礼します。