一言メールフォーム設置 -デザイン編-

このページでは、CSSサンプルを掲載しています。デザインサンプルではありませんので、使用前にお好みでカスタマイズしてください。

送信ボタンを画像にする

ソース

<input type="image" src="画像のURL" width="横幅" height="縦幅" alt="代替文字列">

PostMailのXY座標値対処法(KENT WEBサポートコーナ過去ログ)

送信ボタンのデザインを変える

ソース

フォームの送信ボタンを以下に差し替えます。

<input type="submit" value="送信" class="input-submit">
<STYLE type="text/css">
<!--
.input-submit
    {
    cursor:pointer;
    color:#CC0000;/* 文字色 */
    background-color:#eee;/* 背景色 */
    background-image:url('画像URL');/* 背景画像 */
    border-width:1px 1px 1px 1px;/* 枠線の太さ 上右下左 */
    border-color:#000;/* 枠色 */
    border-style:solid solid solid solid;/* 枠線の種類 上右下左 */
/* 
    無し:none        実線:solid        点線:dotted
    粗い点線:dashed  二重線:double     谷線:groove
    山線:ridge       内線:inset        外線:outset
*/
    }
-->
</STYLE>

テキストフィールドのデザインを変更する

ソース

<STYLE type="text/css">
<!--
textarea
    {
    font-family:"MS UI Gothic",Osaka,sans-serif;/* フォント候補1,候補2,候補3 スペースを含む名前は"で囲む */
    font-size:100%;/* フォントサイズ */
    color:#CC0000;/* 文字色 */
    background-color:#eee;/* 背景色 */
    border-color:#000;/* 枠色 */
    border-width:1px 1px 1px 1px;/* 枠線の太さ 上右下左 */
    border-style:solid solid solid solid;/*枠線の種類 上右下左*/
/* 
    無し:none        実線:solid        点線:dotted
    粗い点線:dashed  二重線:double     谷線:groove
    山線:ridge       内線:inset        外線:outset
*/
    scrollbar-base-color:#000;/* スクロールバーの色 IE独自 */
    }
-->
</STYLE>

スクロールバーの色を細かく決める(IE独自)

<STYLE type="text/css">
<!--
textarea
    {
    scrollbar-base-color:#000;/* 基本色 */
    scrollbar-face-color:#000;/* 表面色 */
    scrollbar-track-color:#fff;/* 背景色 */
    scrollbar-arrow-color:#fff;/* 矢印色 */
    scrollbar-3dlight-color:#000;/* 左端と上端 */
    scrollbar-darkshadow-color:#000;/* 右端と下端 */
    scrollbar-highlight-color:#fff;/* ハイライト */
    scrollbar-shadow-color:#fff;/* 影の色 */
    }
-->
</STYLE>

入力フォーカス時に背景色を変える(IE未実装)

<STYLE type="text/css">
<!--
textarea:focus,input:focus
    {
    background:#FFFFF0;
    }
-->
</STYLE>

<form>〜</form>の隙間をなくす

<STYLE type="text/css">
<!--
form
    {
    margin: 0;
    }
-->
</STYLE>

ソースA<p>の隙間をなくす

当サイトの一言メールサンプルAを利用すると、<p>で隙間ができるため例をのせました。

ソースAのformとpに直接指定して隙間をなくす

赤字が追加した記述です。

<!-- ここから -->
<form action="http://〜〜/postmail.cgi" method="post" style="margin: 0;">
<p style="margin: 0;">
<textarea name="_メッセージ" rows>="1" cols="30"></textarea>
<input type="submit" value="コメント送信">
</p>
</form>
<!-- ここまで -->

なるべく、HTML文書の<head>〜</head>に<meta http-equiv="Content-Style-Type" content="text/css">を挿入します。

(style属性で指定するスタイルシート言語がCSSであるという意味。挿入しなくてもCSSであると自動判断するブラウザが多いです。)


隙間隙間

隙間隙間
隙間隙間

隙間隙間

style要素まとめ

style要素は一つに纏められます

<STYLE type="text/css">
<!--
body {color:#000000;}
-->
</STYLE>
<STYLE type="text/css">
<!--
h1,h2 {font-weight:bold;}
-->
</STYLE>
<STYLE type="text/css">
<!--
body {color:#000000;}
h1,h2 {font-weight:bold;}
-->
</STYLE>




<STYLE type="text/css">
<!--
body {color:#000000;}
-->
</STYLE>
<STYLE type="text/css">
<!--
body {background-color:#FFF;}
-->
</STYLE>
<STYLE type="text/css">
<!--
body {color:#000000;
     background-color:#FFF;}
-->
</STYLE>




ソース

以下のソースをHTML文書の<head>〜</head>に挿入して、カスタマイズしてください。

<meta http-equiv="Content-Style-Type" content="text/css">
<!-- ↑スタイルシートを使う時に記述 -->
<STYLE type="text/css">
<!--
.input-submit
    {
    cursor: pointer;
    color:#CC0000;/* 文字色 */
    background-image: url('画像URL');/* 背景画像 */
    background-color: #eee;/* 背景色 */
    border-width:1px 1px 1px 1px;/* 枠線の太さ 上右下左 */
    border-color:#000;/* 枠色 */
    border-style:solid solid solid solid;/* 枠線の種類 上右下左 */
    }
/* 
    無し:none        実線:solid        点線:dotted
    粗い点線:dashed  二重線:double     谷線:groove
    山線:ridge       内線:inset        外線:outset
*/
textarea
    {
    font-family:"MS UI Gothic",Osaka,sans-serif;/* フォント候補1,候補2,候補3 スペースを含む名前は"で囲む */
    font-size:100%;/* フォントサイズ */
    color:#CC0000;/* 文字色 */
    background-color:#eee;/* 背景色 */
    border-color:#000;/* 枠色 */
    border-width:1px 1px 1px 1px;/* 枠線の太さ 上右下左 */
    border-style:solid solid solid solid;/*枠線の種類 上右下左*/
/* 
    スクロールバーの色
*/
    scrollbar-base-color:#000;/* 基本色 */
    scrollbar-face-color:#000;/* 表面色 */
    scrollbar-track-color:#fff;/* 背景色 */
    scrollbar-arrow-color:#fff;/* 矢印色 */
    scrollbar-3dlight-color:#000;/* 左端と上端 */
    scrollbar-darkshadow-color:#000;/* 右端と下端 */
    scrollbar-highlight-color:#fff;/* ハイライト */
    scrollbar-shadow-color:#fff;/* 影の色 */
    }

textarea:focus,input:focus
    {
    background:#FFFFF0;/* フォーカス中の背景色(IE未実装) */
    }
-->
</STYLE>
削除メモ

送信ボタンは<input type="submit" value="送信" class="input-submit">に差し替える

枠線の種類

入力欄の文字サイズ・フォントを変える(説明なし)

例:メールの場合

大きくしたら、入力欄を長くしないと文字が見切れて確認しづらくなるかも。(style属性で個々の要素に直接スタイル指定した例)

<input type="text" name="email(データの名前)" size="30" style="font-size: 200%;font-family:"MS UI Gothic",Osaka,sans-serif;">

素材屋さんのテーブル素材でメールフォームを飾りたい!場合

CSSではありません。Webページ作成支援の素材屋さんをご存知の方向け。

素材屋さんのテーブル素材でメールフォームを飾りたい!場合 (具体的な説明は無し)