SSLメールフォームの格安レンタルサービス
SSLメールフォーム   " ワンポータル ® "
       

1.「カスタムデザインの設定」でできること
この機能を利用すると、SSLメールフォームのデザインを、細部まで自由に設定することができ、ユーザー様のサイトデザインに限りなく近い、最適なデザインのメールフォームを作成することが可能になります。
 →カスタムデザイン設定画面の見本

「カスタムデザイン」は、下図のように部分別に細かく設定することができます。
まずはデザインを設定できる各部の位置と、機能の概要をご確認下さい。

下図は、各部の背景色およびボーダー(枠)色の設定例ですが、この他に文字色・文字サイズ・太字・斜体文字・横方向の配置・縦方向の配置・領域の幅・領域の高さ・行の高さ・マージン・パディング・ボーダーの幅をそれぞれ設定できます。

なお ボーダーの色および幅・パディング・マージンは上下左右別に設定が可能です。
(下の例ではタイトル部分のボーダーの色と幅をいろいろ変えてみました)

 カスタムデザインの部分別設定項目概要

2.カスタムデザインを設定するには   

まず管理画面で、「フォームのデザイン」を、「カスタム」に設定しておく必要があります。「カスタム」を選択した後、「メンテナンス完了」で変更が確定します。

次に、管理画面左上の「カスタムデザインの設定」をクリックすることにより、「カスタムデザイン設定画面」に移動できます。

3.カスタムデザイン設定画面の操作   
1 基本操作
この画面にある各設定項目ごとに、長さ・太さ・色コードなどの数値を入力したり、選択項目からデータを選択することにより、メールフォームのデザインを設定することができます。

設定データを入力・変更後、「設定完了 & デザイン確認」をクリックすると、データがデザインが反映され、またデザインを確認する画面が表示されます。(「設定完了 & デザイン確認」ボタンは画面に同じものを2つ設置してありますので近い方をクリックしていただけます)

その後「SSLメールフォームを参照」から、実際のメールフォームでのデザインを確認することができます。

※ ブラウザのバージョンによっては、ブラウザの「更新」ボタンをクリックしなければデザインの変更結果が表示されない場合がありますので、ご留意願います、

2 初期設定データ
カスタムデザインのデータは当初、「ラベンダー−アイボリー」と同一のデザインになるよう、すでに「初期設定データ」が登録されております。まずこの初期設定データをもとに、各項目のデータを変更しながら1の基本操作すると、設定データがデザインにどのように反映されるかを容易に確認することができます。

3 色の指定(色コードの入力)
色を設定する項目には、「色コード」を入力します。
色コードは”#”で始まる「Web Safeカラー」または"red","blue"などの「カラーネーム」コードのいずれも使用できます。
2種類それぞれカラーチャートを用意しておりますので、必要に応じ設置したリンクからご参照下さい。
(「Web Safeカラー」のカラーチャートはすでにフレームに表示しております。ブラウザのバージョン等により表示されない場合は、リンクをご利用下さい)

なおカラーチャートを用意した「Web Safeカラー」は216色しかありませんが、これ以外の色(例えば#123456など)も入力し表示させることは可能です。 →Web Safeカラー とは?

4 長さ・太さの指定(数値の入力)
領域の幅・領域の高さ・マージン・パディング・ボーダーの幅といった、長さ・太さの単位は基本的に"px"(ピクセル)で入力します。
( 単位をつけずに数値だけ入力すれば、単位は自動的に"px"となります)

項目によっては”%”などの単位をつけて別基準での設定も可能ですが、 ここではその詳細な説明は省略します。(CSS2の仕様に準じます)

5 文字サイズの指定
文字サイズは親項目の文字サイズに対する割合を"%"という単位をつけて入力します。
例えば「サブ枠部分」に"90%"と入力されていれば、サブ枠内に表示される文字のサイズは「メイン枠」の文字サイズの90%の大きさになります。
上記の他、フォントサイズを直接”pt”単位で入力する方法、"small","x-small"のように指定する方法などがありますが、 ここではその詳細な説明は省略します。(CSS2の仕様に準じます)

6 行の高さの指定
領域内の改行の幅を調整したい場合などに用います。 例えば"1.5"と入力すると、文字サイズの1.5倍に行の高さが調整されます。

7 ボーダー・パディング・マージンの指定
ボーダー・パディング・マージンは、一括指定の他、上下左右を別々に設定することが可能です。
これにより、見出し部分と入力部分の間を1本の線で区切るなど、自由度の高いデザインが可能となります。

※ 上下左右のどれか1つでも指定する場合は、一括指定欄には入力しないようにして下さい。(表示に支障が出る可能性があります)
 例えば上のボーダーだけ1ピクセルで表示させたい場合は、「ボーダー幅 上」を”1”とし、あとの右・下・左には、"0"を入力します。一括指定欄である「ボーダー幅」はブランクにしておきます。

ところで、この3つの要素について、
・各部分(要素)の周りに表示する枠の部分が「ボーダー」、
・文字などの「内容領域」とボーダーとの間の空間部分が「パディング」、
・ボーダーの周りの空白部分が「マージン」です。(言葉で説明すると判りにくいのですが)

下の図は、メールフォームの「入力部分」とその中の要素である「フォーム部分」についての「パディング」と「マージンの関係を表すものです。
このように細かく1ピクセル単位でフォームのデザインを整えることができます。


A:入力部分の左パディング
 またはフォーム部分の左マージン

B:入力部分の右パディング
 またはフォーム部分の右マージン

C:入力部分の下パディング
 またはフォーム部分の下マージン

D:入力部分の上パディング
 またはフォーム部分の上マージン

E:フォーム部分の左パディング

なお初期設定で標準的な数値を入れておりますので、変更される場合は元の数値も考慮のうえ調整をお願いいたします。

このページのトップへ