書き出し/インデントCSSと WordPress 適用方法

Last Updated:2024年04月24日| | 2のコメント

インデントと書き出しは、文書またはコード内のテキストまたはコードブロックの並べ替えを調整する方法で、インデントは最初の行を右にインデントしますが、書き出しは最初の行を除く2行目以降をインデントする方法です。

書き出し/インデントCSSと WordPress 適用方法

インデント解除/インデントCSS

インデント方法

インデント テキストインデントを使用します。例:

p {
text-indent: 50px;
}
インデント(indent)

書き出し(outdent)方法

書き出す テキストインデントを適用して実装できます。次のコードを使用すると、2行目から書き出されます。

text-indent: -1em; 
padding-left: 1em;
outdent text 書き出す

WordPressからインデントと書き出しを適用する

WordPress ブロックエディタで特定の段落にインデントまたは書き出しを適用したい場合は、段落ブロックにCSSクラスを指定してCSSスタイルを定義して使用できます。

例:

この段落は WordPressから書き出しを適用した例示段落です。書き出しを適用するには、CSSクラスを指定してカスタマイズすることでCSSスタイルを定義できます。以降、段落のCSSクラスにそのクラスを指定すると、書き出しが適用されます。 CSSクラスを活用する場合、今後テーマが変更されたり、レイアウトに変化があるときに簡単にCSSで制御が可能です。

この段落は WordPressでインデントを適用した例の段落です。インデントを適用するには、CSSクラスを指定してカスタマイズすることでCSSスタイルを定義できます。以降、段落のCSSクラスに対応するインデントクラスを指定すると、インデントが適用されます。 CSSクラスを活用する場合は、後でスタイルを変更したいときにCSSコードを簡単に修正して全体的に適用できます。

適用方法

まず、 デザイン » カスタマイズ » 追加のCSS 또는 チャイルドテーマのスタイルシートファイル(style.css)に次のCSSコードを追加します。

/* 들여쓰기  및 내어쓰기 */
.text-indent { 
text-indent: 3em; 
}

.text-outdent {
text-indent: -1em; 
padding-left: 1em;
}

テキストインデントパディング左 属性値を適切に変更します。 CSSクラス名は自由に指定できます(例:block-indent、block-outdent)。これは一度だけ行うことができます。

インデントまたは書き出しする段落ブロックの右側の設定パネルの 詳細 » 追加のCSSクラス フィールドにクラスを指定します。

  • インデント: テキストインデント
  • 書き出す: text-outdent

ブロックを選択し、[ブロック]タブでCSSクラスを入力できます。

WordPress CSSクラスの指定

TinyMCE Advancedプラグイン

WordPress バージョン5.0以降、ブロックエディタはデフォルトエディタに統合されました。ブロックエディタが最初に不安定で機能が不十分でしたが、 WordPressが更新され、安定化され、機能も大幅に改善されました。 TinyMCE Advancedなどのプラグインを使用せずに、ブロックエディタの機能だけで満足のいくユーザーエクスペリエンス(UX)を提供すると思います。ブロックエディタで キーボードショートカットを活用すれば書き込み効率性を高め、手首トンネル症候群のような職業病(?)も緩和させることができます。

WordPressの基本的な文のエディタでは、数字の順序が指定されたリストだけを使用することができ、他のリストの場合は、直接htmlソースに入力する必要があります。

TinyMCE Advancedプラグインを使用すると、順序が指定されたリスト(Ordered List)と順序が指定されていないリスト(Unordered List)を簡単に使用できるようにメニューに、さまざまな機能が追加されます。

TinyMCEの高度

TinyMCE Advancedプラグインをインストールして有効にすると書き込みエディタが上記のように変わります。 上の図で、数値のリストの横にある駅の矢印マークをクリックすると、下図のようにコードを入力しなくても、さまざまなリストのスタイルを適用することができます。

順序付きリスト


たまに WordPress テーマによっては、テーマで指定された箇条書き以外に使用できない場合があります。 この場合、上記の「書き出し」部分のCSSを適用して使用できます。

参照


2のコメント

コメント

  1. cssコードをカスタマイズするのと子テーマのスタイルファイルに入れるのに違いはありますか?

    応答
    • 약간의 차이가 있습니다. カスタマイズ에 ユーザー CSS를 넣는 것과 차일드 테마에 넣는 것의 차이점에 대하여 추후에 시간이 날 때 한 번 별도의 글을 통해 설명해보려고 생각 중입니다.

      応答