WordPressで段落を簡単にインデントする方法

WordPressでスペースを追加したり、段落をインデントしたりしたいですか?ほとんどのテキストは左揃えですが、タイポグラフィを改善し、読みやすくするために段落をインデントしたい場合があります。この記事では、WordPressで簡単に段落をインデントする方法を紹介します。

WordPressで段落をインデントする方法

方法1:ビジュアルエディターのインデントテキストボタンを使用する

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

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

WordPressエディターのインデントを増やすボタンと減らすボタン

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

インデントを追加をクリックすると、間隔を広げることができます。たとえば、2回クリックすると、インデント間隔が2倍になります。

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

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

ビジュアルエディターのインデントテキストボタンを使用することは、WordPressで段落をインデントする最も簡単な方法です。ただし、これにより追加したいスペースの量を制御することはできません。

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

<p style="padding-left:25px;">ここに段落テキストを入力してください...</p>

インラインCSSを使用して段落をインデントする

この方法では、インデントに使用したいスペースを制御できます。この方法は、段落を頻繁にインデントする必要がない場合に最適です。ただし、段落を頻繁にインデントする場合は、これは理想的な解決策ではありません。

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

Webページは、ワードプロセッサや組版で使用される従来の段落間隔を使用せず、段落の最初の行のみをインデントします。

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

すべての行が段落のインデントに影響します

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

まず、外観 » カスタマイズにアクセスしてWordPressテーマカスタマイザーを起動する必要があります。次に、「追加CSS」タブをクリックします。

WordPressにカスタムCSSを追加する

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

p.custom-indent { 
text-indent:60px;
} 

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

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

<p class="custom-indent">ここに段落テキストを入力します...</p>

完了したら、投稿をプレビューすると、段落の最初の行にのみ前方に間隔があることがわかります。

WordPressで段落の最初の行のみをインデントする

この方法は、少数の段落をインデントしたい場合に便利です。しかし、サイト上のすべての段落にこのスタイルを追加したい場合は、カスタムCSSを次のように変更するだけです。

article p { 
text-indent:60px;
} 

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

この記事がWordPressで段落をインデントする方法を学ぶのに役立ったことを願っています。また、WordPressビジュアルエディタをマスターするためのヒントもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルをご覧ください。YouTubeチャンネルに登録してください。また、TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

10 CommentsLeave a Reply

  1. WordPressサイトの編集のためにサインインしているとき、黒いメニューバーの一番上に「カスタマイズ」を見つけました。
    あなたの指示には、CSSを追加するために青い「公開」ボックスをクリックする必要があることについて言及されていません。私の場合は「保存して公開」とは表示されません。他の場所でこれが必要だと知り、テーマを変更した際にはこのCSS入力が再度必要になるかもしれません。
    サイト全体のインデントの最初の行のCSSは、期待通りに機能しません。何も起こっていないようです。
    あなたが示す3行に記述する必要があるのか、それともすべて1行に記述できるのか?

    • 説明不足で申し訳ありません。方法3でテーマを変更した場合、CSSを再追加する必要があるというご指摘は正しいです。3行は表示用ですが、どちらの方法でも正常に機能するはずです。
      お使いのテーマがCSSを上書きしている可能性があります。特定のテーマの設定で、それが妨げられているかどうか、お使いのテーマのサポートにご確認ください。

      管理者

  2. テキストプロセッサのように、インデントや番号付けにキーボードショートカットがあればいいのにと思います。

  3. 機能しますが、記事全体を1つの段落として扱います。多くの段落がある短編小説を投稿しようとしています。
    できることは、CRを次々と挿入することだけで、それは本当に面倒です。

  4. これらのどれも私にはうまくいきません。私が間違って挿入しているか、WordPressが変更されたかのどちらかです。これはもう機能しません。「外観」から「カスタマイズ」に進んでも、「追加CSS」が見つかりません。

    • これは間違いなく機能します。「カスタマイズ」の場所を探してみてください。テーマ開発者によって、追加/カスタムCSSの場所が移動されている場合もあります。

返信する

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