WordPress: 最初の文字を大きく表示する(ドロップキャップ機能)

2

幼い頃、各団員の最初の文字を際立たせるスタイルで大きく表示された本を見て不思議に思った記憶があります。

WordPress: 最初の文字を大きく表示する - ドロップキャップ

このように最初の文字を大きく表示することをドロップキャップ（頭文字）機能といいます。 WordPressでは、各段落（段落）の最初の文字を大きな文字で表示するドロップキャップオプションを提供します。 ドロップキャップで最初の文字を強調表示することで、古い古典の本や雑誌などの素晴らしい編集効果を生み出すことができます。

ドロップキャップは段落の最初の文字を大きく強調し、視覚的な注目度を高め、読者の視線を自然に段落の先頭に引き込んで本文の読み込みを誘導し、テキストレイアウトにリズムと変化を与えて退屈を減らすとともに、セクションや文の始点を明確に表示してコンテンツ構造を一目で把握しやすく書体・色を活用すれば専門性と美的完成度を共に強化できるという利点があります。

[この記事は、2025年12月20日に最後に更新されました。 ]

WordPress：最初の文字を大きく表示する方法 - ドロップキャップ機能を使用する

WordPress 基本エディタであるブロックエディタ（Gutenberg)を使用する場合 段落 ブロック内の最初の文字を大きく表示するドロップキャップ（頭文字）機能を適用できます。

WordPress 本文で段落の最初の文字を大きく表示する

段落の最初の文字を大きな文字として表示するには、段落ブロック設定のフォントオプションの横にあるXNUMX点のアイコンをクリックします。 下図のようにドロップダウンメニューが表示された場合 ドロップキャップをクリックします。

WordPress ドロップキャップ機能の有効化

これにより、ドロップキャップを有効にするオプションが表示されます。 ドロップキャップ 左側のボタンをクリックしてヘッダー機能を有効にします。

ドロップキャップスタイルの変更

ブロックエディタの段落ブロックでドロップキャップを制御するCSSスタイルは次のとおりです。

.has-drop-cap:not(:focus):first-letter {
    float: left;
    font-size: 8.4em;
    line-height: .68;
    font-weight: 100;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: normal;
}

デフォルトのドロップキャップスタイルが気に入らない場合 カスタムCSSコードを追加で調整できます。

たとえば、私は次のCSSコードでドロップキャップの文字サイズを変更して使用しています。

/* WordPress 드롭 캡 스타일 변경하기 */
/* Change Drop cap style in WrodPress */

.has-drop-cap:not(:focus):first-letter {
    font-size: 5.2em;
    font-weight: 500;
    margin: .15em .1em 0 0;
}

デフォルトのドロップキャップスタイルが気に入らない場合は、CSSコードを使用して適切に変更してください。

2025年12月更新

上記のCSSコードは、この記事を初めて書いたときにうまく機能しましたが、現在は機能しません。代わりに、次のように!importantを追加して優先的に適用する必要があります。

.has-drop-cap:not(:focus):first-letter {
    font-size: 5.2em !important;
    font-weight: 500 !important;
    margin: .15em .1em 0 0 !important;
    float: left;
    line-height: 0.8 !important;
}

このブログでは、コードを使用してSNS共有ボタンを表示しています。ドロップキャップスタイルにfloat：left;が見つからないため、共有ボタンのfloat：left;と競合する現象が発生しました。だから上記のように float: left; を追加しました。そして、共有ボタンCSSスタイルにはclear：both;を追加しました。

/* SNS 공유 */
.sns-go {
    clear: both;
}

プラグインを使用せずにソーシャル共有ボタンを表示したい場合は、次の記事を参照してください。

最後に、

以上で WordPressで段落の最初の文字を大きく表示するドロップキャップ機能を適用する方法を見てみました。

この機能はブロックエディタでのみ提供されており、古典エディタ（クラシックエディタ）を使用している場合は、段落の最初の文字をヘッダーに置き換えるCSSコード（本文を参照）を追加してテストできます。

しかし、 WordPress 5.0以降では、ブロックエディタ（Gutenberg）が基本エディタとして搭載されており、クラシックエディタプラグインは正式には2022年末までのみ維持され、その後は引き続き維持管理されるかどうかが不透明ですので、なるべくブロックエディタを使用してください。

参照

2のコメント

コメントを残す

  1. 本当に幼い頃の記憶が新緑に浮かび上がりますね！おかげでドロップキャップ機能の魅力がよりよく感じられるようです。

    返信