こういう感じの、先頭の文字を大文字にするデザインを Drop Capsっていうらしい。 よく、雑誌なんかで見かけるデザイン。 サイト上でもCSSで実現できるんだけど、 各段落の最初の文字毎とか記事全体の最初の文字だけとかを 大きくするわけだから、普通は ＜P＞と組み合わせて使う。 素直にCSSに入れてみた。 :first-letter っていう疑似クラスを使う。
p:first-letter { この部分は下のと同じ・・・
が、しかし いつも通り、IEだと動作がおかしいらしい。
Chrome派なので、慌ててIEで確認した。
おかしかった orz
ってことで、 span id=”cap”ってspan使って囲んでみた。
font-size: 260%; font-weight: bold; line-height: 100%; float: left;
あとは、マージンとか適当に入れる。（入れたければ）
ちなみに、全自動で実現してくれるプラグインがたくさんある。wordpressの管理画面で、drop capsとかで検索すればいっぱい出る。
これらのプラグインは ＜ｐ＞で囲まれた部分の最初の文字を全自動で装飾する仕組みっぽいから ＜ｐ＞使って自動で整形してくれるっていうwordpressの仕様と相性が悪い。
改行して空間作る度に大文字になるって事だから・・・。
３行上の「ちなみに」 以下の部分で言うと
ち、こ、改 全部大文字になる。
PS Disable Auto Formattingとかいうプラグインを入れると、 ＜P＞＜ｂｒ＞の自動挿入を防いでくれるらしいが、 そうすると、今度は手動で＜P＞を入れることになる。 手動でP か 手動でSPAN か・・・。 手動でSPANだと 大きくしたい場所だけ大きくできるので 手動でSPANにしてみました。
あとは参考サイトとして、海外のサイトだけども Drop Caps: Historical Use And Current Best Practices With CSS っていう記事を発見した。 文字の後ろに絵を入れて、中世の本みたいにしちゃる！ とかしたい場合は参考に。 結構な長文だけど、まあ、ハッキリ言って、 読まなくてもパクって導入する分には簡単かと。
