Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress投稿にドロップキャップを追加する方法

WordPressの投稿にドロップキャップを追加したいですか?

ドロップキャップは段落を始めるのに最適な方法です。最初の文字を大きくすることで、読者の注意を引き、コンテンツを読むことに興味を持ってもらうことができます。

この投稿では、WordPressの投稿にドロップキャップを簡単に追加する方法を順を追って紹介する。

How to add drop caps in WordPress posts

ドロップキャップとは?

ドロップキャップは、長い文章を扱う書籍や雑誌でよく使われるスタイリング手法である。各章の開始段落の最初の文字は大きなフォントサイズを使用する。

通常、大きな大文字は下に伸びて最初の数行より下にドロップするため、”ドロップキャップ “と呼ばれる。

Drop cap plugin preview

ドロップキャップを追加することで、コンテンツが際立ち、訪問者の注意を引くことができます。サイトのデザインに、よりフォーマルで伝統的なタッチを加えます。

WordPressサイトにドロップキャップを追加するには、いくつかの方法があります。WordPressブロックエディターのビルトインオプションを使用するか、プラグインを使用することができます。

とはいえ、WordPressの投稿にドロップキャップを追加するには、さまざまな方法があります。

以下のリンクをクリックして、お好みの方法に進んでください:

方法1:WordPressブロックエディターを使ってドロップキャップを追加する

WordPressの初期設定ブロックエディターを使ってドロップキャップを追加したい場合は、この方法が適している。この方法は機能しますが、投稿ごとに手動でドロップキャップを追加する必要があることを覚えておいてください。

自動的な方法をお探しなら、2の方法まで飛ばしてください。

まず、WordPressの管理ダッシュボードから投稿 ” 新規追加ページに移動します。画面左上の「ブロックを追加」(+)ボタンをクリックします。

その後、段落ブロックを見つけてクリックし、投稿に追加します。

add paragraph block to post

次に、右カラムのブロック設定パネルを開く必要があります。

そうしたら、「タイポグラフィ」セクションまでスクロールダウンし、その横にある3つの点のアイコンをクリックする。オプションのリストが開きますので、その中から「ドロップキャップ」を選択してブロックパネルに追加してください。

Enable drop cap under Typography

ドロップキャップ機能を追加したら、「ドロップキャップ」オプションの横にあるスイッチを切り替えるだけで、段落の最初に大きな頭文字が表示されます。

変更を保存するには、上部にある「下書きを保存」または「公開」ボタンをクリックすることをお忘れなく。

Toggle drop cap switch

これで投稿にドロップキャップが追加されました。

デモサイトではこのように表示されました。

Drop cap preview

ブロックエディターにビルトインされたドロップキャップオプションは、最初の文字の色、フォント、サイズにWordPressテーマのスタイルを使用することに注意してください。

WordPressのブロックエディターでドロップキャップのスタイルを変更したい場合は、カスタムCSSコードを使用してドロップキャップのスタイルを設定する必要があります。

方法2:CSSコードを使ってドロップキャップを追加する

この方法では、カスタムCSSコードを使用して、各投稿の最初の段落にドロップキャップを自動的に追加します。テーマのスタイルシートにCSSコードを追加するか、コードスニペットプラグインを使用します。

WPCodeは、世界中の2,000,000以上のサイトで使用されているNo.1コードスニペットプラグインです。WPCodeを使えば、サイトにコードを追加するのがとても簡単になります。

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しい手順は、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

注: WPCodeには、このチュートリアルで使用できる無料プランもあります。しかし、有料版にアップグレードすることで、コードスニペットのクラウドライブラリや条件ロジックなど、より多くの機能がアンロックされます。

有効化した後、WordPress管理サイドバーからCode Snippets ” +Add Snippetページにアクセスしてください。

ここから、「カスタムコードを追加(新規スニペット)」設定にマウスオーバーします。すると、’Use Snippet’ボタンが表示されますので、クリックしてください。

Add new snippet

カスタム・スニペットの作成」ページに移動したら、まずコード・スニペットのタイトルを入力します。スニペットを識別するのに役立つものであれば何でもかまいません。

その後、右側のドロップダウンメニューから「コードタイプ」として「CSSスニペット」を選択します。

Select CSS Snippet as code type

次に、以下のコードをコピー&ペーストして「コード・プレビュー」ボックスに入れてください:

<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>
}

ここで、挿入セクションまでスクロールダウンし、サイト上ですべてコードを実行したい場合は、「自動挿入」メソッドを選択する必要があります。

特定の投稿にのみドロップキャップを追加したい場合は、「ショートコード」メソッドを使用できます。

スニペットを保存すると、ドロップキャップを追加したい投稿のブロックエディターに貼り付けられるショートコードが表示されます。

Choose an insertion method

その後、ページのトップに戻り、スイッチを「有効化」に切り替える。

最後に「スニペットを保存」ボタンをクリックする。

Save Drop Caps snippet

あなたのCSSコードスニペットは、あなたのサイトに反映されます。

上のCSSスニペットを使ったデモサイトでは、ドロップキャップはこのように表示されました。

Custom code preview

方法3:プラグインを使ってドロップキャップを追加する

カスタムCSSの追加に躊躇する場合は、Initial Letterプラグインを使用してドロップキャップを追加することもできます。

このプラグインでは、ドロップキャップのサイズ、色、フォントを変更することもできます。

注意:Initial LetterプラグインはWordPressの最新バージョンでテストされておらず、開発者によってメンテナンスされていないことに留意してください。

しかし、プラグインをテストしたところ、問題なく動作しました。それでも不安な場合は、古いプラグインの使用に関する投稿をご覧ください。

とはいえ、まずはInitial Letterプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

有効化した後、管理サイドバーから設定 ” 初期レターページに移動します。ここからドロップキャップに関する設定を行うことができます。

まず、ドロップキャップを新しい投稿に自動的に適用させるかどうかを選択する必要があります。これを行うには、「投稿の初期設定」オプションの次のドロップダウンメニューから「はい」オプションを選択します。

次に、好みのフォント、色、サイズ、ドロップキャップ用のパディングを選択します。

注:これらのスタイリングオプションを調整するには、サイトをプレビューした後に設定に戻る必要がある場合があります。

Choose the Yes option to activate drop caps

その後、投稿の抜粋でドロップキャップを有効にしたい場合は、「抜粋で有効化」オプションの隣にあるボックスにチェックを入れます。

また、投稿の最初の段落にのみドロップキャップを追加したい場合は、「最初の段落のみ」オプションの横にあるボックスにチェックを入れることもできます。

Configure Initial Letter plugin settings

最後に、「変更を保存」ボタンをクリックして設定を保存することをお忘れなく。

これで、あなたのサイトのどの投稿日: でも、投稿の最初の段落にドロップキャップが表示されます。

Drop cap plugin preview

投稿のドロップキャップを削除したい場合は、投稿をブロックエディターで開いて削除することもできます。

そこで「頭文字」セクションまでスクロールダウンし、ドロップダウンメニューから「いいえ」オプションを選択します。これでその投稿のドロップキャップは無効化されます。

Disable drop caps from a post

ボーナス:WordPressテーマのフォントを変更する

ドロップキャップ以外にも、WordPressサイトのフォントを変更することで、コンテンツをより読みやすく、美しくすることができます。

これを行うには、WordPressダッシュボードから外観 ” カスタマイズページにアクセスします。テーマのカスタマイザーが開きますので、「グローバル」タブを開いてください。

:テーマ・カスタマイザーの設定は、使用しているテーマによって異なる可能性があることに留意してください。このチュートリアルでは、Astraを使用しています。

Go to global settings in Astra

左カラムにタイポグラフィ、カラー、コンテナ、ボタンなどの新しいオプションが表示されます。ここで、「タイポグラフィ」タブを展開する必要があります。

テーマが提供する様々なプリセットのリストが開きますので、お好みのフォントを選択してください。設定が完了したら、上部にある「公開する」ボタンをクリックし、設定を保存することをお忘れなく。

Change font in theme customizer

ブロックテーマを使用している場合、テーマカスタマイザーは使用できず、サイトエディターを使ってフォントを変更する必要があります。

この詳細については、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

7件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. 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.

      管理者

  3. 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

  4. anamika

    i am using this plugin but on my blog page , it’s not working [all pages even single page working]

  5. 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.

  6. 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.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。