先頭の1文字だけ大きくする「ドロップキャップ(Dropcaps)」をCSSで設定する方法

海外のニュースサイトなどでよく見る

先頭の1文字だけを大きい文字で表示するように設定する方法をCSSで設定したときの表示サンプル。こんな風に表示できます

のように先頭の1文字分だけを大きく表示する方法。これを「ドロップキャップ(Dropcaps)」というらしいです。実はWordpressのプラグインをいろいろと探している間に見つけた表示効果で、一目見て「かっこいい!!」と思ったのでどうやって使うのかを調べてみました。

CSSで簡単に設定できるようなので実装する方法を2つ紹介します。

スポンサーリンク



ページ内のすべてのpタグをドロップキャップ表示にする

CSSコード

テーマ内や子テーマのCSSへ以下のコードを追加します

/******* ドロップキャップ(先頭1文字だけ大きくする)外枠をつける******/
p:first-letter {
 font-size : 300%;
 font-weight : bold;
 float : left;
 width : 1em;
 color : #c00;
  }

これだけですべてのpタグを使って書かれた文章がドロップキャップ表示になります。ちなみにWordpressの場合、テキストエディタで文章を書くとpタグなんかつけなくても段落ができますね。これは2重に改行すると段落を分けなさいよ!!という自動整形機能が働いているだけできちんと適用されます。

とっても簡単!!

しかーーーーし!!この方法だとすべての段落の最初の一文字が大きく表示されてしまって体裁が悪いですね。

そこで指定したpタグのみに適用する方法を次に紹介します

特定のpタグのみにドロップキャップ表示をする方法

CSSコード

テーマ内や子テーマのCSSへ以下のコードを追加します

/********** ドロップキャップ(先頭1文字だけ大きくする)外枠をつける********/
p.introduction:first-letter {
 font-size : 300%;
 font-weight : bold;
 float : left;
 width : 1em;
 color : #c00;
  }

そして、ドロップキャップ表示したいところで
<p class=”introduction”>この間に書いた文章がドロップキャップ表示になる</p>
という風に書くと・・・

先頭の1文字だけを大きい文字で表示するように設定する方法をCSSで設定したときの表示サンプル。こんな風に表示できます

という風にここ!!というときだけ使えるようになります

文字の大きさや装飾については自身のサイトに合わせて調整してくださいね。

ブラウザによっては表示されない場合もありますが、そのときには無視されて通常の文字表示になるだけですから心配いりません。

おまけ

ちなみに上の表示はドロップキャップ表示した文章全体を白バックにして金色の枠をつけてます。
<p class=”introduction”>この間に書いた文章がドロップキャップ表示になる</p>というドロップキャップ表示の文字の周りにdivタグを追加してCSSでデザイン要素を与えているだけです

白バックに金の囲み線のCSSコードは

/***************** div要素で白背景に金色の枠 *******************/
.whiteback-goldborder {
    padding: 5px;
    margin: 0px;
    border: 3px solid #CC9900;
    border-radius: 5px;
    background-color: #ffffff;
}

これを
<p class=”introduction”>この間に書いた文章がドロップキャップ表示になる</p>
の周りを囲むようにdivタグを追加して
<div class=”whiteback-goldborder”><p class=”introduction”>この間に書いた文章がドロップキャップ表示になる</p></div>
とすればこのような表示になります。

うーんCSSって面白い。

トップへ戻る