Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

カスタムCSS機能を使ってフォームのデザインを変更する

新機能として昨日ニュースで公開された、フォームのカスタムCSS機能がありますが、これはiframeで埋め込まれるフォームのデザイン(CSS)を自由に変更できる機能です。

managecss.jpgこの機能を使えばデザインに合わせたフォームを設置することができます!

今回はフォームのカスタムCSSの例をいくつかご紹介します。

まず、カスタムCSSの使い方と、フォームのHTML構造については以下のマニュアルをご覧ください。

以下それぞれテーマに合わせたCSSサンプルを紹介しますので、それを参考にしつつ変更など加えてご利用ください。

SimpleCorporateの例

scc.jpg
サンプルコード

/* 背景全体 */
body {
  padding: 15px 0;
}
/* フォーム部分背景全体 */
.container {
  background-color: #5f76a6;
  border-radius: 10px;
}
/* 各項目の見出しと注意書きの文字 */
.form-column, .help-block, .message-block {
  color: #fff;
}
/* 各項目のインプットフォーム */
.form-column input, textarea {
  color: #000;
}
/* ボタン */
.button {
  color: #5f76a6;
}

背景色を設定して文字の色は白、フォーム部分の枠を角丸にしています。

Gallery Blackの例

gbcss.jpg
サンプルコード

/* 背景全体 */
body {
  padding: 15px 0;
  background-color: transparent;
}
/* フォーム部分背景全体 */
.container {
   background-color: transparent;
}
/* 各項目の見出しと注意書きの文字 */
.form-column, .help-block, .message-block {
  color: #fff;
}
/* 各項目のインプットフォーム */
.form-column input, textarea {
  color: #000;
}
/* ボタン */
.button {
  color: #000;
}

全体とフォームの背景色をtransparentにして、裏側のデザインをそのまま活かしています。

Shopの例

shopcss.jpg
サンプルコード

/* 背景全体 */
body {
  padding: 15px 0;
}
/* フォーム部分背景全体 */
.container {
  background-color:  rgb(250, 237, 207);
  border: 2px dotted rgb(58, 35, 35);
}
/* 各項目の見出しと注意書きの文字 */
.form-column, .help-block, .message-block {
  color: rgb(0, 0, 0);
}
/* 各項目のインプットフォーム */
.form-column input, textarea {
  color: rgb(0, 0, 0);
}
/* ボタン */
.button {
  color: rgb(58, 35, 35);
  border: 2px solid rgb(58, 35, 35);
}

背景色など以外では、フォーム全体の枠や送信ボタンのborderの変更をしています。

是非カスタムCSS機能を利用して、テーマにあったフォームのデザイン変更にチャレンジしてみてください♪

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス