Contact Form 7 ワードプレス・プラグイン スタイルの使い方@ホームページビルダー教室

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー教室
ホームページ作成無料相談受付中(こちらをクリック!!)

TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)

ホームページビルダー教室では、WordPressテーマを直接使ってのサイト作成の生徒さんがだんだん増えてきました。生徒さんのために、こちらも勉強を進めています。Contact Form 7のスタイルを変更します。

デフォルトでは

スタイルを変更して、

スタイルの変更には拡張CSS(Enhancing CSS)というワードプレス・プラグインを利用しています。

[html]</p>
<p><span class="css-select-op">.</span><span class="css-selector">myform </span><span class="css-punctuation">{</span><br /><span class="whitespace">  </span><span class="css-identifier">width</span><span class="css-punctuation">: </span><span class="css-unit">47%</span><span class="css-punctuation">;</span><br /><span class="css-punctuation">}</span><br /><span class="css-selector">textarea</span><span class="css-select-op">.</span><span class="css-selector">wpcf7-form-control</span><span class="css-select-op">.</span><span class="css-selector">wpcf7-textarea</span><span class="css-select-op">.</span><span class="css-selector">myform </span><span class="css-punctuation">{</span><br /><span class="whitespace">  </span><span class="css-identifier">background-color</span><span class="css-punctuation">: </span><span class="css-value">black</span><span class="css-punctuation">;</span><br /><span class="css-punctuation">}</span><br /><span class="css-selector">input</span><span class="css-select-op">.</span><span class="css-selector">wpcf7-form-control</span><span class="css-select-op">.</span><span class="css-selector">wpcf7-text</span><span class="css-select-op">.</span><span class="css-selector">wpcf7-validates-as-required </span><span class="css-punctuation">{</span><br /><span class="whitespace">  </span><span class="css-identifier">background-color</span><span class="css-punctuation">: </span><span class="css-value">black</span><span class="css-punctuation">;</span><br /><span class="whitespace">  </span><span class="css-identifier">border</span><span class="css-punctuation">: </span><span class="css-unit">1px </span><span class="css-value">solid</span><span class="css-punctuation">;</span><br /><span class="css-punctuation">}</span></p>
<p>[/html]