WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
How to implement a sentence "Dropcaps" that is enlarged by one letter at the beginning of the sentence with only simple CSS

文章の先頭の1文字だけ大きくした文章「ドロップキャップ(Dropcaps)」を簡単なCSSだけで実装する方法

公開日:2017年3月18日 ホームページ作成

WordPressバージョン5.0以降で採用されたブロックエディタ(Gugenberg)では、段落ブロックを使うことで、簡単にドロップキャップを作ることができますので、バージョン5.0以降を使用している方はそちらを使ってみてください。

文章の先頭文字だけが大きく表示される表現方法。↓のようなものを海外のニュースサイトなどでよく見ますよね?

この記事の方法を用いると、この文章のように先頭の1文字だけを簡単に大きい文字にすることができます。この文章のように先頭の1文字だけを簡単に大きい文字にすることができます。この文章のように先頭の1文字だけを簡単に大きい文字にすることができます。


これを「ドロップキャップ(Dropcaps)」というらしいです。

多分大丈夫だと思いますが、このサイトのテーマを編集したりして、ひょっとすると↑のサンプル表示がされないかもしれませんので画像でも貼っておきます

実はWordPressのプラグインをいろいろと探している間に見つけた表示効果で、一目見て「かっこいい!!」と思ったのでどうやって使うのかを調べてみたところ、実に簡単な方法で作ることができますので、備忘録を兼ね紹介しておきます。

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

CSSコード

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

/******* ドロップキャップ(先頭1文字だけ大きくする)外枠をつける******/
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タグなんかつけなくても段落ができますね。これは2重に改行すると段落を分けなさいよ!!という自動整形機能が働いているだけできちんと適用されます。

とっても簡単!!

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

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

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

CSSコード

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

/********** ドロップキャップ(先頭1文字だけ大きくする)外枠をつける********/
/************************ ドロップキャップ *********************/
.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>

という風に書くと、冒頭で紹介したように

この記事の方法を用いると、この文章のように先頭の1文字だけを簡単に大きい文字にすることができます。この文章のように先頭の1文字だけを簡単に大きい文字にすることができます。この文章のように先頭の1文字だけを簡単に大きい文字にすることができます。

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

例ではpタグにd-capというclass名を付けていますが、spanタグやdivタグなどにも使えます。

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

CSSの簡単な説明

こんなに簡単にできるの?という位簡単なコードでできるドロップキャップ。先ほど紹介したコードについてちょこっと解説しておきます。CSSの知識が多少あれば文字を囲んだり、文字の色を変えたり・・などいろいろカスタマイズするベースになると思います。

まずコードがこれ

/********** ドロップキャップ(先頭1文字だけ大きくする)外枠をつける********/
/************************ ドロップキャップ *********************/
.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;
}

1行目で「d-cap」というclass名が付いているものの「;first-letter」(先頭文字)はこうしなさいとしています。

2行目以降は
font-size: 2em;・・・通常の文字の2倍で表示(つまり2行分程度の文字の大きさにする)
line-height: 1;・・・行間は1文字にする(いろいろな環境に対応できるように一応しておく程度の記述)
float: left;・・・ここから後の文字はこの文字の右へ回り込み表示しなさい
margin: 0 .2em 0 0;・・・この文字の周りに入れる隙間
padding: .1em 0;・・・この文字が入る部分から文字までの距離
border-right: 3px solid #f6ec05;・・・文字の右に黄色で3pxの実線を入れる
border-bottom: 5px solid #f6ec05;・・・文字の下に黄色で3pxの実線を入れる
という風に、最初の1文字に対してどう表示するのかが書かれているだけです。

とっても簡単にできますので、ぜひやってみてください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】