WordPressバージョン5.0以降で採用されたブロックエディタ（Gugenberg）では、段落ブロックを使うことで、簡単にドロップキャップを作ることができますので、バージョン5.0以降を使用している方はそちらを使ってみてください。
文章の先頭文字だけが大きく表示される表現方法。↓のようなものを海外のニュースサイトなどでよく見ますよね？
この記事の方法を用いると、この文章のように先頭の１文字だけを簡単に大きい文字にすることができます。この文章のように先頭の１文字だけを簡単に大きい文字にすることができます。この文章のように先頭の１文字だけを簡単に大きい文字にすることができます。
これを「ドロップキャップ（Dropcaps）」というらしいです。
多分大丈夫だと思いますが、このサイトのテーマを編集したりして、ひょっとすると↑のサンプル表示がされないかもしれませんので画像でも貼っておきます
実はWordPressのプラグインをいろいろと探している間に見つけた表示効果で、一目見て「かっこいい！！」と思ったのでどうやって使うのかを調べてみたところ、実に簡単な方法で作ることができますので、備忘録を兼ね紹介しておきます。
ページ内のすべてのpタグをドロップキャップ表示にする
CSSコード
テーマ内や子テーマのCSSへ以下のコードを追加します
/******* ドロップキャップ（先頭１文字だけ大きくする）外枠をつける******/
p:first-letter {
font-size: 2em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
border-right: 3px solid #f6ec05;
border-bottom: 5px solid #f6ec05;
}これだけですべてのpタグを使って書かれた文章がドロップキャップ表示になります。ちなみにWordPressの場合、テキストエディタで文章を書くとpタグなんかつけなくても段落ができますね。これは２重に改行すると段落を分けなさいよ！！という自動整形機能が働いているだけできちんと適用されます。
とっても簡単！！
しかーーーーし！！この方法だとすべての段落の最初の一文字が大きく表示されてしまって体裁が悪いですね。
そこで指定したpタグのみに適用する方法を次に紹介します
特定のpタグのみにドロップキャップ表示をする方法
CSSコード
テーマ内や子テーマのCSSへ以下のコードを追加します
/********** ドロップキャップ（先頭１文字だけ大きくする）外枠をつける********/
/************************ ドロップキャップ *********************/
.d-cap:first-letter {
font-size: 2em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
border-right: 3px solid #f6ec05;
border-bottom: 5px solid #f6ec05;
}
そして、ドロップキャップ表示したいところで
<p class="d-cap">ここの部分にドロップキャップ表示したい文章を書く</p>という風に書くと、冒頭で紹介したように
この記事の方法を用いると、この文章のように先頭の１文字だけを簡単に大きい文字にすることができます。この文章のように先頭の１文字だけを簡単に大きい文字にすることができます。この文章のように先頭の１文字だけを簡単に大きい文字にすることができます。
という風にここ！！というときだけ使えるようになります
例ではpタグにd-capというclass名を付けていますが、spanタグやdivタグなどにも使えます。
ブラウザによっては表示されない場合もありますが、そのときには無視されて通常の文字表示になるだけですから心配いりません。
CSSの簡単な説明
こんなに簡単にできるの？という位簡単なコードでできるドロップキャップ。先ほど紹介したコードについてちょこっと解説しておきます。CSSの知識が多少あれば文字を囲んだり、文字の色を変えたり・・などいろいろカスタマイズするベースになると思います。
まずコードがこれ
/********** ドロップキャップ（先頭１文字だけ大きくする）外枠をつける********/
/************************ ドロップキャップ *********************/
.d-cap:first-letter {
font-size: 2em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
border-right: 3px solid #f6ec05;
border-bottom: 5px solid #f6ec05;
}１行目で「d-cap」というclass名が付いているものの「;first-letter」（先頭文字）はこうしなさいとしています。
２行目以降は
font-size: 2em;・・・通常の文字の２倍で表示（つまり２行分程度の文字の大きさにする）
line-height: 1;・・・行間は１文字にする（いろいろな環境に対応できるように一応しておく程度の記述）
float: left;・・・ここから後の文字はこの文字の右へ回り込み表示しなさい
margin: 0 .2em 0 0;・・・この文字の周りに入れる隙間
padding: .1em 0;・・・この文字が入る部分から文字までの距離
border-right: 3px solid #f6ec05;・・・文字の右に黄色で3pxの実線を入れる
border-bottom: 5px solid #f6ec05;・・・文字の下に黄色で3pxの実線を入れる
という風に、最初の１文字に対してどう表示するのかが書かれているだけです。
とっても簡単にできますので、ぜひやってみてください。
