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

このページでは、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;/* フォント候補1,候補2 スペースを含む名前は"で囲む */
    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>

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;/* フォント候補1,候補2 スペースを含む名前は"で囲む */
    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">に差し替える

枠線の種類