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

今回はカスタマイズの方法や解説ではなくて、カスタマイズの実例をご紹介します。あまり興味がない方でも、そのまま貼り付ければ変更できますので、是非使ってみてください。

ここでは、以下のカスタマイズを行います。

• エントリ上部の日付の場所と記事タイトルを入れ替える
• 記事タイトルに固定リンクを設定し、文字を太字にする
• エントリフッター部分の固定リンクを、通常リンクと新規ウインドウを開くリンク(target使用)、二つ用意する

(このテンプレートだと、本当はtargetを使用しないのが望ましいのですが、厳密に考えなければ問題ありませんのでここでは使用しています)

1.HTML部分のカスタマイズ

通常テンプレートに、変更する部分をそのまま貼り付けてください。貼り付ける部分を間違えないように気をつけてください。

通常テンプレート

<!-- エントリ開始 -->
<!-- エントリ部分の最大サイズは500pxですが、★480px程度に収めて下さい★ -->
<!--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>

カスタマイズしたHTML

<!-- エントリ開始 -->
<!-- エントリ部分の最大サイズは500pxですが、★480px程度に収めて下さい★ -->
<!--topentry-->
<div class="section" id="a<%topentry_no>">
<div class="mainbox">
<div class="maindate"><!-- 投稿日と時間 -->

<h2 class="maindate2">
<a href="<%topentry_link>" title="<%topentry_title>のページ"><%topentry_title></a>
</h2>
</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->

<h3 class="maintitle">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</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>  (<a href="<%topentry_link>" title="<%topentry_category>のページを新窓で開く" target="_blank">↑</a>)

変更した箇所は色を変えてあります。この変更したHTMLを通常テンプレートのHTMLに貼り付けて下さい。

2.CSS部分のカスタマイズ

追加するスタイルシートは、できればこの例の箇所(.maindateの下)に貼り付けてください。

通常テンプレート

.maindate{
padding: 3px;
text-align: left;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.maindate2{
font-size: 12px;
font-weight: bold;
color: #000;
}

カスタマイズしたスタイルシート

.maindate{
padding: 3px;
text-align: left;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.maindate a,
.maindate a:link,
.maindate a:visited{
color: #1785e5;
text-decoration: none;
font-weight: bold;
}

.maindate a:hover{
color: #1785e5;
text-decoration: underline;
font-weight: bold;
}

.maindate a:active{
}

.maindate2{
font-size: 12px;
font-weight: bold;
color: #000;
}

.maindate内のリンクを設定しています。これならリンクの色も変更できます。

3.カスタマイズしたエントリ部分

エントリ上部のカスタマイズを適用した画面

上にエントリタイトルが来て、かつ固定リンクが設定され、太字になっています。その下に投稿日が続きます。

エントリ下部のカスタマイズを適用した画面

一見すると変化が無いように見えますが、記事のURLの隣に(↑)が増えてます。これが固定リンクを新規ウインドウで開くリンクです。邪魔にならないようにシンプルに表記しましたが、お好きな文字(新規など)に変更しても大丈夫です。

4.カスタマイズを更にカスタマイズしてみる

スタイルシートを変更して、もう少し変化させてみます。それ程難しくありませんので、これを参考にカスタマイズしてみてください。

タイトル部分のリンクの色を変更する

個人的には黒の方が落ち着くと思いますので、タイトルに付けたリンクの色を変更してみましょう。

.maindate a,
.maindate a:link,
.maindate a:visited{
color: #000;
text-decoration: none;
font-weight: bold;
}

.maindate a:hover{
color: #000;
text-decoration: underline;
font-weight: bold;
}

先ほど追加したリンク部分の文字色を変更しただけです。ですので、他の色にしたり、更にfont-size: 14px;を追加して、文字を大きくすることもできます。

以上がカスタマイズの実例でした。変更箇所を少しカスタマイズするだけなら簡単ですので、お好きなカスタマイズを楽しんで下さい。

今回はエントリ部分のカスタマイズについて説明します。どこが何の部分を設定しているかがわかれば、あとは入れ替えれば大丈夫です。好みの並びにカスタマイズしてみてください。

1.エントリ部分の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>

2.エントリ上部のカスタマイズ

以降の説明ではかっこ＜＞(半角)部分を削除して表記しています。実際には半角のかっこが必要です。

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="mainbox"

ここでエントリ部分のボックスを指定しています。ボックスのボーダーサイズや色はカスタマイズ可能です。

.mainbox{
width: 100%;
margin: 0 auto 10px;
border: solid 1px #000;(エントリ全体を囲むボーダー)
}

この色部分を変更すればボーダーをカスタマイズできます。

div class="maindate"

ここが最上部、エントリの日付が表示される部分のボックスです。背景色やテキストの位置、ボーダーは変更できます。

.maindate{
padding: 3px;
text-align: left;(テキスト位置)
background: #ebebeb;(背景色)
border-bottom: solid 1px #000;(下部のボーダー)
}

説明を付加した項目を変更してみてください。日付をセンタリングしたり、背景色を変更するとイメージが変わります。

h2 class="maindate2"〜/h2

ここが日付と投稿時間を表示しているHTML部分です。この中にエントリのタイトルを入れれば、エントリのタイトルを最上部に表示することができます。(後述)
また、投稿時間の削除もできます。必要ない方は「ここから〜」の部分を削除してください。

.maindate2{
font-size: 12px;
font-weight: bold;(太字に)
color: #000;(文字色)
}

ここでは文字を太く、色を黒にしています。ここも変更可能です。

.maintime{
font-size: 10px;(文字の大きさ)
font-weight: normal;(文字の太さを標準に)
color: #000;(文字色)
}

投稿時間表記は文字を小さく(10px)して太さも通常です。ここも変更可能です。

3.エントリ上部と本文

HTML部分
<div class="mainentry"><!-- エントリ全体のボックス -->

<!-- エントリタイトル -->
<h3 id="a<%topentry_no>" class="maintitle"><%topentry_title></h3>

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

div class="mainentry"

エントリ部分のボックスです。上部のマージン部分は変更可能です。

.mainentry{
font-size: 12px;
margin-top: 6px;(日付部分とのマージン)
padding: 3px;
text-align: left;
}

日付部分のマージンを増減しても雰囲気が変わります。適度に離して下さい。

h3 id="a＜%topentry_no＞" class="maintitle"〜/h3

メイン部分(中央部)全体のh3に対して指定しているため、CSSは上の方に表記してあります。

#box-main h3{
font-size: 12px;
color: #000;(文字色)
font-weight: bold;(太字に)
margin-top: 5px;
}

ここがh3のCSS部分です。ここも変更は可能です。色を変更してもいいかもしれません。

＜%topentry_title＞

h3に挟まれているこの部分がタイトルを表示させる変数です。例えばタイトル部分に記事の固定リンクを設定する場合には以下のようになります。

<h3 id="a<%topentry_no>" class="maintitle">
<a href="<%topentry_link>" title="<%topentry_title>のページ"><%topentry_title></a>
</h3>

このように変更すれば、タイトルにリンクが設定されます。ただし文字色もリンクの色に変更されます。

投稿日とエントリタイトルの入れ替え

投稿日はh2で挟まれた部分、エントリタイトルはh3で挟まれた部分なので、そのままそっくり入れ替えれば実現できます。実例はこちら。(無駄なタグが見つかりましたので削除しました。あっても問題はないとおもいます)

<div class="maindate"><!-- 投稿日と時間 -->

<h2 class="maindate2">
<%topentry_title>
</h2>

</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->
<h3 class="maintitle">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</h3>

色分けしてあるのでわかりやすいかと思います。これをそのまま使用しても大丈夫です。この場合、時間を右揃えにしたほうがいいかもしれません。text-align: right;に変更しましょう。

長くなるのでここまで。続きは次回にエントリします。

今回はリンクの色を変更します。リンク部分以外には色がついていないため、リンクの色を変更するだけでもかなり雰囲気が変わります。そして難しいカスタマイズではありませんから、気軽に変更してみて下さい。

タグの細かい解説はおこないませんので、興味が出たらタグの解説をされているサイトなどで勉強してみて下さい。
標準のリンクの色はサイト全体で統一です。設定を行っているのはこの部分です。

a,

a:link,

a:visited{

color: #1785e5;

text-decoration: none;

}

a:hover{

color: #1785e5;

text-decoration: underline;

}

a:active {}

1.リンクの色を変更する

color: #xxxxxx;の部分が色の設定です。#の後ろの6文字が色コードで、ここを変更するとリンクの色が変わります。変更してプレビューした時の画像をご覧下さい。

#e51717

#279bb3

ちなみに、
a:visited{
color: #1785e5;
の色コードを変更すると、リンクの色が変わり(正確に言うと違います)、
a:hover{
color: #1785e5;
の色コードを変更すると、リンクにカーソルを乗せた時のリンクの色が変わります。
プレビューで簡単に変更したときのイメージが表示できますので、色を変更したい場合はお試し下さい。

2.リンクに下線を設定する

text-decoration: underline;(下線あり)
text-decoration: none;(下線なし)
通常では、カーソルを乗せた時に下線を表示しています。いらない場合は変更して下さい。

3.左右カラムとメイン部分で違う設定

変更したい場合は次のようにして下さい。ただし、この場合フリーエリアは標準設定のリンク色のままです。また、リンクの色を変更する場合は一部だけでなく、全ての設定を貼り付けて下さい(例えばa:hoverだけ貼り付けたりしないように)

メイン部分のリンク色を変更

#box-main a,

#box-main a:link,

#box-main a:visited{

color: #ffb2d4;

text-decoration: none;

}

#box-main a:hover{

color: #ffb2d4;

text-decoration: underline;

}

#box-main a:active {}

左カラムのリンク色を変更

#box-sub a,

#box-sub a:link,

#box-sub a:visited{

color: #e51717;

text-decoration: none;

}

#box-sub a:hover{

color: #e51717;

text-decoration: underline;

}

#box-sub a:active {}

右カラムのリンク色を変更

#box-right a,

#box-right a:link,

#box-right a:visited{

color: #ffb2d4;

text-decoration: none;

}

#box-right a:hover{

color: #ffb2d4;

text-decoration: underline;

}

#box-right a:active {}

上記の変更を全て適用した画像

4.変更箇所について

カスタマイズに慣れていない方は、変更して追加する部分は全てスタイルシートの一番下にまとめた方が分かりやすいかもしれません。
本当は、/* 右カラム *//* メイン部分 *//* 左カラム */それぞれのエリアの中に置くのが適切です。この意味がわからない方は、もう少しスタイルシートについて勉強してみましょう。この各エリアは、このセレクタ部分のスタイルを指定しています。

変更を行う場合は、正常に動作しているスタイルシートを保存して、いつでも変更を元に戻せるようにしておきましょう。

前回のエントリはこちら。記事を投稿する時に使用するタグ

1.h3タグを使用する

<h3>0.見出しを設定する</h3>

0.見出しを設定する

こちらで説明しているような文章を投稿する場合は、見出しにh3タグをお使い下さい。通常で上に5pxのスペース、太字で表示されます。カスタマイズはこちら。

#box-main h3{

font-size: 12px;

color: #000;

font-weight: bold;

margin-top: 5px;

}

2.リストを表示する

<ul>

<li>リスト1</li>

<li>リスト2</li>

</ul>

• リスト1
• リスト2

リストの標準は黒丸です(左右カラムとメイン部分のリストは別設定)。画像を使う場合は多少カスタマイズが必要です。例として、7px x 7pxサイズのリスト画像を使用してみます。

• リスト

リストに画像を使用しました。今はclassで変更しましたが、標準の設定を変える場合は以下のようになります。

#box-main ul{

margin: 10px 0 10px 16px;

line-height: 175%;

}

まずは上の標準リスト設定を削除して下さい。それから下のコードを削除した場所に貼り付けて下さい。

#box-main ul{

}



#box-main li{

padding-left: 12px;

background: url(http://blog-imgs-11.fc2.com/t/e/m/templatetube/list.gif) no-repeat 0px 0.4em;

list-style-type: none;

}

もちろん画像のアドレスは変更してください。また、この画像でよければお使いいただいても構いません。ただし、必ずダウンロードして、お使いのブログ上でアップロードしてからお使い下さい。リンクはご遠慮下さい。
リスト画像のダウンロード

3.文字の色を変える

<span class="tubered">文字の色1</span>

<span class="tubeblue">文字の色2</span>

<span class="tubespan1">文字と背景の色</span>

文字の色1
文字の色2
文字と背景の色

文字の色を変える設定として、標準で上にようなものを用意しています。単純に色指定と背景指定をしているだけですので、お好きな色に変更してお使い下さい。

.tubered{

color: #e51717;

}



.tubeblue{

color: #1785e5;

}



.tubespan1{

color: #000;

background: #ffb2d4;

}

4.引用部分の設定

<blockquote>

ここに引用文を記述

</blockquote>

ここに引用文を記述

特に変更する必要はありませんが、タイトル部分の色を変更した場合に合わせてもいいかもしれません。

blockquote {

width: auto;

margin: 16px 10px;

padding: 10px;

font-size: 12px;

line-height: 150%;

background: #ebebeb;

border: solid 1px #000;

}

以上がエントリ部分のタグ解説です。インデントも用意してあります。また、これ以外のタグ(preなど)は指定していませんので、お使いの方はご自分で設定してください。

記事を投稿する場合、以下のような状況を想定してタグを設定してあります。ということは、それ以外のパターンで投稿をする方は、テンプレートを修正した方がいいかもしれません。
また、タグを使わずに記事を投稿すると、スペースが空きませんので、非常に読みづらい投稿になります。以下を参考にタグを使用してみて下さい。

1.Pタグを使用する

<p>記事の文章をここに入れる</p>

<p>Pタグを使って段落を表す</p>

記事の文章をここに入れる

Pタグを使って段落を表す

グレーの部分が投稿する場合に使用するタグで、下がその表示結果です。Pタグを使用することで、上に10px、下に16pxスペースが入ります。スペースを調整したい場合は以下のCSSを変更してください。

#box-main p{

margin-top: 10px;

margin-bottom: 16px;

}

2.画像を貼り付ける

<img src="http://blog-imgs-11.fc2.com/t/e/m/templatetube/001.gif" width="60" height="60" alt="画像" /><br />

画像の下、左にはスペースが入る

画像を貼り付けると、自動的に右に16px、下に16pxスペースが入ります。右にスペースが入るのは、画像の右に文章を回りこませる状況を想定しているからです。
多少空き過ぎかもしれませんので、調整される場合は以下のCSSを変更してください。

#box-main img{

margin-right: 16px;

margin-bottom: 16px;

}

3.画像の右に文章を回りこませる

<p>

<img src="http://blog-imgs-11.fc2.com/t/e/m/templatetube/001.gif" width="60" height="60" alt="画像" align="left" />

文章が右に回りこむ。

</p>

<div style="clear: left;"></div>

文章が右に回りこむ。

画像の右側にスペースがあるのは、この状況を想定しているためです。逆に言うと、画像が右で文章が左、画像を上下に重ねる、などの状況には対応できません。常にその投稿スタイルならばスペースの設定を変更、状況によって複数のパターンがある場合には、新規に追加して対応して下さい。
また、align属性を使用する方法は推奨要素ではありませんが、floatで指定できる方はそちらをお使い下さい。気にしない方はこの方法でも大丈夫です。回り込みの解除も他の方法がありますが、この方法でも解除できます。
つまり、img align="left"で文章を右に表示して、＜div style="clear: left;"＞＜/div＞(<と>は半角)で回り込みを解除しています。いずれの方法でも構いませんが、回り込みの解除を忘れないで下さい。

#box-main img{

margin-right: 16px;

margin-bottom: 16px;

}

今日はここまで。次回は続きです。