http://10plate.blog44.fc2.com///blog-entry-223.html

記事タイトルの最初の一文字を大きくする

キイタ？オクサンアラヤダワァを運営するちゃんさんが、記事タイトルの最初の一文字を大きくする方法（ドロップキャップ）を教えてくれたので紹介します。

HTMLを編集します。
記事タイトル部分を<p class="dropcap">～</p>で囲んでください。
当サイトのテンプレートの場合は以下の箇所になります。

【standardシリーズの場合】

<h3><p class="dropcap"><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title> </a></p>
</h3>

【lightframeシリーズの場合】

～
<h2 class="ently_title">
<p class="dropcap">
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title> </a></p>
</h2>

そしていずれのシリーズの場合もスタイルシートの一番下に以下を加えてください。

p.dropcap:first-letter{
font-weight: bold;
font-size: 200%;
}

これで記事タイトルの最初の一文字を大きくすることができます。

ただし、記事タイトル前後に管理者用記事編集やNEWマークを付けている場合は改行されてしまいます。
これらのカスタマイズと重複させると表示が崩れてしまうことをご了承ください。

関連記事

[ 2009/06/12 21:24 ] カスタマイズ共通カスタマイズ | TB(0) | CM(2)