FC2ブログのテンプレート工房

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


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

【standardシリーズの場合】

<!--▼ エントリー（記事）▼-->
<!--topentry-->
<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/22)
• 記事文末に広告等を表示（続きを読む＆個別記事） (2009/06/15)
• 新着記事にサムネイル画像表示 (2009/06/15)
• 記事タイトルの最初の一文字を大きくする (2009/06/12)
• アイコン付きサイトマップ（親子カテゴリ対応） (2009/06/09)
• アイコン付きサイトマップ（親子カテゴリ非対応） (2009/06/09)
• 親子カテゴリの折りたたみ (2009/06/02)