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

今回はタイトル部分(バナー部分)のカスタマイズです。バナーは一番上に表示されますので、ブログの印象としてはかなり大きな部分を占めます。文字の大きさや色、背景などを自分の色で表現してみてください。
(バナー部分に通常テキストを挿入するのは想定していませんので、その場合はスタイルシートを修正する必要があります。)

1.タイトル部分のHTML

<div id="banner">
<div id="bannerbox">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div><!-- bannerbox -->
</div><!-- banner -->

h1でタイトル、h2でブログの説明を表示しています。

2.タイトル部分のスタイルシート

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

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

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

#banner h1,
#banner h1 a{
margin-bottom: 6px;
font-size: 24px;
font-weight: bold;
}

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

3.スタイルシートでカスタマイズ

#banner{
width: 100%;
background: #ebebeb;背景色
border-bottom: solid 1px #000;バナー下のボーダー指定
}

バナー全体の指定です。背景色を白に(background: #fff;)、ボーダーを削除すると、すっきりしたトップになります。

#banner a,
#banner a:link,
#banner a:visited{
color: #000;リンクの色
font-size: 24px;削除
text-decoration: none;
}
#banner a:hover{
color: #000;カーソルを乗せた時のリンクの色
font-size: 24px;削除
text-decoration: underline;
}
#banner a:active{}

リンク部分(基本的にブログタイトル部分)の指定。カスタマイズは、clolorの部分でブログタイトルリンクの色を変更できます。
カスタマイズしないなら問題ありませんが(ただし必要でもない)、ブログタイトルのサイズを変更したり、バナー部分にテキストリンクを設定する場合、削除部分(font-size: 24px;)を削除してください。

#bannerbox{
text-align: left;テキストの位置
color: #000;文字の色
padding: 6px 20px;上下、左右のパディング
}

バナー部分のボックス指定です。テキストをセンタリングしたり、文字の色(通常テキストの色なので、特に必要ありません。ここにfont-size: 12px;を追加すると、バナー部分にテキストを表示できます。)を変更したりできます。
paddingですが、これはボックス内部の余白を指定しています。上下に6px、左右に20pxの内部余白を指定していますが、もちろん変更可能です。

padding: 3px;に変更した例。内部余白の重要性がわかると思います。

#banner h1,
#banner h1 a{
margin-bottom: 6px;タイトル下のスペース
font-size: 24px;ブログタイトルのフォントサイズ
font-weight: bold;ブログタイトルを太字にする
}

ブログタイトルの表示部分です。タイトル下のスペースは、ブログの説明文をどれだけ離すかの指定です。タイトルのフォントサイズはお好きなサイズで(注:カスタマイズの例を参照)。また太字にしたくない場合は、font-weight: bold;を削除してください。

#banner h2{
color: #000;文字の色
font-size: 12px;文字のサイズ
}

ブログの説明文の指定。色、サイズは変更可能です。

4.カスタマイズの例

よくあるパターンを紹介します。

ブログタイトルのフォントを小さく、通常の太さで表示

#banner a,
#banner a:link,
#banner a:visited{
color: #000;
font-size: 24px;削除
text-decoration: none;
}
#banner a:hover{
color: #000;
font-size: 24px;削除
text-decoration: underline;
}
#banner a:active{}

#banner h1,
#banner h1 a{
margin-bottom: 6px;調整
font-size: 14px;
font-weight: bold;削除
}

文字のサイズを14pxにして、通常の太さで表示。この場合、マージンを4px位にした方がよいかもしれません。

ブログタイトルに画像を使用

この場合、HTMLをカスタマイズします。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="画像のアドレス" width="横サイズ" height="縦サイズ" alt="<%blog_name>" /></a></h1>

赤文字部分は使用する画像に合わせて変更してください。これでバナーが使用できます。

以上が簡単にできるカスタマイズの説明でした。もう少し複雑なカスタマイズ(バナーを分割して左にタイトルを、右に画像や検索フォームを設置)などは次回までお待ち下さい。

秘密の質問をいただいたんですが、ブログのアドレスと質問内容が少し不明ですので、できましたら再度ご連絡いただけますでしょうか。
わかる範囲でお答えすると、テーブル自体はスタイルシートで何も設定していないので、テーブルを使うとブラウザの標準スタイルで表示されます。
細かく指定したい場合、スタイルシートに追加するか、エントリ部分で直接スタイルシートを適用(styleを使用)するしかありません。

単純にテーブルを使用した例です。(サイズと背景とだけ指定)

前回の、ブログ全体のサイズをカスタマイズするの続きです。実際にブログ全体のサイズを変更した例を紹介します

このテンプレートの左右カラムは非対称です。基本的に、左が記事やリンク、コメントなどで、右カラムに画像などの広告やランキングを貼り付けることを想定しています。
ただ、使用目的によって最適なサイズは異なると思いますので、このエントリを参考に最適なサイズで運用してみて下さい。

1.左右カラムが190pxで、エントリ部分が500px

最初は簡単な変更で。左右カラムのサイズを揃えてみましょう。それ以外は標準です。

構成はこのようになります。計算してみましょう。

15+190+10+500+10+190+15=930px
930-(15+15)=900px(左右マージンを引く)
190+10+500=700px(=左ボックス)
900-700=200px(=右カラム+スペース)
最初に計算してみて、サイズに間違いがないか必ず確認してください。

2.スタイルシートの変更

変更しているのは、左ボックス、左カラム、右カラムですので、その部分のスタイルシートを変更すればいいことになります。

#box-left{
float: left;
width: 700px;
}

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

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

変更した画面です。ちょっとわかりにくいですが、ちゃんと変更されています。実はサイズの変更なら、こんなに簡単です。ただしサイズを変更した場合、HTML部分に変更したサイズよりも大きいもの(画像など)が無いようにしてください。特にエントリ部分のサイズを変更すると、修正はエントリ本文になりますので注意してください。

3.その他の変更例

ちょっと変なサイズにしてみます。計算さえあっていれば、サイズの変更はどのようにでもなります。

左カラム300px、エントリ部分400px、右カラム180px

スペースは変更無しです。変更箇所はこちら。

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

#box-margin{
margin: 0 15px;
}

#box-left{
float: left;
width: 710px;
}

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

#box-main{
float: right;
width: 400px;
}

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

画像はこのようになります。エントリ上部のボックスも変更されますので、フリーエリアはそのままで大丈夫です。変更箇所はこれだけで済みます。

4.変態なカスタマイズ

極端な例であって、止めた方がいいですよw

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

#box-margin{
margin: 0 15px 0 25px;
}

#box-left{
float: left;
width: 400px;
}

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

#box-main{
float: right;
width: 300px;
}

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

計算があっていれば、このようなことも可能です。

5.カスタマイズの注意点

• 全体のサイズも変更できますが、上部のフリーエリアのサイズも変更しないと小さくすることは出来ません。
• エントリ部分を小さくした場合、コメントなどのフォームが崩れるかもしれません(未確認)
• エントリ本文やHTML部分に、スタイルシートで変更したサイズ以上のもの(画像など)がある場合には、カラム落ちやサイズの変更不良がおこります。

以上でサイズ変更の解説は終わりです。計算さえ合っていれば、数箇所の変更だけでブログ全体のサイズを好きにカスタマイズできます。好きなサイズに変更してみてください。

今回はブログ全体のサイズをカスタマイズする方法を説明します。ブログ構成は、全体のボックス、左右カラム、エントリ部分はもちろん、忘れてはならないのは、それぞれに隣接するスペース部分です。これらが組み合ってサイズは決まっていますが、計算の仕方と、該当するスタイルシート部分がわかれば、それぞれのサイズ変更は意外と簡単です。
左右カラムやエントリ部分のサイズが変更できれば、更に使いやすくなると思いますので、是非挑戦してみてください。

1.ブログの標準サイズ指定

まずは標準で指定しているサイズを確認します。ここで重要なのは、スペースもサイズ計算に含まれる、という点です。忘れがちなので注意してください。(説明するテーブルは、実サイズと比率が異なります)

標準のブログサイズ

数字は指定しているピクセルサイズ(px)です。カスタマイズする前のブログを確認してみて下さい。このようなサイズになっているはずです。
下のアルファベットは計算の際に使用します。サイズは自由にできますが、合計が合っていなければなりません。

2.指定しているスタイルシート部分

サイズを指定しているのはスタイルシートです。ですので、スタイルシートの指定部分だけ変更すれば、ブログのサイズは変更できます(変更したサイズよりも大きい画像などをHTML部分で指定していればカラム落ちします)。
それぞれのサイズをしている部分だけ抜粋します。

全体のボックスサイズ(930px = a+b+c+d+e+f+g)
#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

全体のボックスの左右スペース(各15px = a+g)
#box-margin{
margin: 0 15px;
}

左ボックス(左カラムとエントリ部分。計660px = b+c+d )
#box-left{
float: left;
width: 660px;
}

右ボックス(=右カラム。230px(+10px) = f+(e))
#box-right{
float: right;
width: 230px;
}

エントリ部分(500px = d)
#box-main{
float: right;
width: 500px;
}

左カラム(150px = b)
#box-sub{
float: left;
width: 150px;
}

カッコ内が指定しているサイズで、=以降は前記した計算用のアルファベットです。実際に計算すれば、そのサイズになりますね。
ある程度知識があれば、これでサイズの変更ができるかもしれませんが、もう少し説明します。計算さえ間違えなければ、サイズの変更は簡単です。

3.2カラムを作成する

3カラムというのは、2カラムをまず作成して、その片方のカラムの内部を更に2カラムにする、という構成です。ですので、まずは2カラムを作成します。

2カラムの構成

これが最初に作成する2カラムです。左ボックス内部を更に2カラムにして、左カラムとエントリ部分を作成しています。
このような構成になっているのがわかれば、あとは計算したサイズをそれぞれ変更すればブログのサイズ変更は完了です。

4.2カラムの計算

まずは準備です。指定しているスタイルシート部分と、色が赤の部分が指定している箇所です。実際に計算してみてください。

全体のボックスサイズ(a〜g)は930pxです。

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

全体のボックスに左右のマージンを指定することで、左右カラムのスペース(a g)になります。(930-(15+15)=900px)

#box-margin{
margin: 0 15px;
}

左カラム(b)とエントリ部分(d)とスペース部分(c)の合計が、左ボックスのサイズになります。(150+10+500=660px)

#box-left{
float: left;
width: 660px;
}

結果的に、全体のボックスから左右のスペースを引き、そこから左ボックスのサイズを引いたサイズが右ボックス+スペース部分になります。
930-(15+15)-(150+10+500)=240px
ここが少し紛らわしい部分ですが、メインボックス内部で、左ボックス(b+c+d)をfloatを使用して左に寄せて、右ボックス(fだけ)を同じくfloatを使用して右に寄せています。
右ボックス(f)のサイズが230pxで、これを右に寄せているので、結果的に右ボックスの左に10pxのスペース(e)ができます。
計算する上で、ここが一番間違えやすい部分ですので、よく注意してください。右カラム(f)の横のスペース(e)は結果的にできるスペースで、スタイルシートで直接指定するスペースではありません(もちろん計算してスペースができるようにします)。

#box-right{
float: right;(このfloatで右に寄せる)
width: 230px;
}

これで左右スペース、左ボックス、右ボックス(右カラム)が作成できました。次は左ボックス内に2カラムを作成し、左カラムとエントリ部分を作ります。

4.左ボックスに2カラムを作成する

左ボックスを先に作成しましたが、計算上は左カラムとエントリ部分とスペース部分のサイズを先に決定しないと作成できません。合計が結果的に左ボックスのサイズになるわけです。

左カラム(b)は150pxです。floatで左に寄せています。

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

エントリ部分(d)は500pxです。floatで右に寄せています。

#box-main{
float: right;(右に寄せる)
width: 500px;
}

先ほどと同じですね。左カラム(b = 150px)を左に寄せ、エントリ部分(d = 500px)を右に寄せます。結果的に10pxのスペース(c)が間にできます(660-(150+500)=10px)。
このスペースも、直接的に指定するのではなく、結果的にできるスペースになります。
ちなみに3カラムを作成する方法はいくつかあるので、このカスタマイズは、この方法を使用したテンプレートでないと使用できません。

これでサイズ変更の説明は終わりです。次回は実際にサイズを変更してみましょう。

今回は前回(エントリ本文のカスタマイズ方法その１)の続きです。エントリ部分カスタマイズの参考にしてみて下さい。

0.エントリ部分のHTML

<!--topentry-->
<div class="section" id="a<%topentry_no>">
<div class="mainbox">
<div class="maindate"><!-- 投稿日と時間 -->
<h2 class="maindate2">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</h2>
</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->
<h3 id="a<%topentry_no>" class="maintitle"><%topentry_title></h3>
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

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

<div class="mainfooter"><!-- エントリ下部 -->
カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>

1.エントリ本文のカスタマイズ

個別に文字色などは指定していますが、あまり個別にごちゃごちゃ設定すると、統一感がなくなりますので注意してください。

HTML部分
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

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

重要なのはline-heightで、ここで行間を指定できます。地味ながら非常に重要で、ここで適度に行間をあけないと非常に見づらい文章が出来上がります。ここだけでなく、(テキストを複数行設定する)どの部分でもこのline-heightを指定して、適度な行間を指定するようにしてください。

2.続きを読むのカスタマイズ

HTML部分
<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

.mainmore{
text-align: right;
margin-bottom: 10px;
color: #000;
font-size: 12px;
}

追記部分を表示する、「…続きを読む」部分は好きな文字を使用できます。赤で囲んだ文章が表示する文字なので、好きな文字に変更してください。
また、CSS部分で文字を右寄せにしています。個人的には右寄せの方が好きですが、これを指定しなければ左寄せになります。その方がよければ削除してください。

3.タグの表示

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

.maintag{
margin-top: 14px;
text-align: right;
color: #000;
font-size: 10px;
}

タグの表示部分です。フッター要素としていますので、文字は10pxと小さめです。もちろん変更は可能です。また、「タグ : xx」という表記ですので、ここも好きな文字に変更できます。

4.フッター部分のカスタマイズ1

<div class="mainfooter"><!-- エントリ下部 -->
カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>

.mainfooter{
margin-top: 4px;
text-align: right;
color: #000;
font-size: 10px;
}

エントリ下部のフッター部分1です。ちょっとごみごみしていてわかりにくいかと思いますが、変数(＜%で囲んである部分＞)部分以外なら簡単に変更できますので、表記を変えるのは問題ありません。ここで指定しているのはカテゴリと固定リンク(記事のURLとしている)部分です。
色を変えているHTML部分が表示する文字です。好きな文字に変更してみてください。
CSS部分も変更できますが、文字を大きくすると改行が入って綺麗ではなくなる可能性があるので、このままの方がいいかと思います。もちろん大きくしても大丈夫です。

5.コメント・トラックバックフッター部分

<!-- 下部コメント -->
<!--allow_comment-->
| <a href="<%topentry_link>#comment-top" title="<%topentry_title>へのコメント">コメント</a> (<%topentry_comment_num>)
<!--/allow_comment-->
<!--deny_comment--><!--/deny_comment-->

<!-- 下部トラックバック -->
<!--allow_tb-->
| <a href="<%topentry_link>#trackback-top" title="<%topentry_title>へのトラックバック">トラックバック</a> (<%topentry_tb_num>)
<!--/allow_tb-->
<!--deny_tb--><!--/deny_tb-->
</div><!-- mainfooter -->

CSSのコメント・トラック部分はフッター部分のCSSではありませんのでご注意下さい。ここは単なるエントリ本文のフッター部分内です。
こんなに長くなっているのは、コメントを許可している時としていない場合を表記しているためです。
カスタマイズとしては、「コメント」「トラックバック」の文字と、それぞれの数をカウントしている部分の「(0)」カッコ部分が可能です。好きな文字、好きな括弧を使用してください。

以上でエントリ本文のカスタマイズ解説は終了です。文字の種類や色、場所などは簡単にカスタマイズできますので、好みのカスタマイズを楽しんで下さい。