メールフォームのデザイン
マルチメールフォームの基本動作のテストが済んだら、今度はデザインに挑戦です。このページでは無料のテンプレートの使い方とデザインの簡単な調整方法を説明したいと思います。
デザインの設定手順
スタイルシートは難しい!
ホームページビルダーでホームページは作れても、スタイルシートは分からないという人は少なくありません。もしそうであるならば、スタイルシートは当分の間いじらない方が良いかもしれません。既製品の洋服を作り直して着る人はまずいません。技術がなければかえって変にしてしまうからです。当方もデザインは得意な方ではありませんが、それでもホームページビルダーで一からデザインするよりテンプレートをそのまま利用した方が少しはましだと思うからです。少なくとも、テンプレートより悪いデザインにはしないでほしいと願っています。とはいうものの、好みはみな違うのでお好きにどうぞ。
いよいよデザインに挑戦!
いよいよデザインに挑戦です。まず最初に、マルチメールフォーム用に用意された無料のテンプレートを使ってみましょう。それを少し調整するだけでよいなら、ラッキーですね。しかし、オリジナルのデザインにしたいなら少し技術が必要になりますね。それは時間をかけてゆっくり挑戦してください。
無料のテンプレートを使うと最初の設定が初期化されてしまいますので、最初の設定をメモしておくと良いと思います。再設定をしてもほんの少しですから問題ありませんね。
《組み込みスタイルシートの確認》
いくつかのスタイルシートはそれぞれどの部分のデザインを決めていますか?
MultiMailFormには外部スタイルシートがいくつかに分けて組み込まれています。それぞれ特定の部分のスタイルを決定しています。大体次のようになっています。
- form_base.css(PC用メールフォームのスタイルシート)
- header_menu.css(PC用ヘッダーとメニューのスタイルシート)
- style.css(htmlファイルのコンテンツの部分のスタイルシート)
《無料テンプレートの使い方》
無料テンプレートの使い方が分かりますか?
マルチメールフォーム用無料のテンプレートが標準のものを含めると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)をご覧ください。
スタイルシート
スタイルシートは情報とデザインを完全に分離する画期的な技術ですね。 しかも、少しの情報量でかなり変化にとんだデザインを可能にします。是非、マスターしたいと思います。まず、知っておきたいことは、設定の優先順位でしょう。まず、後に書いたものが優先されること、さらにクラス名よりid名の方が優先されること。そして、タグ内に直接書き込んだものが最優先されますね。あまり使いたくないですが、どうしてもだめな時はこの手を使います。
FireFox対策(ハック)
ブラウザーによりタグの解釈が異なり表示が異なることがあります。これに対処するためにハックという手法が提案されています。次の代表的な2つを調べて見てください。
- clearfixハック
- Star Html Hack
デーブルによるレイアウト
スタイルシートの考え方からすればテーブルでレイアウトを組むことは正しくありません。しかし、テーブルによるレイアウトはなかなか崩れないという長所があります。それで、CSSとテーブルによるハイブリットのデザインを組むことがあります。注意すべき点は論理的な強調が正しくなされるようにするということです。このような時に役立つのがSimpleWebです。デザインを取り払ってページの論理的な構成を確認できますので、活用してみてください。
画像処理ソフト
デザインに欠かせないのが画像処理ソフトです。適切な画像を使うとそれだけで見栄えが格段に良くなります。デザインの専門家ならPhotoShopを使うでしょうが、高くて手が出せませんね。ホーページビルダーに付いているウエブアートデザイナーかPaint Shop Proなど安いもので何とか我慢しましょうか。
ただ、覚えておきたいのは画像でかなり変わるということです。サイト自体のデザインはシンプルにしておいて、画像で全体をグレードUPするのはとても賢明な方法なのです。
オリジナルデザインの組み込み
マルチメールフォームにはオリジナルのデザインも組み込むことが出来ます。たとえば、テンプレートモンスターなどでは優れたテンプレートが安く購入できます。そうしたテンプレートも組み込むことが出来ます。その方法に関しましては、要領はショッピングカートの場合と同じなので、デザインのカスタマイズ方法のところを参考にして下さい。