フォームのデザイン/ メールフォームMultiMailForm(WEBインベンター開発)の設置の仕方を分かりやすく解説!

メールフォームのデザイン

マルチメールフォームの基本動作のテストが済んだら、今度はデザインに挑戦です。このページでは無料のテンプレートの使い方とデザインの簡単な調整方法を説明したいと思います。

デザインの設定手順

スタイルシートは難しい!

ホームページビルダーでホームページは作れても、スタイルシートは分からないという人は少なくありません。もしそうであるならば、スタイルシートは当分の間いじらない方が良いかもしれません。既製品の洋服を作り直して着る人はまずいません。技術がなければかえって変にしてしまうからです。当方もデザインは得意な方ではありませんが、それでもホームページビルダーで一からデザインするよりテンプレートをそのまま利用した方が少しはましだと思うからです。少なくとも、テンプレートより悪いデザインにはしないでほしいと願っています。とはいうものの、好みはみな違うのでお好きにどうぞ。

いよいよデザインに挑戦!

いよいよデザインに挑戦です。まず最初に、マルチメールフォーム用に用意された無料のテンプレートを使ってみましょう。それを少し調整するだけでよいなら、ラッキーですね。しかし、オリジナルのデザインにしたいなら少し技術が必要になりますね。それは時間をかけてゆっくり挑戦してください。

無料のテンプレートを使うと最初の設定が初期化されてしまいますので、最初の設定をメモしておくと良いと思います。再設定をしてもほんの少しですから問題ありませんね。

《組み込みスタイルシートの確認》

いくつかのスタイルシートはそれぞれどの部分のデザインを決めていますか?

MultiMailFormには外部スタイルシートがいくつかに分けて組み込まれています。それぞれ特定の部分のスタイルを決定しています。大体次のようになっています。

  • form_base.css(PC用メールフォームのスタイルシート)
  • header_menu.css(PC用ヘッダーとメニューのスタイルシート)
  • style.css(htmlファイルのコンテンツの部分のスタイルシート)
スタイルシートにはクラス名、id名というものがあって、それを使うと特定の箇所のデザインを指定できます。組み込みスタイルシートでどこにどんなクラス名、id名が使われているかをある程度見ておいてください。

《無料テンプレートの使い方》

無料テンプレートの使い方が分かりますか?

無料テンプレート

マルチメールフォーム用無料のテンプレートが標準のものを含めると8種類ほど用意されています。htmlファイルも初めから10個ほど付属しています。

  home.html(HOME)
  sitemap.html
  topics.html
  company.html
  business.html
  accessmap.html
  faq.html
  law.html
  policy.html
  service.html

もしお好みのデザイン、又はそれに近いものがありましたら、それを使えは早くデザインを完成させることが出来ます。HTMLファイルはテキストエディターで編集すると簡単にできます。
無料テンプレートの使い方をよく読んでから使ってください。・・・・では、テンプレートを使ってみてください。うまく行きましたか。FireFoxや他のブラウザーでもテストしてみてください。

《スタイルシートの調整》

スタイルシートの調整ができますか?

スタイルシートにはクラス名、id名というものがあって、それを使うと特定の箇所のデザインを設定できます。ですから、組み込みスタイルシートでどこにどんなクラス名、id名が使われているかがわかればそこのデザインを変更することが出来るのです。
たとえば、送信ボタンのデザインを変更する場合を例に上げて考えて見ましょう。メールフォームで送信ボタンのある画面を表示させて、そのページのソースを見てください。そうすると下記の記述が見つかります。
<input type="submit" value="*****" class='submit'>
送信ボタンがクラス名class='submit'で定義されていることが分かります。そして、このクラス名submitは外部スタイルシートform_base.cssの約70行目辺りにあります。これを変更すればボタンのデザインは変わります。また。それを削除すればWindows標準のデザインになります。
フォントを変更したい場合は、form_base.cssの11行目と32行目でfont-familyを調整してください。フォントによりデザインはかなり変わりますが、これも勉強が必要なところになります。

《画像のアップロード》

必要な画像を正しい場所にアップロードできますか?

正しく画像をUPロードするには画像のサイズとファイル名、そしてUPするフォルダを確認する必要があります。ブラウザーに表示されている画像を変更したい場合は、その画像を右クリックしてプロパティーを確認します。そうすると必要な情報が全て得られます。ファイル名を定めて同じフォルダにUPして上書きしてください。ブラウザーを1回更新するとUPした画像が表示されるはずです。
この同じ要領で画像が変更できない場合があります。それは背景画像です。画像が背景として設定されている場合はプロパティーで見ることが出来ないからです。たとえば、ヘッダーの背景画像を例にしてみましょう。この場合、menu_head.cssの31行目辺りに記述があります。
   background-image: url('images/header.jpg' );
その画像のサイズなどを確認すれば、後は変更することが出来ますね。(もっとも、画像処理ソフトが必要になりますが、それはお持ちのことと思います。)

《携帯のデザイン》

携帯スタイルシートにはどんな制限がありますか?

携帯のデザインはPCほど簡単ではありません。といっても、もちろん、PCより単純なはずですね。ただ、使えるタグが制限されていることと、携帯機種により表示が異なることを考慮しなければならないのです。具体的には携帯CSSの採用のところに書いてありますので参考にしてください。やり方としましては、サンプルをまねてその通りにすることである程度のデザインが出来ると思います。
色やフォントサイズはシステム設定【21】で簡単に変更することが出来るようになっています。

《スマートフォンのデザイン》

スマートフォンのデザインで特に考慮すべきことは何ですか?

スマートフォンの性能はPC並みですから、携帯のように制限されているタグやCSSはありません。その点ではむしろPCよりも進んでいて最新のHTMLやCSSが使えるようになっています。スマートフォンで特に考慮すべき点はやはりタッチパネルによる操作であるということでしょう。それで、PCtoMobileではHTML5/CSS3を採用し、タップし易い表示を実現しました。
詳しくは、スマートフォンのデザイン(HTML5/CSS3)をご覧ください。

格言と知恵 童話集 格言集 サプリメント選び方 じゃんけん 診断テスト カウンセラー ショッピングカート比較
デジタルコンテンツ販売 決済比較 レンタルショッピングカート ショッピングカートCGI ショッピングカートCGI 無料ショッピングカート スピーカー名機

CSS Template courtesy of DesignsByDarren