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 indent paragraphs in WordPress

方法1:ビジュアルエディターのインデントボタンを使う

デフォルト設定では、ほとんどのWordPressテーマは段落を左寄せ、または右から左への言語の場合は右寄せで表示します。

段落をインデントしたい場合は、ビジュアルエディターのインデント増加ボタンをクリックして手動でインデントすることができます。これで段落の左側にスペースが追加されます。

Increase indent and decrease indent buttons in WordPress editor

複数の段落をインデントしたい場合は、それらの段落を選択し、インデント増加ボタンをクリックする必要があります。

インデントを増やすボタンを複数回クリックすることもできます。例えば、2回クリックすると、インデントの間隔が2倍になります。

また、インデントを減らすボタンをクリックすると、間隔を狭めることができます。

方法2:テキストエディターを使用して手動で段落をインデントする

ビジュアルエディターのテキストインデント・ボタンを使うのが、WordPressで段落をインデントする最も簡単な方法です。しかし、これでは追加したいスペーシングの量をコントロールする権限がありません。

より高度なユーザーは、テキストエディターに切り替えて、手動でスペースを追加することができます。必要なのは、テキストを段落タグの<p>タグと</p>タグで囲み、次のように段落テキストにインラインCSSを追加するだけです:

<p style="padding-left:25px;">段落テキストはここに...</p>。

Manually indent paragraphs using inline CSS

この方法では、インデントとして使用するスペーシングをコントロールすることができます。この方法は、それほど頻繁に段落をインデントする必要がない場合に最適です。しかし、頻繁に段落をインデントするのであれば、これは理想的な解決策ではありません。

方法3:段落の最初の行だけをインデントする

ウェブページでは、ワープロや組版で使われる伝統的な段落間隔を使用しません。

WordPressでも、段落をインデントすると、段落全体にスペースが追加されます。

All lines get affected in indent paragraph

ニュースや雑誌サイト、文芸誌のようなサイトでは、より伝統的な段落間隔を追加したい場合があります。その場合は、テーマにカスタムCSSを追加する必要があります。

まず、外観 ” カスタマイズにアクセスし、WordPressテーマカスタマイザーを起動します。次に「追加CSS」タブをクリックします。

Adding custom CSS in WordPress

左ペインにカスタムCSSを追加できるテキストボックスが表示されます。このCSSコードをボックスに追加する必要があります。

[cbk1]

このCSSコードは、段落に.custom-indentクラスがある場合、text-indentとして60pxを追加することをブラウザーに伝えるだけです。

WordPressで投稿を編集し、テキストエディターに切り替えることができます。次に、段落を<p class=”custom-indent”>と</p>タグでこのように囲みます:

<p class="custom-indent">段落テキストはここに...</p>。

投稿をプレビューすると、段落の1行目だけが空白になっていることがわかります。

Indent only the first line of a paragraph in WordPress

この方法は、いくつかの段落だけをインデントしたい場合にうまく機能します。しかし、サイトのすべての段落にこのスタイルを追加したい場合は、カスタムCSSをこのように変更する必要があります:

[cbk2]

このCSSルールは、WordPressの投稿やページ内のすべての段落の最初の行を自動的にインデントします。

この投稿がWordPressで段落をインデントする方法を学ぶのにお役に立てば幸いです。WordPressのビジュアルエディターを使いこなすためのヒントもご覧ください。

この投稿を気に入っていただけたなら、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや 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

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

  1. cuneyt

    thank you, really simple explanations with exact pictures. helped me a lot.

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      管理者

  2. Paulette Brown

    I found “Customize” at the top in the black menubar when I’m signed in for editing my WordPress site.
    Your instructions don’t mention that I need to click the blue “Publish” box to add the CSS. Mine doesn’t say “Save and Publish”. I found elsewhere that I need to click this, and when I change themes I may need to do this CSS entry again.
    The site-wide indent first line CSS doesn’t work the way I expected. Nothing seems to have happened.
    Does it need to be on the three lines you show, or can it be all on one line?

    • WPBeginner Support

      Apologies for that lack of clarification, you are correct that if you change themes with method 3 it will require you to readd the CSS. The three lines are for display but either method should work properly.
      Your theme may be overriding the CSS, you may want to check with the support for your specific theme if there is a setting that would be preventing it.

      管理者

  3. Sergiu

    I wish indents, and numbering have a keyboard shortcuts as text processors have ..

  4. chas

    It works, but treats the whole article as one paragraph I’m trying to post a short story with many paragraphs
    all I cab do is insert one CR after another and that’s a royal pain

  5. Lucas

    It works for inside text, but it also does so in comments. Is there a way to make it post-only?

  6. Roman

    None of this works for me. I’m either inserting it wrong, or wordpress has changed, and this doesn’t work anyone. I can’t even find the “additional css” after going into “appearance” to “customize”.

    • Sam

      This definitely works. You have to search around your “customize” location. It also depends on your theme developer, they may move the add/custom CSS.

  7. Cavid Muradov

    Very thanks for text indent :)

返信を残す

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