WordPressの投稿にドロップキャップのような要素を加えることで、読みやすさが向上し、コンテンツがプロフェッショナルで洗練された外観になります。
ドロップキャップとは、段落の冒頭で使用される大きくて装飾的な大文字のことです。読者の注意を引き、文章にエレガントさを加えます。
長年にわたり、私たちは個人ブログでドロップキャップを使って美的タッチを加えてきました。多くの読者がこの機能を気に入っており、サイトのデザインに視覚的な魅力をもたらしていることを評価してくれています。
この投稿では、WordPressの投稿にドロップキャップを簡単に追加する方法を順を追って紹介する。
ドロップキャップとは？
ドロップキャップは、長い文章を扱う書籍や雑誌でよく使われるスタイリング手法である。各章の開始段落の最初の文字は大きなフォントサイズを使用する。
通常、大きな大文字は下に伸びて最初の数行より下にドロップするため、”ドロップキャップ “と呼ばれる。
ドロップキャップを追加することで、コンテンツが際立ち、訪問者の注意を引くことができます。サイトのデザインに、よりフォーマルで伝統的なタッチを加えます。
WordPressのウェブサイトにドロップキャップを追加するには、いくつかの方法があります。WordPressブロックエディタのビルトインオプションを使用するか、プラグインを使用することができます。
とはいえ、WordPressの投稿にドロップキャップを追加するには、さまざまな方法があります。
以下のリンクをクリックして、お好みの方法に進んでください：
方法1：WordPressブロックエディターを使ってドロップキャップを追加する
WordPressの初期設定ブロックエディターを使ってドロップキャップを追加したい場合は、この方法が適している。この方法は機能しますが、投稿ごとに手動でドロップキャップを追加する必要があることを覚えておいてください。
自動的な方法をお探しなら、2の方法まで飛ばしてください。
まず、WordPressの管理ダッシュボードから投稿 ” 新規追加ページに移動します。画面左上の「ブロックを追加」（＋）ボタンをクリックします。
その後、段落ブロックを見つけてクリックし、投稿に追加します。
次に、右カラムのブロック設定パネルを開く必要があります。
そうしたら、「タイポグラフィ」セクションまでスクロールダウンし、その横にある3つの点のアイコンをクリックする。オプションのリストが開きますので、その中から「ドロップキャップ」を選択してブロックパネルに追加してください。
ドロップキャップ機能を追加したら、「ドロップキャップ」オプションの横にあるスイッチを切り替えるだけで、段落の最初に大きな頭文字が表示されます。
変更を保存するには、上部にある「下書きを保存」または「公開」ボタンをクリックすることをお忘れなく。
これで投稿にドロップキャップが追加されました。
デモサイトではこのように表示されました。
ブロックエディターにビルトインされたドロップキャップオプションは、最初の文字の色、フォント、サイズにWordPressテーマのスタイルを使用することに注意してください。
WordPressのブロックエディターでドロップキャップのスタイルを変更したい場合は、カスタムCSSコードを使用してドロップキャップのスタイルを設定する必要があります。
方法2：CSSコードを使ってドロップキャップを追加する
この方法では、カスタムCSSコードを使用して、各投稿の最初の段落にドロップキャップを自動的に追加します。テーマのスタイルシートにCSSコードを追加するか、コードスニペットプラグインを使用します。
WPCodeは、世界中の2,000,000以上のサイトで使用されているNo.1コードスニペットプラグインです。WPCodeを使えば、サイトにコードを追加するのがとても簡単になります。
まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しい手順は、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。
注： WPCodeには、このチュートリアルで使用できる無料プランもあります。しかし、有料版にアップグレードすることで、コードスニペットのクラウドライブラリや条件ロジックなど、より多くの機能がアンロックされます。
有効化した後、WordPress管理サイドバーからCode Snippets ” +Add Snippetページにアクセスしてください。
ここから、「カスタムコードを追加（新規スニペット）」設定にマウスオーバーします。すると、’Use Snippet’ボタンが表示されますので、クリックしてください。
カスタム・スニペットの作成」ページに移動したら、まずコード・スニペットのタイトルを入力します。スニペットを識別するのに役立つものであれば何でもかまいません。
その後、右側のドロップダウンメニューから「コードタイプ」として「CSSスニペット」を選択します。
次に、以下のコードをコピー＆ペーストして「コード・プレビュー」ボックスに入れてください：
<style type="text/css">
.entry-content p:first-child:first-of-type:first-letter {
font-size: 85px;
line-height: 1;
padding-top: 0px;
padding-right: 10px;
padding-left: 4px;
color: #000080;
float: left;
font-family: 'Tangerine', serif;
text-shadow: 4px 4px 4px #aaa;
</style>
}
ここで、挿入セクションまでスクロールダウンし、サイト上ですべてコードを実行したい場合は、「自動挿入」メソッドを選択する必要があります。
特定の投稿にのみドロップキャップを追加したい場合は、「ショートコード」メソッドを使用できます。
スニペットを保存すると、ドロップキャップを追加したい投稿のブロックエディターに貼り付けられるショートコードが表示されます。
その後、ページのトップに戻り、スイッチを「有効化」に切り替える。
最後に「スニペットを保存」ボタンをクリックする。
あなたのCSSコードスニペットは、あなたのサイトに反映されます。
上のCSSスニペットを使ったデモサイトでは、ドロップキャップはこのように表示されました。
方法3：プラグインを使ってドロップキャップを追加する
カスタムCSSの追加に躊躇する場合は、Initial Letterプラグインを使用してドロップキャップを追加することもできます。
このプラグインでは、ドロップキャップのサイズ、色、フォントを変更することもできます。
注意：Initial LetterプラグインはWordPressの最新バージョンでテストされておらず、開発者によってメンテナンスされていないことに留意してください。
しかし、プラグインをテストしたところ、問題なく動作しました。それでも不安な場合は、古いプラグインの使用に関する投稿をご覧ください。
とはいえ、まずはInitial Letterプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。
有効化した後、管理サイドバーから設定 ” 初期レターページに移動します。ここからドロップキャップに関する設定を行うことができます。
まず、新しい投稿にドロップキャップを自動的に適用するかどうかを選択する必要があります。これを行うには、’Default for Posts’オプションの隣にあるドロップダウンメニューから’Yes’オプションを選択します。
次に、好みのフォント、色、サイズ、ドロップキャップ用のパディングを選択します。
注：これらのスタイリングオプションを調整するには、サイトをプレビューした後に設定に戻る必要がある場合があります。
その後、投稿の抜粋でドロップキャップを有効にしたい場合は、「抜粋で有効化」オプションの隣にあるボックスにチェックを入れます。
また、投稿の最初の段落にのみドロップキャップを追加したい場合は、「最初の段落のみ」オプションの横にあるボックスにチェックを入れることもできます。
最後に、「変更を保存」ボタンをクリックして設定を保存することをお忘れなく。
これで、あなたのサイトのどの投稿日: でも、投稿の最初の段落にドロップキャップが表示されます。
投稿のドロップキャップを削除したい場合は、投稿をブロックエディターで開いて削除することもできます。
そこで「頭文字」セクションまでスクロールダウンし、ドロップダウンメニューから「いいえ」オプションを選択します。これでその投稿のドロップキャップは無効化されます。
ボーナス：WordPressテーマのフォントを変更する
ドロップキャップ以外にも、WordPressサイトのフォントを変更することで、コンテンツをより読みやすく、美しくすることができます。
これを行うには、WordPressダッシュボードから外観 ” カスタマイズページにアクセスします。テーマのカスタマイザーが開きますので、「グローバル」タブを開いてください。
注：テーマカスタマイザーの設定は、使用しているテーマによって異なる場合があります。このチュートリアルでは、Astraを使用しています。
左カラムにタイポグラフィ、カラー、コンテナ、ボタンなどの新しいオプションが表示されます。ここで、「タイポグラフィ」タブを展開する必要があります。
テーマが提供する様々なプリセットのリストが開きますので、お好みのフォントを選択してください。設定が完了したら、上部にある「公開する」ボタンをクリックし、設定を保存することをお忘れなく。
ブロックテーマを使用している場合、テーマカスタマイザーは使用できず、サイトエディターを使ってフォントを変更する必要があります。
この詳細については、WordPressテーマでフォントを変更する方法についてのチュートリアルを参照してください。
WordPressの投稿にドロップキャップを追加する方法について、この記事がお役に立てば幸いです。また、WordPressテーマのフォントを変更する方法や、モバイルフレンドリーなWordPressサイトを作成する方法のリストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jonas
Hi, is there a way or a script to make it so that the class .has-drop-cap is automatically added only to the first paragraph when creating a new article? I think it would be best and much more natural to Wordpress.
WPBeginner Support
We do not have a method we would recommend for that at the moment, we would recommend using our CSS method for something close to that.
管理者
Anna
Hello, I’m having problems with getting the drop cap in my text. i’ve contacted the person who designed the theme and he says it should work fine. Please help me out, i’ve tried everything, even adding it manually.Cheers, Anna
anamika
i am using this plugin but on my blog page , it’s not working [all pages even single page working]
Mehmood Ul Hassan
Thanks a lot for helping me in this matter. Mostly famous sites use add drop caps in posts and I always wanted it in my own wordpress site too. I am so much happy with this plugin. My blog posts now look professional.
James Carter
A common typographic convention is to follow the dropped cap by setting the remaining letters of the first word in small capitals. This looks better, helps the eye make the transition from the large dropped cap into the body of the text.