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日 ホームページ作成

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

この記事の方法を用いると、この文章のように先頭の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;
  }
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

これだけですべての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;
}

【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

そして、ドロップキャップ表示したいところで

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

【スポンサーリンク】