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

ひばりさんよりご指摘いただいて気が付いたんですが、コメントフッター部分の投稿者リンクの方法が間違っていたようです。もちろん表示などには問題ありませんが、気になる方は、FC2ブログ用テンプレートの修正をお願いいたします。

1.FC2ブログ用テンプレートの修正部分

修正箇所は次になります。

<div class="comment-footer">
投稿者:<a href="<%comment_url>"><%comment_name></a>
| 投稿日:<%comment_month>月<%comment_day>日(<%comment_hour>:<%comment_minute>)
| <a href="<%comment_edit_link>" title="コメント編集のページへ">編集</a>
</div><!-- comment-footer -->

次のように変更して下さい。

<div class="comment-footer">
投稿者:<%comment_url+name> 
| 投稿日:<%comment_month>月<%comment_day>日(<%comment_hour>:<%comment_minute>)
| <a href="<%comment_edit_link>" title="コメント編集のページへ">編集</a>
</div><!-- comment-footer -->

FC2で使用できる変数をよく理解できていなかったようです。また、この変数自体がFC2のブロック変数一覧にも載っていなかったりします。機能はしますので、これで問題は無いと思います。(メールアドレスリンクもあるんですが、メールアドレスを記入することはまず無いと思いますので設定していません)

2.FC2テンプレート変数一覧表

検索して見つけた隠し変数はこちらで紹介されています。公式のFC2変数一覧よりも便利で使いやすいので、本格的にカスタマイズする場合や、FC2ブログ用のテンプレートを作成する際にご利用下さい。

FC2テンプレート変数一覧表 ( それは仕様？様 )

今回はコメントで質問をいただいた返答を元に、FC2ブログで用意されている、新しい記事を書くの本文欄で使用できる、strong(強調)とi(斜体)タグを使用する場合向けのカスタマイズです。

1.スタイルシートのカスタマイズ

* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal;
word-break: break-all;
font-family: Verdana, Arial, sans-serif;
}

上記の抹消線を削除してください。

#box-right{
float: right;
width: 230px;
}

#box-right h3{
font-weight: normal;
}

#box-sub{
float: left;
width: 150px;
}

#box-sub h3{
font-weight: normal;
}

今度は赤色の部分を追加します。できたらこの場所に追加してください。
これで本文に強調文字、斜体文字が設定でき、左右カラムのh3タグ部分も標準フォントで表示されるはずです。(後ほどこのようにFC2ブログ用のテンプレートを変更するかもしれません。この方がよいかも。)

2.FC2ブログ本文で文字のサイズ変更を使用する

大・小の文字設定機能ですが、文字の指定方法が異なるため、うまくは機能しません。どうしても使用したい場合は、以下のようにFC2ブログ用テンプレートを変更してください。

.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 12px;
line-height: 150%;
}

上記のスタイルシート抹消線部分を削除して、替わりにfont-size: small;かfont-size: x-small;を追加してください。
これで大文字・小文字も設定できますが、本文の文字サイズはコントロールできなくなります(ブラウザなどにより異なるサイズで表示される)。

今回は背景に画像を使用するカスタマイズの解説です。多少クセがあるので、説明を参考にしてカスタマイズしてみてください。(背景画像はリピートさせる、標準指定を想定しています)

1.ボックス外部の背景画像

body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
background: #fff;
}

抹消線のbackground: #fff;は削除してください。
左右に背景画像が表示されます。大きいモニタだと、意外に横にスペースがありますので、意味はあります。

2.背景画像をボックス内にも適用

背景画像を、コンテンツが無い部分に対して全体的に使用します。コンテンツがある部分は背景色を適用させます。

body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

.mainbox{
width: 100%;
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.mainnavi{
margin-top: 10px;
text-align: center;
font-size: 12px;
background: #fff;
}

.comment-entry{
font-size: 12px;
color: #000;
width: 100%;
background: #fff;
}

抹消線のbackground: #fff;は削除してください。
変更箇所は離れていますので、検索などを使用して該当部分を見つけて下さい。エントリ部分やフリーエリア、左右カラムメニューなどの背景色は指定していますので、それ以外の部分には背景画像が適用されます。

以上が基本的な背景色を使用する際のカスタマイズ方法です。ちょっと簡単とまではいかないので、これ以外のカスタマイズをする場合は少々面倒かもしれません。

「画像の下にいれた文字のサイズが大きくなる」、という質問を頂いたんですが、考えられるのは画像をテーブル内に配置する場合です。
以前にエントリしていますが、テーブルは使い方が単純ではないので、あえて何もスタイルシートで設定していません。
ですので、文字サイズはブラウザの標準サイズになりますので、たいていは大きくなってしまいます。

特に深く考えない場合は、メイン部分で使用するテーブル全てに対してスタイルシートを適用すれば簡単です。

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

#box-main ul{
margin: 10px 0 10px 16px;
line-height: 175%;
}

#box-main table{
font-size: 12px;
color: #000;
}

/* メイン部分 */

赤色の部分をできればこの場所に追加してください。これでテーブルを使用しても、他のテキストと同様に12pxサイズのフォントで表示されます。

また、この場合はメイン部分だけの指定になりますので、ブログ全体で同じサイズ(12px)で表示したい、という場合は以下になります。

.section{
}

table{
font-size: 12px;
color: #000;
}

/*　　　　基本的な設定　　　　*/

この場所だけに追加すれば大丈夫です。先ほどの部分の追加は必要ありません。
テーブルを画像組みや、簡単な表でしか使わない場合は、このスタイルシートを追加してしまったほうがよいかもしれません。

これでも画像の下のフォントサイズが治らない場合は、再現していただかないと原因がわかりかねます。

今回はバナー部分を左右に2分割して、汎用的に使用できるようにカスタマイズします。左右に分割するだけなら難しくないんですが、分割して何をやりたいかを決めていないので、カスタマイズによっては修正が必要になる可能性があります。
それ程複雑なことをしなければ、後はテキストの位置などを追加するだけで対応できますので、まずはお試し下さい。

1.バナー部分のスタイルシートをカスタマイズする

とりあえず汎用的に対応できるようにスタイルシートをカスタマイズしておきます。その後HTML部分を変更する例をご紹介します。

#banner{
width: 100%;
background: #ebebeb;
border-bottom: solid 1px #000;
}

#banner a,
#banner a:link,
#banner a:visited{
color: #000;
text-decoration: none;
}
#banner a:hover{
color: #000;
text-decoration: underline;
}
#banner a:active{}

#bannerbox{
text-align: left;
color: #000;
padding: 6px 20px;
}

#banner h1,
#banner h1 a{
font-size: 24px;/*ブログタイトルの文字サイズ*/
margin-bottom: 6px;
}

#banner h2{
color: #000;
font-size: 12px;/*ブログの説明の文字サイズ*/
}

#bannerleftbox{
float: left;
width: auto;/*左ボックス。サイズは自動*/
}

#bannerrightbox{
float :right;
width: auto;/*右ボックス。サイズは自動*/
}

#bannerright{
font-size: 12px;
color: #000;
text-align: right;/*右ボックスの文字は右寄せ*/
}

#bannerleft{
font-size: 12px;
color: #000;
}

説明はコメントで簡単にしてあります。/*　　　　　ヘッダ・バナー部分　　　　　*/内のスタイルシートを上記のスタイルシートに置き換えて下さい。

2.カスタマイズ例。左にブログタイトル。右にブログの説明文

次はHTML部分をカスタマイズします。一番簡単な例ですね。

<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<h2><%introduction></h2>
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

ブログの説明文は右寄せになります。左寄せにしたい場合、スタイルシートのtext-align: right;をtext-align: left;に変更してください。

3.ブログタイトル、ブログの説明が左で、右に画像などを配置。

どうしても右が空いてしまうので、このようなパターンがいいかもしれません。

<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<img src="画像のアドレス" width="幅" height="高さ" alt="代替文字列" />
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

4.検索窓を右に配置

単に画像を検索フォームに置き換えただけですが、この方が実用的かもしれません。ただし注意点があります。

<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<form method="get" action="検索フォームのアドレス">
<input id="search-text" type="text" name="q" size="40" value="">
<input id="submit" type="submit" value="Search">
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

注意点は検索フォームのアドレスで、ちなみにこのブログだとhttp://templatetube.blog78.fc2.com/index.php?ul=541910f6318cdaceになるんですが、php?以下の文字の規則性がわからないので、使用する場合は、まずプラグインで検索フォームを表示して、ソースを参考にしてアドレスを調べて下さい。そのアドレスを挿入すればカスタマイズできます。

5.右にカレンダーを設置

実はカレンダー用のスタイルシートも用意してあるので、このようなこともできます、ということで。

<div id="banner">
<div id="bannerbox">

<div id="bannerleftbox">
<div id="bannerleft">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>
</div>

<div id="bannerrightbox">
<div id="bannerright">
<div class="leftcalendar"><!-- カレンダー -->
<div class="calendarbox"><!-- カレンダーボックス -->
<table summary="カレンダー" class="calendar">
<caption>
<a href="<%prev_month_link>" title="前月">«</a> <%now_year> ⁄ <%now_month> <a href="<%next_month_link>" title="次月">»</a>
</caption>
<tr>
<th abbr="日曜日" scope="row"><span class="sun">S</span></th>
<th abbr="月曜日" scope="row">M</th>
<th abbr="火曜日" scope="row">T</th>
<th abbr="水曜日" scope="row">W</th>
<th abbr="木曜日" scope="row">T</th>
<th abbr="金曜日" scope="row">F</th>
<th abbr="土曜日" scope="row"><span class="sat">S</span></th>
</tr>
<!--calender-->
<tr>
<td><span class="sun"><%calender_sun></span></td>
<td><%calender_mon></td>
<td><%calender_tue></td>
<td><%calender_wed></td>
<td><%calender_thu></td>
<td><%calender_fri></td>
<td><span class="sat"><%calender_sat></span></td>
</tr>
<!--/calender-->
</table>
</div><!-- カレンダーボックス -->
</div><!-- カレンダー -->
</div>
</div>

<div style="clear: both;"></div>
</div><!-- bannerbox -->
</div><!-- banner -->

この場合、リンクの色の変更やブログタイトルの画像化、背景色の変更、などのカスタマイズをすると更に見映えがよくなります。ちなみにこのカレンダーは、左カラムに設置することを想定していますので、プラグインの上に置いてみてもいいかもしれません。

以上がバナー部分のカスタマイズ基本編でした。カスタマイズの内容によって、多少の変更が必要となりますので、これをベースにいろいろといじってみて下さい。