「使えて+いじれる」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;を追加して、文字を大きくすることもできます。

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