スマホ対応でないホームページをスマホ対応にする方法（２）

スマホ対応とは

通常のスマホ対応でないページをスマホ対応にする方法

続きです、スマホ対応にするためには、HTMLとCSSを理解してないとできなことを書きました。
しかし、理解することは僅かかもしれません。こんな風にしたいとと思うことは全てネットで調べることができます。
基本的に、スマホ対応でないホームページはサイズの設定が固定です。これを%対応に変えるとだいだいうまくいきます。

ちょっと余談です。

僕自身は、Webスクールに6ヶ月通ってそのうち2ヶ月HTMLとCSSを学びました。残りは、PHP、JavaScript,データベースと実習です。

この教材を2ヶ月教師がプロジェクタで見せながら、生徒がただただそれを打ち込んでいく授業でした。普通に打ち込んでいってもそれが動かないことが勉強でした。1文字間違うだけで全く動かない、まあ、プログラムってそういうものですが、僕の場合、間違わないと全く頭に残っていかないので、間違って時間を消費してHTML、CSSに慣れていきました。ホームページ作りもプログラムも慣れです。まぁ、プログラムに好き嫌いもあるので何がしたいのか目標がないと続かないのも事実ですが．．．

HTML、CSSを勉強して直ぐに、簡単なホームページは作れるようになったので、実はHTML、CSSはとても簡単な言語なのかもしれません。骨格は基本的に真似をすれば良いので後はどんな感じにするかアイデアです。

余談はここまで．．．そのうちブログで僕のプログラム人生について書きたいと思っています。

さて、HTMLとCSSがある程度理解できれいれば、デザインのスマホ対応は簡単にできます。もちろん工夫は必要ですが、僕が生き証人です。

コンタクトフォームをプラグインのContact Form 7を使ってカスタマイズする方法です。

さて、コンタクトフォームを一から作成するのは面倒です。ちゃんと、Wordpressにはプラグインが用意されています。

僕も人気があるプラグインということで「Contact FOrm 7」を採用しています。
たまたま、スマホ対応にしようとしたホームページも「Contact FOrm 7」を採用していました。

でも、デザインをカスタマイズしていて、初期の「Contact FOrm 7」とは似ていませんでした。これが実際のフォームです。

Contact FOrm 7のカスタマイズしていない状態では
お名前、メールアドレス等のシンプルな味気ないフォームになっています　^^;

サンプルにした、メールフォームの方が段違いにカッコイイです。
以下が真似をしたメールファームです。ほぼ似た機能になりました。

「Contact Form 7」をカスタマイズするには、HTMLとCSSが必須みたいです。真似たい他のホームページからソースをコピーするだけではうまく動きません。
レベルアップして他の人に真似て使われるぐらいのデザインをしたいものです。

ご提供いただきました情報は、お客様への回答のために使用させていただきます。
<table>
<tr>
<td class=”Item”>お名前 *</th><td class=”txt”>[text* your-name] </td>
</tr>
<tr>
<td class=”Item”>メールアドレス *</td>
<td class=”txt”>[email* your-email placeholder akismet:author “半角数字で入力して下さい”]
[email* your-email_confirm placeholder akismet:author “確認のため再度入力して下さい”]</td>
</tr><tr>
<td class=”Item”>電話番号 *</td>
<td class=”txt”>[tel* tel-275 placeholder akismet:author “半角数字で入力して下さい。xxx-xxxx-xxxx”] </td>
</tr>
<tr>
<td class=”Item”>題名</td>
<td class=”txt”>[text your-subject] </td><tr>
<td class=”Item”>お問い合わせ内容</td>
<td class=”txt”>[textarea your-message] </td>
</tr>
</table>
　*は必須項目です。
<div id=”privacybox”>
個人情報保護方針について
　株式会社サン設備（以下「当社」）は、以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、全従業員に個人情報保護の重要性の認識と取組みを徹底させることにより、個人情報の保護を推進致します。
1.個人情報の管理
　当社は、お客さまの個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、セキュリティシステムの維持・管理体制の整備・社員教育の徹底等の必要な措置を講じ、安全対策を実施し個人情報の厳重な管理を行ないます。
2. 個人情報の利用目的
　お客さまからお預かりした個人情報は、当社からのご連絡や業務のご案内やご質問に対する回答として、電子メールや資料のご送付に利用いたします。
3. 個人情報の第三者への開示・提供の禁止
　当社は、お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。
<ul>
<li>お客さまの同意がある場合</li>
<li>お客さまが希望されるサービスを行なうために当社が業務を委託する業者に対して開示する場合</li>
<li>法令に基づき開示することが必要である場合</li>
</ul>
4. 個人情報の安全対策
　当社は、個人情報の正確性及び安全性確保のために、セキュリティに万全の対策を講じています。
5. ご本人の照会
　お客さまがご本人の個人情報の照会・修正・削除などをご希望される場合には、ご本人であることを確認の上、対応させていただきます。
6. 法令、規範の遵守と見直し
　当社は、保有する個人情報に関して適用される日本の法令、その他規範を遵守するとともに、本ポリシーの内容を適宜見直し、その改善に努めます。
お問い合わせ窓口
株式会社AAAAAA 
〒889-1702　宮崎県XXXXX 
TEL：0985- FAX：0985-
</div>[acceptance acceptance-893]個人情報保護方針に同意する[submit “送信”]

CSSは全部ではありませんが、殆ど元のホームページのCSSのコピーです。
これに、若干の手を入れて作り込みました。

/**********************************/

/********** お問合わせページ **********/

/**********************************/

.wpcf7 table { width: 98%; table-layout: fixed; margin: -10px auto 10px; border-collapse: collapse; border-left: 1px solid #0077CC; border-spacing: 0; border-top: 1px solid #0077CC;}
.wpcf7 td { padding: 5px 0;}
.wpcf7 td.Item { padding: 5px 0 5px 5px; text-align: left; width: 130px; font-size: 90%; background-color: #F1F6FC; border-left: 1px solid #0077CC; border-bottom: 1px solid #0077CC; color: #000000;}

※忘れてました。
メールアドレスの再入力の確認は、ネットで探してきました。
原本のホームページにはPHPのソースが無いのでこの部分だけは他所からもってくるしかなかったです。

僕もこのPHPのソースをみても細かいところは分かりません（ざっくり、送信時に$POSTに入っている変数を比較しています）。もし動かなかったら他からまた探すか、デバッグ環境をPCに持ってきて色々動かさないといけません。なのでネットの皆さんに感謝です。

Contact Form 7側では、以下の項目を追加します。

[email* your-email]
[email* your-email-confirm]

functions.php

function wpcf7_text_validation_filter_extend( $result, $tag ) {
global $my_email_confirm;
$tag = new WPCF7_Shortcode( $tag );
$name = $tag->name;
$value = isset( $_POST[$name] )
? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) ): '';
if ($name == "your-email"){
$my_email_confirm=$value;
}
if ($name == "your-email-confirm" && $my_email_confirm != $value){
$result->invalidate( $tag,"確認用のメールアドレスが一致していません");
}
return $result;
}
add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_exte

Contact Form 7のフォームに確認用メールアドレスの項目を追加する方法

以上がメールフォームの説明です。

結論

結論から書くと、Lightningを使って100%似させる事はできませんでしたが、90%以上は似た状態でスマホ対応ができました。

10％の部分は、PC画面でのメニューのカスタマイズです。また、スマホ画面でのメニューのカスタマイズは基本的にできません。BootstrapのCSSをカスタマイズするのはハードルが高いです。

以上

Follow me!

0

カテゴリー: テクニック, レスポンシブ

月	火	水	木	金	土	日
« 7月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31