エントリ本文のカスタマイズ方法その１

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

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;に変更しましょう。

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