記事先頭段落のみのドロップキャップ

公開日2007.01.25 20:44. 更新日2008.03.01 14:47. Tags: WordPress CSS・HTML

1つの記事があり、記事の中に幾つかの段落があるとします。
その最初の段落の先頭の文字だけを大きく表示したい場合にどうすればいいのか?
所謂ドロップキャップという奴です。全ての段落がこんな処理だとちょっと厳しいので、最初だけにしたいという寸法。
…CSSでは、「最初の段落」又は「最初の文字」(OR条件)を自動的に判別する事が可能なのですが、「最初の段落」且つ「最初の文字」(AND条件)を指定する事が出来ません。少なくともCSS2では無理。
よって、先頭の段落だけにクラスを指定し、最初の文字を大きくしてやるしか方法はなさそうです。
意外と簡単な方法で可能でした。

そのクラスを指定するタイミングは?
記事をmoreで切る部分かな、と。記述の度に手でpにclassを書くのは正直面倒臭くて適わないですし。テンプレートで何とかなるでしょうか。
この方法の場合、more以前に使用できる段落は基本的に1つだけだという事になります(複数でもいいけれど、範囲内全ての段落の先頭文字がドロップキャップする)。
ま~ライティングの基本として、最初に概要を書けというのがありますから、リスト段階で見せるのは概要段落だけなんだというルールでゆけばいいだけですかね。
過去の記事もちょっと見直す必要があるかもな(汗)。

テンプレートの中で、ドロップキャップを適用したいpが、何かクラスの付いたタグの直後になる様にレイアウトを変更し、その(クラスの付いた)タグの弟要素の先頭文字を指定…とやれば済む話でした。
複雑に考えてはいけませんね。

p.meta+p:first-letter{
font-size:300%;
font-weight:bold;
color:#666666;
float:left;
}

コメントの投稿

  • コメントおよび認証コードは、必須項目です。
  • コメントは、即時公開されます。投稿したコメントの編集は、登録ユーザのみ行えます。

送信内容

画像認証 必須
  • vericode

Login

  • ログイン

ページの先頭へ