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

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

ワードプレスの枠と背景色のあるテキストボックスを作成し

上記の文に記載されたテキストボックスをワードプレスポスト作成時に適用する方法を説明します。 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コードを使用しているワードプレスのテーマのチャイルドテーマのフォルダ内のスタイルシートファイル(style.css)に追加するか、 ワードプレス伝言板>テーマのデザインをカスタマイズする> CSSを追加する 下に追加するようにします。 (ワードプレスのバージョンが5.0より低い場合は、「テーマのデザイン」の代わりに「容貌」(Appearance)が表示されます。)

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

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

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

ワードプレスのカスタムCSSコードを追加する

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

グーテンベルクエディタ(ワードプレス5.0以上、またはGutenbergプラグインのインストール時に)

ワードプレス記事作成時のブロックにCSSクラスを追加する

グーテンベルクエディタでは、...

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

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

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

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

古典的なエディタ

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

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

たとえば、次のようなコードを「テキスト」モードで入力すると、各段落(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);
}

おわりに

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

注:



コメントを残す