WordPressでカラーのテキストボックスを作成[CSS] - WordPress 情報パッケージ
ベストセラー人気 WordPress テーマTop 30 詳細

WordPressでカラーのテキストボックスを作成[CSS]

Last Updated:2022年9月10日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

警告や注意事項などを、他のテキストと区別して際立たせたい場合、カラーの背景色が適用されたテキストボックス(テキストボックス)を利用することができます。

HTMLとCSSでテキストボックスを作成する方法は非常に簡単です。 基本的なCSSさえ分かれば簡単に作成することができます。 次の記事では基本だが、さまざまなテキストボックスを作成CSSを参照することができます。

WordPress境界線と背景色があるテキストボックスを作成し

上記の文に記載されたテキストボックスを WordPress ポストの作成時に適用する方法を説明します。 CSSを少し知ること難なく応用することができます。

様々なテキストボックスの中から "どこに枠があり、背景色のボックス"の部分のテキストボックススタイルを適用してみましょう。

/* 테두리와 배경색이 있는 글상자 만들기 */
/* Text boxes with border and backgrounnd color */
.txtBox00bg, .txtBox01bg, .txtBox02bg, .txtBox03bg, .txtBox04bg { border-style: solid; border-width: 2px; padding: 12px; word-break: break-all; } .txtBox00bg { border-color: LightGray; background-color:rgba(211, 211, 211, 0.2); } 
.txtBox01bg { border-color: DodgerBlue; background-color:rgba(30, 144, 255, 0.2); } 
.txtBox02bg { border-color: LightSalmon; background-color:rgba(255, 160, 122, 0.2); } 
.txtBox03bg { border-color: Tomato; background-color:rgba(255, 99, 71, 0.2); } .txtBox04bg { border-color: Crimson; background-color:rgba(237, 20, 61, 0.2); }

// 출처: 'hee's walking' 티스토리 블로그

CSSコードを追加する

まず、上記のCSSコードを使用している WordPress テーマのチャイルドテーマのフォルダ内のスタイルシートファイル(style.css)に追加するか、 WordPress お知らせ»外観(またはテーマデザイン) » カスタマイズする » 追加(またはバージョンに応じてCSSを追加する) 以下に追加してください。

Avada, Enfold などの有料テーマでは、テーマのオプションの中で、カスタムCSSコードを追加することができるCustom CSSセクションがあります。 WordPressでのCSSコードを追加する方法の詳細については、「WordPressでのCSSを追加する」を参照してみてください。

WordPressにCSSコードを追加する
テーマのデザイン>カスタマイズをクリックすると、「追加CSS」メニューが下部に表示される。

ルックス>カスタマイズ 画面で 追加CSSをクリックすると、CSSコードを追加することができる画面が表示されます。

WordPressカスタムCSSコードを追加する

CSSコードを追加した場合、もう 文(ポスト)を作成するときに「段落」ブロックにCSSクラスを追加して、スタイルを適用することができます。

Gutenberg エディタ(WordPress 5.0以上、またはGutenbergプラグインのインストール時に)

WordPress 記事作成時のブロックにCSSクラスを追加する

Gutenberg エディタでは、...

  1. 「段落」ブロックにテキストを入力して
  2. 右のブロックの設定]タブで、[詳細に移動して Additional CSS Class(es) フィールドにCSSクラスを追加します。

上記のCSSコードを使用する場合はtxtBox00bg、txtBox01bg、txtBox02bg、txtBox03bg、txtBox04bgなどのクラスのいずれかを Additional CSS Class(es) フィールド(③)に入力します。

※「段落」ブロックの代わりに「カスタムHTML」ブロックを選択して、HTMLコードを直接追加することも可能です。 例:

<p class="txtBox00bg">텍스트 상자 txtBox00bg</p>

※ Gutenberg(ブロックエディタ)では、背景色を指定するオプションが追加されました。 これで、上記の方法を使用せずにすぐに背景色を指定できます。

古典的なエディタ

古典的なエディタ(Classic Editor)を基本エディタとして使用する場合は、「テキストモード」に... タグにクラスを指定することができます。

古典的なエディタでカラーテキストボックスを作成し

たとえば、次のようなコードを「テキスト」モードで入力すると、各段落(paragraph)については、CSSクラスに指定されたスタイルが適用されます。

<p class="txtBox00bg">텍스트 상자 txtBox00bg</p>
<p class="txtBox01bg">텍스트 상자 txtBox01bg</p>
<p class="txtBox02bg">텍스트 상자 txtBox02bg</p>
<p class="txtBox03bg">텍스트 상자 txtBox03bg</p>
<p class="txtBox04bg">텍스트 상자 txtBox04bg</p>

例:

テキストボックスのスタイル0 - txtBox00bg

テキストボックスのスタイル1 - txtBox01bg

テキストボックスのスタイル2 - txtBox02bg

テキストボックスのスタイル3 - txtBox03bg

テキストボックスのスタイル4 - txtBox04bg

テキストボックスの背景色との境界線の色、太さ、テキストの文字サイズや色などのスタイルを必要に応じて指定して応用することができます。

※更新:カラーボックスのスタイルを少し変えてみました。 上記の例と同じ色のボックスのスタイルを指定するには、次のようなCSSコードを使用します。


/* 컬러 텍스트 박스 스타일 */

.txtBox00bg, .txtBox01bg, .txtBox02bg, .txtBox03bg, .txtBox04bg {
	    padding: 1.25em 1.125em;
    border-radius: .750em;
	word-break: break-all;	
}

.txtBox00bg { 
	background-color: #f2f4f6;
} 

.txtBox01bg { 
	background-color:rgba(30, 144, 255, 0.2); 
} 

.txtBox02bg { 
background-color: rgba(255, 160, 122, 0.2);
} 

.txtBox03bg { 
	background-color:rgba(255, 99, 71, 0.2);
} 

.txtBox04bg { background-color:rgba(237, 20, 61, 0.2);
}

最後に、

基本的な事項であるがこれに関連する質問をされる方が時折おらしばらく時間を割いてまとめてみました。 この方法を応用してテキストボックスに必要なスタイルを適用することができます。

メモ:



コメントを残す

コメント