• 2014年6月25日

ホームページビルダー18 使い方 徹底解説! 【フルCSS/メール設定編】

ホームページビルダー18 使い方 徹底解説! 【フルCSS/メール設定編】

ホームページビルダー18 使い方 徹底解説! 【フルCSS/メール設定編】

640 430 パソコン生活サポート Pasonal

このホームページビルダー18の解説ページの記事を書き始めて間もないですが、結構な人が訪れてくれていました。

本当にありがたいことです。

 

 

【目次】

お願い

『ホームページビルダー20』、『メールフォームプロ』関連のご質問・ご相談は下記のコメントフォームにてお願いします

『メール』・『お電話』・『正規のお問合せフォーム』からのご質問・ご相談には応じておりません。

『丸投げ』『微調整などのトライ&エラー』『独自のカスタマイズ』も同様です。

また、いかなる損害に対しても『責任』を負いません

極力、ご相談には応じますが、時間があまりとれないためレスポンスは遅いです。

ご相談の際には以下の情報を必ず書き込んでください。

  • レンタルサーバー名の明記
  • サイトのリンク(http://は省いてください)
  • どの箇所で、どんな現象が起きているのか?

 

 

まずはこちらで動作をお試しください

mailform proを試すデモサイト

スポンサードリンク

 

動画でらくらく設定



 

ホームページビルダー18 にはメール送信機能がない!

実はホームページビルダー18(シリーズ全て)には、メール送信機能がありません。

あくまでメール入力フォームを提供しているだけですそこで、メール送信機能プログラムをサイトに組み込む必要があります。

メール送信機能プログラムを配布している代表的なサイトは「メールフォームプロ」「PHP工房」などです。両サイトとも、商用利用・私的利用ともに無料となっています。

今回は「メールフォームプロ」様のメール送信機能プログラムを使用して、お問い合わせページを完成させたいと思います。

 

設定前の確認事項 1

今回の記事は「フルCSSテンプレート」を対象とした記事です。

WordPressを選択した場合は、プラグイン等でメールフォームの設置を作成する必要があります。WordPressでのメールフォーム設置は、「NW WP Form の設定方法とカスタマイズ」の記事をご覧ください。

「NW WP Form」は、今非常に人気のメールフォームプラグインです。使いやすさ、機能性ともに非常に優れています。

是非、お試しください。

 

設定前の確認事項 2

作業前に、サーバーが「cgi」「sendmail」に対応しているか確認する必要があります。大抵のサーバーは対応しているはずです。

無料サーバー、または下記以外のその他のサーバーを利用している方は要注意です。対応していない可能性が高いからです。

必ず公式サイトにて対応しているかをご確認ください。

以下に代表てきなレンタルサーバーの対応表を記載します。

サーバー名 cgi 対応 sendmail対応
ロリポップ!
さくらのレンタルサーバ
エックスサーバー
お名前.com レンタルサーバー

上記のレンタルサーバーは「cgi」「sendmail」ともに動作するので問題ありません。

 

プロバイダー(OCN、CCNなど)を使用している場合、設置はほぼ無理です!

上記のレンタルサーバーと契約する必要があります。

 

CGIが動作するレンタルサーバー

レンタルサーバーは各社色々あります。

どれを選んでいいのかわからない方は、下記の情報を参考にしてください。

 

関連する記事

 

Xサーバー

とにかく速い!月額1,000円と他社よりは割高だが、使いやすさ・サポート・表示動作スピートはピカイチでしょう。月額料金は、アフリエイト等をしていれば、すぐにペイ(回収)できます。「大容量・高スピード・安定性」が特徴です。このサイトや、他のサイトもこのXサーバーで運営しています。

私がレンタルしているプランは「X10」というプランです。ドメインを使い分ければ、WordPressで複数のサイトを運営できるのも強みです。長年使用していますが、これといったトラブルもなく使えるのもGood!

一番お勧めのサーバーです。

公式サイト:http://www.xserver.ne.jp/

プラン名 月額 容量 特徴
X10 1,000円 200G~ もっともスタンダードなプラン
X20 2,000円 300G~ とにかく大容量!プレゼント制度アリ
X30 4,000円 400G~ 複数運営するならこのプラン

 

さくらサーバー

月額500円からサーバーをレンタルできます。サポート・使いやすさ・安定性は標準レベルでしょう。

一番人気のプランは「さくらのレンタルサーバ スタンダード」になります。Xサーバーに比べ、表示スピードは遅くなりますが、手頃に始めるには良いサーバーだと思います。

それでも、以前根強い人気があるレンタルサーバーといえるでしょう。

公式サイト:http://www.sakura.ne.jp/

プラン名 月額 容量 特徴
ライト 129円 10G~ お手軽に始めたいならこのプラン
スタンダード 515円 100G~ 人気No.1のお得プラン
プレミアム 1,543円 200G~ 動画・多くの画像を使い人向けプラン
ビジネス 2,571円 300G~ 複数サイトを運営したいなどのビジネス向けプラン
プロ 4,628円 500G~ 大容量・セキュリティ重視するビジネス向けプラン

 

ロリポップサーバー

とにかく月額料金が安い!最も安いプランでは月額100円からレンタルできます。

一番人気なのは「チカッパプラン 詳細はこちら」でしょう。ワンランクしたのプランなら、「ロリポプラン 詳細はこちら」を選ぶといいでしょう。

とにかく値段が一番!という方はこちらのサーバーを選択しましょう。

公式サイト:ロリポップ!

プラン名 月額 容量 特徴
コロリポ 100円 10G~ お試し向けの初心者プラン
ロリポ 250円 50G~ 手軽に始めたい初心者向けプラン
チカッパ 500円 120G~ 一番人気のお得なプラン
ビジネス 2,000円 400G~ ビジネスに特化したプラン

 

お名前.comサーバー

月額900円から使用できます。

WordPressに特化した専用のプランもあるため、近年上昇傾向にあるレンタルサーバーです。プランは「複数ドメインの一括運用なら【お名前.com 共用サーバー SD】月額900円(税抜)~」がお得です。

公式サイト:お名前.com レンタルサーバー

プラン名 月額 容量 特徴
共有サーバー 900円 200G~ もっともスタンダードなプラン
WordPress 900円 10G~ とにかく高速!万全のセキュリティ!
VPS(KVM) 896円 100G~ ITエンジニア(開発者)向けのプラン
メールマーケティング 980円 980G~ メールの配信機能に特化したプラン

 

メールフォームプロのダウンロード

メールフォームプロ」のサイトからファイルをダウンロードします。

「無料ダウンロード(Free download)」の大きなボタンをクリックしてください。

(※ページの上部にある「ダウンロード」のリンクをクリックすると、ダウンロードができる箇所に移動できます。)

メールフォームプロ

 

 

FFFTPの設定

FFFTP等でファイルをアップロードする場合、ちょっとした設定が必要になります。

ファイルの属性と種類をあらかじめ設定しておく必要があります。

こうすることで、cgi の設置が格段にスムーズになります。

 

簡単手順
  1. FFFTP起動 > オブション > 環境設定 > 転送3タブ > 追加ボタン > ファイル名と属性を入力
  2. ファイル名「*.cgi」 属性 「755」と入力

 

1.FFFTP起動 > オブション > 環境設定を選択

FFFTP オプション

 

2.環境設定 > 転送3タブ > 追加ボタン > ファイル名と属性を入力

cgi と phpの追加

*.cgi 755」と入力してOKを押してください。

 

ホームページビルダー18でメールフォーム設置

まずは、ホームページビルダー18でお問い合わせフォームを設置していきます。

下記の簡単手順をご覧くさだい。

 

簡単手順

  1. 上部メニュー「サイトの確認」 > cotntact.html(お問い合わせページ)を開く
  2. 入力フォームを挿入したい箇所を選択(文章がすでにある場合は、文章を削除しておく)
  3. 左側メニュー「レイアウト部品の挿入」 > 素材集から > スタイリッシュエフェクト部品 > 特定用途向け > お問い合わせ
  4. 入力フォームを編集する
  5. 開くボタンをクリック

 

手順1~2 contact.htmlファイルを開く

contact.htmlを開き、余分な文章を削除

まずは、上部の「サイトの確認」をクリックし、お問い合わせフォームを設置する「contact.html」を開きます。見出しの下にある、文章はあらかじめ全て削除しておきます。

 

手順3~4 お問い合わせフォームの設置と項目の編集

お問い合わせフォームの挿入

左側メニュー「レイアウト部品の挿入」 > 素材集から > スタイリッシュエフェクト部品 > 特定用途向け > 「お問い合わせ」を挿入します。

挿入できたら、入力フォームを追加・編集していきます。

※すでにcontactus.htmlページにメールフォームが設置されている場合は不要です
▼▼▼▼▼▼▼▼▼▼▼▼▼▼ここからの項目の修正は任意です▼▼▼▼▼▼▼▼▼▼▼▼▼

最低限必要な項目

業種によって入力フォームの内容は違ってきますが、最低限必要な項目を下記に記載しました。

  • メールアドレス
  • 氏名(漢字)
  • 氏名(フリガナ)
  • 件名
  • お問い合わせ内容

 

入力フォームの追加と編集の方法(任意)

お問い合わせフォームを設置した直後の、既存の項目を編集する場合は、「名前」や「電話番号」などの項目名を変更してください。

 

新しく行を追加したい場合は…

挿入したい行を選択 > 右クリック > 行 > 行を追加(下へ)

 

「挿入したい行を選択」 > 「右クリック」 > 「行」 >「 行を追加(下へ)」からを選択してください。

 

入力フォームを挿入したい場合は…

新しい入力フォームの設置

 

設置したい場所でクリックをすると、下記のようなウィンドウがすぐ近くに出現します。

だいたい使用するであろう入力フォームは以下の項目です。

  • 「送信ボタン」
  • 「リセットボタン」
  • 「ラジオボタン」
  • 「チェックボックス」
  • 「一行テキスト」
  • 「プルダウン」

ぐらいだと思います。(そんなにたくさん使うことはないと思いますが…)

その他の入力フォームは説明を省きます。
それぞれの入力フォームは設置する際に、「値を設定」しなくてはいけません。

 

ラジオボタンを設置する方法(任意)

メールフォーム ラジオボタンの設置

ラジオボタンは大抵の場合、「2者択一の選択方法」です。例えば、「性別 ●女性 ○男性」といった感じです。複数の項目から一つしか選択させないようにするのがラジオボタンです。

  1. 入力部品ウィンドウ > ラジオボタンを選択
  2. グループ名:「性別」とします。
  3. 選択値:「男性」とします。
  4. 初期状態:選択 入力不可 にチェックします。
  5. OKをクリック
  6. 表にラジオボタンが追加される
  7. 追加されたラジオボタンの後ろ側をクリックし、「男性」の文字を入力
  8. 再び入力部品から「ラジオボタン」を選択する
  9. グループ名:▼をクリックし、1で入力した「性別」にする
  10. 選択値:「女性」とします。
  11. 初期状態:入力不可 のみにチェックします。
  12. 「同じ名前が入力されていますが、よろしいですか?」 → はい をクリック
  13. 追加されたラジオボタンの後ろ側をクリックし、「女性」の文字を入力
  14. 上部メニュー「ブラウザで確認」 > IEから、正確に動作することを確認してください。

(※成功していれば、男性 or 女性のどちらかしか選択できない状態のハズです。)

 

プルダウンメニュー(オブションメニュー)を設置する方法(任意)

プルダウンメニュー

プルダウンメニューは、「多くの選択肢の中から、どれか一つの項目を選択させる」方法です。例えば、職業などで「自営業、IT関係、教育関係…」や、年月日などで「○○○○年▼ ○○月▼ ○○日▼」などです。

  1. 入力部品ウィンドウ > プルダウン(オブション)メニューを選択
  2. 名前:
  3. 項目:1950
  4. 値:1950年
  5. 登録をクリック
  6. 2に戻り必要なだけ登録を繰り返す。
  7. 上部メニュー「ブラウザで確認」 > IEから、正確に動作することを確認してください。

 

チェックボックスを設置する方法(任意)

チェックボックスの設置

チェックボックスは「複数の選択肢の中から、複数の項目を選択させる」方法です。例えば、ご希望の資料を選択してください。 「□申込用紙 □通販パンフレット □ご案内資料」などです。

  1. 入力部品ウィンドウ > チェックボックスを選択
  2. 名前:申込用紙
  3. 値:申込用紙
  4. 初期状態:入力不可 のみチェック
  5. OKをクリック
  6. 追加されたチェックボックスの後ろに「申込用紙」の文字を入力
  7. 1から必要な項目だけ繰り返す
  8. 上部メニュー「ブラウザで確認」 > IEから、正確に動作することを確認してください。

 

一行テキストを設置する方法(任意)

テキスト入力フォームの設置

 

一行テキストはごく普通の入力フォームです。

例:氏名、住所、郵便番号など、ユーザー自身に直接入力してもらうために設置します。

  1. 入力部品ウィンドウ > テキストボックスを選択
  2. 名前:氏名
  3. カラム数:入力フォームの長さ(だいたい30~40ぐらいでOK)
  4. 最大入力文字数:入力できる制限値(名前なら20ぐらい、郵便番号なら桁が決まっているので、3~4桁程度)
  5. 入力必須:チェックを入れると、何かを入力するまで送信できない
  6. OKをクリック

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲項目修正ここまで▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

 

thanks.htmlページを作成

お問い合わせ完了後(メール送信後)の「thnaks(サンクス)」ページを作成します。

  1. 上部メニュー「サイトの確認」画面にしてから、画面内で右クリック
  2. 新規ページの追加をクリック
  3. 新規ページのファイル名を「thanks.html」に変更する
  4. OKをクリック
  5. フルCSSテンプレートを選択
  6. 現在作業中のテーマを選択する
  7. 上部メニュー「サイトの確認」にし、「thanks.html」が追加されているか確認する
  8. 本文中の見出し(サブタイトル)に「お問い合わせ完了」の見出しを入れる
  9. thanks.htmlページを開き、お問い合わせ完了メッセージを入れ、保存する

 

お問い合わせ完了メッセージの雛形 -1

thanks.htmlページの作成

 

thnaks.html ページを確認する

 

お問い合わせの見出しとメッセージ

 

 

お問い合わせ完了メッセージの雛形 -2

上記のお問い合わせ完了メッセージの雛形を参考にしてください。

 

 

thanks.htmlのファイルをサーバーにアップロードする

FFFTP 又は ホームページビルダー18側から作成した「thnaks.html」のページをアップロードします。

アップロードする場所は「index.html(トップページ)」と同じ場所です。

 

 

cgiの動作チェック

「設定前の準備1」でダウンロードしたmailformproをFFFTP等でサーバーにアップロードします。

基本的には、mailformproの設定方法のPDF手順を参考にしていただければ、簡単にできます。

 

サーバーアップロードまでの手順

mailformpro4.1.5 成功画面

  1. mailformpro4.1.5.zipファイルを解凍し、ファイル名を「mail」に変更する。
  2. FFFTPなどで、サーバーにアクセスします。
  3. サーバーの「index.html」等のファイルがある階層に、1の「mail」フォルダをアップロードする。
  4. http://ドメイン名/mail/example.html 」にアクセスする(ブラウザのURL入力欄にURLを入力)
  5. 成功すれば、「mailformpro.cgiは正常に動作しています」が表示される。

必ず下記の画像の「赤い帯」が表示されることを確認してください!

 

config.cgi をTeraPadで編集

mail / mailformpro / config.cgi

 

「mail / mailformpro」フォルダの中に「config.cgi」があります。

config.cgiをTeraPad等のテキストエディタで開きます。間違っても、windowsテキストエディタやDreamWeverなどでは開かないでください

必ず、TeraPadで開くようにしてください。

(※TeraPadで開かないとCGIが上手く動作しません)

 

config.cgiの設定を編集する

config.cgiの名前の設定

※1…以下を参照してください。
上記のようにconfig.cgiを編集したら、「mail/mailformpro/」の中に上書きします。

config.cgiをアップロード

 

  • 12行目:フォームの送信先 「自分のメールアドレス
  • 15行目:自動返信メールの差出人名 「サイト名
  • 33行目:サンクスページのURL 「http://ドメイン名/thanks.html
  • 68行目:先頭の#を削除する
  • 70~71行目:「<_姓_> 様」を「<_名前_> 様」に変更 ※1
  • 140行目付近:「push @AddOns,’OperationCheck.js’」の先頭に#を付けて、コメントアウト
  • 140行目付近:「push @AddOns,’charactercheck.js’」の先頭の#を削除
  • 140行目付近:「push @AddOns,’prefcode/prefcode.js’」の先頭の#を削除
  • 140行目付近:「push @AddOns,’furigana.js’」の先頭の#を削除
  • 140行目付近:「push @AddOns,’phase.js’」の先頭に#を付けて、コメントアウト
  • 168行目付近:「push @Modules,’check’;## CGI動作環境チェック」の先頭に#を付けて、コメントアウト

 

Charasetの変更と<link>の追加

mailformproを使用するために、ページのcharaset(キャラセット)を変更する必要があります。hpb18のメールフォームがあるページのキャラセットを「charaset=UTF-8」にしないと、エラーになります。

  1. メールフォームがあるページを開く
  2. HTMLソースタブに切り替える。
  3. 「Shift_JIS」の文字を削除し、「UTF-8」に書き換える
  4. <head>内に「<link rel=”stylesheet” href=”mail/mfp.statics/mailformpro.css” type=”text/css” />」を付ける
  5. ページを上書き保存する。

 

ソースコード

HTMLソースに切り替え、charasetをUTF-8にする

 

 

お問い合わせページのHTMLコードを修正する

お問い合わせページのHTMLコードを修正します。お問い合わせページをHTMLソースタブに変更してください。まず、「contactus.html」等のページを開き、<form>タグを以下のように修正します。

<form id=”mailformpro method=”POST“>

※idが無い場合は記述してください)

必須の箇所(名前やお問い合わせ内容など)の場合は、以下のように修正します。name=”xxxxx”となっている箇所を、その入力フォームに合わせた名称にします。名前の入力フォームなら「お名前」、住所の入力フォームなら「住所」としてください。

 

2014/11/20追記  (必須の追加)

required=”required”」を<input>タグの終わりに付け加えてください。

<input type=”text” name=”XXX”  class=”m” required=”required”>

※requiredは「必須」という意味です。requiredは必須の欄に付けてください

 

2014/11/24追記  (名前 ⇒ フリガナ自動入力の追加)

<input type=”text” name=”name” class=”m” data-kana=”フリガナ” required=”required”>

(※「data-kana」を追加し、上記のように「フリガナ」とする)

 

2014/11/24追記  (フリガナ入力欄)

<input type=”text” name=”フリガナ” class=”m” required=”required”>

(※name属性を「フリガナ」に変更する)

 

2014/11/24追記  (メールアドレス入力チェック)

<input type=”text” name=”email” class=”l” data-type=”email” required=”required”>

  • (※name属性を必ず「email」に変更する)
  • (※「data-type」を追加し、上記のように「email」とする)

 

2014/11/24追記  (郵便番号⇒住所変換の追加)

<input type=”text” name=”郵便番号” size=”10″ maxlength=”7″ data-charcheck=”digit” data-address=”住所,住所,住所”>

(※「data-charcheck」と「data-address」を上記のようにする)

 

2014/11/24追記  (電話番号(数字のみ)の追加)

<input type=”text” name=”電話番号” size=”15″ required=”required” data-charcheck=”digit”>

(※「data-charcheck」を上記のようにする)

最後の</form>の後に、下記のコードを挿入します。

<script type=”text/javascript” id=”mfpjs” src=”mail/mailformpro/mailformpro.cgi”></script>

必ず忘れずにつけてください。

 

下記のコードを参考にしてください

 

サイトから動作確認をする

最後に「http://ドメイン名/お問い合わせページの名(contact.htmlなど)」にアクセスしてください。

※ホームページビルダーからブラウザーを確認しても動作しません

実際に動作確認を行い、「登録したメールにメールが届くか」と「管理者宛にメールが届くか」を検証します。

もし、メールが送信されなければ、どこかの設定箇所が間違っていることになります。

もう一度はじめから確認してください。

 

こんな時どうすればいいの?!

メールを設置していると「思わぬトラブル」や「これをしたい・あれをしたい」ということが色々出てきます。ここでは一部ですが、事例をご紹介します。

 

自動送信メールが来ない?!

まずは、初めからじっくりとこのページとメールフォームプロの説明書(PDF)を見直してみましょう。

「何かを間違えて入力しませんでしたか?」「何かを設定し忘れていませんか?」 CGIは、ほんの少しのミスで動かなかったりします。色々ごちゃごちゃしすぎて、それでも正常に動作しない場合、初めからもう一度設定してみましょう!

高確率ですんなり動作するでしょう。

 

正常に動作しない原因の一覧
  • secdmailのパス
  • Perlのパス
  • フォーム送信のメールアドレスの間違い
  • CGIをTeraPad以外で開いて編集してしまった
  • サンクスページのパスの間違い
  • CGIのパーミッションが違う
  • メールフォームがあるHTMLに必要な項目を付けていない
  • コードの記述ミス

 

確認ボタンがメールフォームの上部に表示される

「確認画面」などのボタンが表示されている場合、下記のコード(命令)をコメントアウトしましょう。

コメントアウトはコードの前に「#(シャープ)」を付けることで出来ます。

config.cgiの144~145行目あたりにある下記のコードをコメントアウト

#push @AddOns,’phase.js’; ## 段階的入力機能

 

なぜか管理者に自動送信メールが2通くるんだけど?

設定した管理者宛にメールが2通来る場合は、config.cgiのある箇所をコメントアウトしていないからです。

下記の場所のコードをコメントアウトしましょう。

20~21行目にあるはずです。

コメントアウトする場合は先頭に「#」をつけましょう!
## 念のためBCC送信宛先 (解除する場合は下記1行をコメントアウト)
#$config{‘bcc’} = $mailto[0];

 

管理者宛メールの環境変数を消したい

メールフォームプロの自動返信メールは「相手」と「管理者」の両方にメールが送信されたことを知らせてくれます。管理者宛てのメールには下記のように環境変数がメールに表示されています。

この環境変数を消すことができます。

  • [ 送信日時 ] 2014-12-07 23:30:40
  • [ 通し番号 ] 201412070052
  • [ ページビュー ] 3 Page View
  • [ ユニークユーザ ] 561 User
  • [ コンバージョンレート ] 9.27%
  • [ ドロップ数 ] 60
  • [ ドロップ率 ] 10.70%
  • [ 入力時間 ] 00:14:00

 

config.cgi の 44 ~ 53行目に以下のようなコードがあります。必要なしの個所を直接削除するだけでOKです。該当箇所の項目は、必要のない人がほとんどだと思います。

  • 必ずTeraPadで使用して、編集してください
  • ※いつでも元に戻せるようにバックアップを取ってから編集作業をしましょう
  • <_mfp_jssemantics_> ← [ 正常に動作しましたの文字 ] 必要なし
  • <_mfp_date_> お問い合せフォームより以下のメールを受付ました。
    ──────────────────────────
  • 受付番号:<_mfp_serial_>
  • 入力時間:<_mfp_input_time_> ← 必要なし
  • 確認時間:<_mfp_confirm_time_> ← 必要なし
  • 送信元:<_mfp_referrer_> ← 必要なし
  • 支払金額:<_mfp_cartprice_> ← 必要なし
  • <_resbody_>
  • ──────────────────────────
  • <_mfp_env_> ← [ 環境変数 ] 必要なし

 

プロバイダーのレンタルサーバーについて

プロバイダー(OCN、ぷらら、so-net、BIGLOBEなど)のレンタルサーバーだと設置できません。

メールフォームプロに限らず、そのほかのCGIやPHPで動くプログラムも同様に設置できない可能性が高いです。

この場合、CGIが動作するサーバーをレンタルする必要があります。

素直にレンタルサーバーを契約しましょう!

特集記事
フィルター
Post Page
徹底解説 ホームページビルダー ホームページビルダー18
ソート
hpb18 × CSS3

ホームページビルダー18 使い方 徹底解説! 【CSS3編 Vol.1】

今回はホームページビルダーのサイトにCSS3を組み込んで、サイトの質をアップさせたいと思います。ちょっとしたアクセントを加えるだけで、サイトが見違えるように面白くなります。「CSS3なんてわからない!」という方でも、わかりやすく解説しているのでご安心を! スポンサードリンク
2015-05-13

18

ホームページビルダー18 スマートフォンページの作成

ホームページビルダー18 スマートフォンページの作成

今回はホームページビルダー18(以下、hpb18)でスマートフォンのページを楽々作成しちゃいましょう。手順もさほど複雑ではなく、簡単な流れで作ることができます。 スポンサードリンク
2014-12-17

18

ホームページビルダー18

ホームページビルダー18 こんな時どうしたらいいの?

ホームページビルダー18(以下、hpb18)でホームページを作成。いざ作ってみると、「画像を横に並べたいんだけど…」「間ってどうやってあけるの?」など、問題が発生します。 今回の記事は、hpb18における、初心者お役立ち操作を書きたいと思います。  
2014-11-07

18

ホームページビルダー18

ホームページビルダー18 使い方 徹底解説! 【トラブル解決編】

ホームページビルダー18 トラブル解決集! いざホームページを作ろうと思っても、専門的な知識がなければ作成は難しいものです。今回は、ホームページビルダーの「エラー」「疑問」「トラブル」等を事例を交えて紹介していきたいと思います。 スポンサードリンク
2014-06-06

18

ホームページビルダー18

ホームページビルダー18 使い方 徹底解説! 【フルCSS/応用編】

フルCSSテンプレートに様々な機能を付け加えます。 必須ではないですが、サイトをよりリッチにするためにも、動的な動きがあるサイトは重要です。 ホームページビルダー18では簡単に実現できる機能がそろっているので、ぜひ活用しましょう!  
2014-04-16

18

ホームページビルダー18 使い方 徹底解説! 【転送設定 編】

ホームページビルダー18 使い方 徹底解説! 【転送設定 編】

ホームページビルダー(以下、hpb)を使用する方は、初心者の方が多いと思います。 hpbは簡単に設定できるとはいえ、意外に転送設定などは難しいものです。今回はおさらいもかねて解説していきたいと思います。 スポンサードリンク
2014-02-25

18

ホームページビルダー18 使い方 徹底解説! 【フルCSS/セットアップ編】

ホームページビルダー18 使い方 徹底解説! 【フルCSS/セットアップ編】

前回はホームページビルダー18の準備編をご紹介しました。 今回はフルCSSテンプレート編のセットアップとフルCSSテンプレートの編集をご紹介します。 スポンサードリンク
2013-11-20

18

ホームページビルダー18

ホームページビルダー18 使い方 徹底解説! 【準備編】

ホームページビルダーとはHTML+CSSのウェブページが簡単に作成できるソフトです。シリーズ累計1,000万本を誇る人気ソフトでもあります。初心者から上級者まで幅広く使えるのが特徴です。 さらにホームページビルダー18からは「jQuery フォトモーション(画像スライダー)」や「プレミアムテンプレートオンラインストア(Wo
2013-11-08

18

56 コメント
  • 佐々木 2014年11月15日 at 12:27 PM

    こんにちは、
    色々と情報を提供していただきありがとうございます。
    今回、契約しているプロバイダ(plala)が提供するメール転送サービスのサービスが終了してしまったので使用させていただきたいと思っていました。実際設定してみたのですがうまく動きません。原因は、ホームページをアップするサーバーとCGIを動かすサーバーが別に設けてあるためだと思っているのですが、設定の仕方が分かりません。
    ホームページをアップしているサーバーには、ホームページを。そこでは、CGIは動かないようなので、CGIは、別に登録したサーバーの領域にアップしています。
    プログラムが詳しくないのでどこを修正したらいいかわかりません。是非、ご教授ください。
    よろしくお願いいたします。

    • Pasonal 2014年11月15日 at 7:42 PM

      それぞれ別サーバーを使用しているということですか?

      文章からだけでは状況が把握しずらいですね・・・。
      推測ですが、下記のような感じですか?

      サーバーA(CGI動作×) → HTMLファイル群
      サーバーB(CGI動作OK) → メールフォームがついたHTMLファイル

      サーバーAのホームページからサーバーBにあるお問い合わせページを呼び出す。
      と、いうことですか・・・??

      ========================================
      メールフォームプロは必ずメールフォームが付けれられているhtmlファイルと同じサーバー、同じ階層に設置する必要があります。
      CGIが動作するサーバーに対象HTMLファイルを移行し、設置してみてください。
      ========================================

      下記の情報をもう少し詳細に明記していただくと、お答えしやすいと思います。

      ・レンタルしているサーバー名
      ・どこまで設定が完了していますか?
      ・どこでエラーが発生していますか?

      • 佐々木 2014年11月19日 at 3:35 AM

        早速、ご回答いただきありがとうございます。
        うまく説明できないかもしれませんが、説明させてください。
        レンタルしているサーバーは、契約しているプロバイダー(plala)にホームページを開設できるサービスがあるのでそこのサーバーを使用しています。そこに、ホームページをアップロードしています。
        そこの、サーバーは、CGIを動作させることが出来ないサーバーです。その他に、同、プロバイダーでCGIを動かせるサーバーも無料で借りれるのでそこにメールフォームプロをアップロードしています。
        ご説明にもある通り、ホームページとメールフォームプロを同じサーバーにアップロードしなければならないとのことなのでそこがエラーの原因かと思います。CGIが動くサーバーにホームページとCGIをすべてアップロードすれば解決するのでしょうか。それが可能かも分かりません。以前は、plalaが提供しているメールフォームを使用していましたが、問題なく動作していました。できれば、ホームページは、以前と同じところにアップしたいと考えています。
        良い方法はありますでしょうか。
        すいません。プログラム関係は、得意ではないので、説明がとんちんかんかもしれません。
        どうか、お力をお貸しください。よろしくお願いいたします。

        • Pasonal 2014年11月19日 at 11:35 AM

          ご事情は何となくわかりました。
          ぷららのホームペジ開設のページを見てみたのですが、確かに通常の「プライベートホームページサービス」では、CGIに対応していませんね。
          また、同レンタルサーバーのオプションで「ユーザCGIサーバ」というものがり、おそらくCGIが動くサーバーとはこちらの事をおっしゃっているのだと思います。
          「ユーザCGIサーバ」の詳細を確認したところ、sendmailに対応しているので、おそらくメールフォームプロでも動作すると思われます。
          (※動作未確認なので、推測ですが・・・)

          >【できれば、ホームページは、以前と同じところにアップしたいと考えています】
          ぷららの公式ホームページを見ると、「ユーザCGIサーバ」のサーバ名が「http://cgixxxplala.or.jp」となっていることから、
          おそらく別の領域(サーバー)になっているのではないかと推測します・・・。

          なので、下記のようにすれば多分可能かと思います。

          「プライベートホームページサービス」の領域に「index.htmlなどのホームページファイル群(contactus.htmlを除いたファイル)」
          「ユーザCGIサーバ」の領域に「contactus.html(お問い合わせページ)とメールフォームプロ」

          で、いけるのではないでしょうか?

          【こんな感じ】
          「プライベートホームページサービス」の領域にホームページのグローバルメニューに「TOP」「商品」「会社概要」「お問い合わせ」などを
          付ける。
              ↓
          「お問い合わせ」をクリックすると・・・
              ↓
          「ユーザCGIサーバ」の領域のcontactus.html(お問い合わせページ)が表示される。
              ↓
          メールの送信

  • 佐々木 2014年11月20日 at 3:13 AM

    早速のご回答ありがとうございます。
    説明が分かりづらくてすみませんでした。私がやっていることは、推測された内容そのものです。
    ご提案頂いた内容を理解したつもりなので、時間が出来たときにやってみます。
    親切にご回答いただきまして大変感謝しております。ありがとうございました。
    もし、ダメだった場合は、また相談させてください。
    メール送信サービスが、ホームページにあるとすごく便利です。
    早くセットアップして、使えるようにしたいと思います。

    • Pasonal 2014年11月20日 at 1:00 PM

      メール設置はかなり多くの方からお問い合わせをいただいております。
      近々、メール設置の分かりやすい解説動画等も配信する予定なので、機会あれば、またお越しください。
      お待ちしております。
      でわ!

  • 佐々木 2014年12月7日 at 1:25 PM

    最終的な、動作は、送信ボタンを押すと、クリアを押したときと同じように、文面が消えてしまいます。
    もちろん、メールも送られてきません。thanksベージ(thanksページは、プライベートホームページ(index.html)と同じところにアップしました。にも移行しません。どうしてなのでしょう?

    問題は、お問い合わせページのHTMLの設定のせいでしょうか、それとも、アクセス権???
    下記に、お問い合わせページのHTMLを貼り付けました。ご確認いただければ幸いです。
    私のホームページも念のためURLの欄に記載しましたので、もし可能でしたらご確認ください。
    そろそろ、この作業を完結したいと思っています。
    よろしくお願いいたします。

    • Pasonal 2014年12月7日 at 5:09 PM

      >thanksベージ(thanksページは、プライベートホームページ(index.html)と同じところにアップしました。
      thanksページが表示されないのは、CGIのthanksページのパスが間違っている可能性があります。
      ユーザーCGIのサーバードメイン名ではなく、プライベートホームページのドメイン名となります。
      一度パスを確認してみてください。

      >Permissionについて
      CGIのPermission(アクセス権)については、FTPで転送された際に、604(-rw—-r–)となります…
      ぷららのレンタルサーバーがどのようなファイル構成となっているかわかりませんが、CGIファイルをサーバーに
      アップロードする際には、755にする必要があります。
      (通常、レンタルサーバーのパーミッションはデフォルトのままで問題ないはずです。)

      このページの手順3「FFFTPの設定」に記載されている通り、FFFTPにて属性を指定してアップロードしてください。
      (※ホームページビルダー等のFTP機能は使わないでください。これでCGI等をアップロードすると思わぬ不具合が出る可能性があります)

      FFFTPを使用してメールフォームプロをユーザーCGIの領域にアップロードしたら、
      「http://ユーザーcgiドメイン名/mail/example.html」にアクセスして、CGIが正常に動作するかを確認してくだい。

      この時点で正常に動作しないようなら、自動返信メールは動きません。

      >htmlと同じ階層にmailのフォルダごとアップロードでいいのですか?
      contactus.html(お問い合わせページ)と同じ場所に、メールフォームプロ(mailフォルダ)をアップロードしてください。

      >私のホームページも念のためURLの欄に記載しましたので、もし可能でしたらご確認ください…
      URLの記載が見つからなかったため、拝見できませんでした・・・。
      お手数ですが、再度URLを記載していただくか、「[email protected]

  • 伊藤 2014年12月19日 at 9:37 PM

    お世話になります。
    こちらのページ、かなり参考になりました。
    ありがとうございます。

    一点お伺いしたいのですが、問い合わせがあった時に管理者に届くメールの内容として
    受付時間や入力時間、確認時間、支払い金額などは必要でなく
    入力した方の名前やメールアドレス、その他の情報が全て欲しいと考えているのですが
    これはcgiの44行付近のmfp〜を自分で入力しないと行けないでしょうか?

    それとも、デフォルトの状態で入力項目が全て分かるようなメールが管理者に届きますか?

    ご教授宜しくお願い申し上げます。

  • なかにゃん 2015年1月24日 at 9:15 PM

    管理者 様

    初めまして。

    今回初めてホームページのメールフォームを作る事になり、検索で此方のページを見つけて
    大変勉強になりました。有難うございます。

    さて1つ判れば教えて頂きたい事がございます。

    当方エックスサーバとロリポップの2つのサーバを利用しています。

    双方のサーバに此方の記事を参考にさせて頂いてCGIを組み込んでみました。

    そうしたところ、ロリポップの方は問合せした人と差出人宛にメールが届くのですが、
    エックスサーバの方がメールが送信されないのです。

    共にサーバに合ったパーミション設定はしているつもりで、両方ともサンクスページの表示
    までは同じ様に行くのですが…

    エックスサーバに届かない原因は、やはりパーミション設定に問題があるのでしょうか?

    ご指導頂けましたら幸いです。

    • なかにゃん 2015年1月25日 at 4:20 PM

      管理者 様

      お世話になっております。昨日、下記引用の問合せを投げたものです。

      問合せの件、自己解決致しました。

      結論としては、エックスサーバのメール機能が有効になっていなかった為でした。

      大変お騒がせ致しました。

      問合せ取下げさせて下さい。

      なかにゃん :
      このコメントは管理者の承認を待っています。
      管理者 様
      初めまして。
      今回初めてホームページのメールフォームを作る事になり、検索で此方のページを見つけて
      大変勉強になりました。有難うございます。
      さて1つ判れば教えて頂きたい事がございます。
      当方エックスサーバとロリポップの2つのサーバを利用しています。
      双方のサーバに此方の記事を参考にさせて頂いてCGIを組み込んでみました。
      そうしたところ、ロリポップの方は問合せした人と差出人宛にメールが届くのですが、
      エックスサーバの方がメールが送信されないのです。
      共にサーバに合ったパーミション設定はしているつもりで、両方ともサンクスページの表示
      までは同じ様に行くのですが…
      エックスサーバに届かない原因は、やはりパーミション設定に問題があるのでしょうか?
      ご指導頂けましたら幸いです。

  • ちくたく 2015年4月11日 at 3:37 PM

    管理者様

    この度はお世話になります。
    早速ですが、「CGIの動作チェック」でつまずいています。

    環境
    ・PC WIN7PRO 64BIT
     
    ・KDDI ホスティング G120

    ・sendmailは利用可となっています。(パスは’c:\sendm\sendmane.exe’)

    ・CGIも利用可となっています。CGIパスについて次のような説明があります。
      (IISにて提供しております、CGI (Active Perl) /SSI/PHP ではパスが存在しておりません。
       基本的には、サーバ上にファイルをアップロードすることで動作が可能です。)

    手順に沿って作業を進めて行くと、「CGIの動作チェック」でsample.htmlは表示されますが、「mailformpro.cgiは正常に動作しています」は表示されません。

    IISとの組み合わせでは、特別な設定が必要なのでしょうか?

    ご教示いただけると大変助かります。
    よろしくお願いいたします。

    • Pasonal 2015年4月13日 at 1:27 PM

      お返事遅くなり、大変申し訳ございません。

      CGIが利用可能であれば、問題ないはずですが・・・。
      IISにて正常に動作するかどうかは、こちらでは分かりかねます。
      mailformproも万能ではないため、レンタルサーバーによっては動かないケースもあります。

      【解決する手段】
      1.アップロードの際のパーミッションを確認してみる。
      2.他のCGIが動作するかどうかを確認してみる。
      3.mailformproの取り扱い説明書(PDF)を参照してみる
      4.mailformproのサポートページから、過去スレッドを閲覧してみる
      5.mailformproの制作者に直接問い合わせてみる
      6.php工房など、他のメールフォームで試してみる

      mailformproのサポートから制作者様にお問い合わせいただくことで、何かわかるかもしれません。
      ただ、レスポンスは遅いので、1~2週間ほど待つ必要があります。

      【mailformproサポートページ】
      http://www.synck.com/contents/faq/

      • ちくたく 2015年4月13日 at 4:33 PM

        管理者様

        ご回答ありがとうございます。

        いろいろと試した結果、解決致しました。

        ウェブサイト毎に、「ActivePerl」の「On/Off」スイッチがあり、「On」にしてcgiが動作致しました。

        本当にありがとうございました。

  • 初心者君 2015年5月12日 at 2:06 PM

    ホームページ作りに、いろいろ参照しており大変役立って感謝しております(ありがとうございます)

    お問合せメール作成でいろいろ行いましたがメール送信出来ずメール致します(ご指導宜しくお願い致します)
    まず、起動テストにて http://ドメイン名/mail/example.htmlにアクセスするとページは表示はされますが、
    表示の中に赤の部分”mailformpro.cgiは正常に動作してます。”の部分が表示されません?。
    この状態で、テストとしてHP設定後メール送信を数回行い受信出来たのですが、再設定したところ何度行って
    も送信されず。IE11側に”ページが見つかりません”で終わります?
    PC上の、HP作成中側に記述し<scrp
    t…を記述すると赤く(エラー)になるようになり原因不明(PC上の為、だろうと思い)UPして降ります。
    mailformpro(config.cgiファイル)はホームページを参照し修正をしております。
    sendomail(パスそのまま)・フォームの送信先の変更・差出人名・サンクスの相対パス…など変更しています。
    尚、config.cgi

    • Pasonal 2015年5月12日 at 6:07 PM

      「mailformpro.cgiは正常に動作してます」が表示されないとなると、cgiは正常に機能していないものと推測できます。
      お手数ですが、レンタルサーバーはどちらでしょうか?

      • 初心者君 2015年5月13日 at 9:14 AM

        お手数おかけします、ありがとうございます。宜しくお願いいたします。

        サーバーはwww.synapse.ne.jpとなって降ります。

        • Pasonal 2015年5月13日 at 2:09 PM

          【ご質問内容について】
          初心者様の「この状態で、テストとしてHP設定後メール送信を数回行い受信出来たのですが・・・」という箇所が若干引っかかりますが、
          「表示の中に赤の部分mailformpro.cgiは正常に動作してます。の部分が表示されません。」の一文から、cgiが正常に動作していないものと判断できます。

          【SYNAPSEについて】
          SYNAPSEのホームページを拝見しました。
          SYNAPSEは、プロバイダー系のレンタルサーバーです。

          プロバイダー系のレンタルサーバーは、できることが大きく制限されてしまいます。
          よって、mailform proのようなcgiを利用するメールシステムを組み込めない(正常に動作しない)ことが多いです。
          cgi以外のphpを利用するメールシステムも同様に難しいと思います。

          また、SYNAPSEは一応cgiが動作可能なようですが、mailform pro自体が正常に動作する可能性は低いと思います。
          過去に、「プロバイダー系のレンタルサーバーに設置できない」というお問い合わせを何通もいただきましたが、すべて同様の結果でした。

          mailform pro等のcgi系、php系のメールシステムを利用する場合は、レンタルサーバーを変更するのが一番確実だと思います。
          「さくらレンタルサーバー」「ロリポップ」「Xサーバー」等のメジャーなレンタルサーバーは動作確認済です。

          【解決するための選択肢】
          1.mailform proの公式ページのサポートから、直接製作者(和田様)に連絡してみる
          (※http://www.synck.com/contents/faq/index.html)
          (※レスポンスは1~2週間ほどかかります)

          2.他のメジャーなレンタルサーバー(プロバイダー以外)に乗り換える。
          3.ネットで他のメール送信プログラムを探す。(見つかる確率は低いかもしれません・・・)
          4.mailform proをあきらめて、プロバイダーが提供しているメールシステムを利用する。

          考えられる選択肢は、以上となります。

          以上、よろしくお願いいたします。

  • 初心者君 2015年5月12日 at 2:31 PM

    すみません、メール切れてしまいました。引き続き記述します。
    config.cgiファイルの#を取り、カナ変換。住所変換、数字確認など出来るようですが?
    ネット上でテストを行いますが、美味く行かないところを見ると、cgiが機能してないのか
    など思って降ります。すみません、勝手申し上げますが、ご指導宜しくお願いいたします。

  • 不慣者 2015年6月28日 at 2:00 AM

    管理者様

    ホームページを参考にさせていただき、問い合わせフォームからのメール送信、ThanksMailの返信を試みております

    ①ホームページビルダー19クラシックでフルCSSテンプレートからホームページを作成
    ②一応こちらのホームページの手順に従い問い合わせフォームからのメール設定等をすべてした
    ③パソコンから動作確認をしたところ、問い合わせのメールは届くが、「Javscriptが動作していない状態で送信されました」とのメッセージのついたメールで、住所、問い合わせ内容等はうまく届かない。また送信側には問い合わせ完了完了のページは表示されるが問い合わせ確認の返信が届かない
    ④ipadからから動作確認を行ったところ、問い合わせメールは届く。「Javascriptは正常に動作しました」とのコメントが入っており、問い合わせ内容も正常に表示される。送信側は問い合わせ完了のページが開き、問い合わせ確認の返信も届くが、その返信メールを開こうとするとoutlookが途中で終了してしまう
    ⑤config.cgiの設定で、スパム対策の全文英語のスパム候補を「除外しない」にしなければ全文英語でもないのにエラーが発生する

    上記のような症状が現れ、おそらくJavascriptに関するソースの入力にミスがあるのではないかと思うのですが、何度見直してもこちらのホームページの通りに入力しているようです。上記の症状からしてどのあたりにミスがありそうかご教示いただけませんでしょうか。お手数ですがよろしくお願いいたします。

    • Pasonal 2015年6月28日 at 7:26 AM

      不慣者様

      1.レンタルサーバーはどちらでしょうか?
      プロバイダー系やhpb系のサーバーですと、正常に動作しないことがあります。

      2.「Javscriptが動作していない状態で送信されました」
      おそらくコンフリクト(衝突)がおこっているのではないかと推測します。

      下記の点が<重複していないか>または<記述ミスがないか>をご確認ください。

      ■javascriptの記述1
      script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”

      ■javascriptの記述2
      form id=”mailformpro” method=”POST”

      ■/formタグ後のjavascriptの記述
      script type=”text/javascript” id=”mfpjs” src=”mail/mailformpro/mailformpro.cgi”

      3.一度HPのソースを確認したいので、お問合せページのURLを教えていただけると詳細なことがわかるかもしれません。

      以上、よろしくお願いいたします。

  • 不慣者 2015年6月28日 at 11:58 AM

    管理者様
    何度も申し訳ございません。
    今度はすべて手入力して送信したのですがまたうまくいかなかったみたいですね。
    かくなるうえは何とか自力で頑張ってみます。
    失礼いたしました。

    • Pasonal 2015年6月28日 at 8:55 PM

      不慣者

      返信遅くなり申し訳ございません。

      4.動作確認において問い合わせ側のメールアドレスを受ける側のアドレスと変えて送信した場合(通常そのような状況になると思われる)に、問い合わせ確認を自動返信で受けた側で受信ボックスを開こうとするとoutlookの動作が停止してしまう。

      outlookが起動するのは、メーラーの設定によるものかもしれません・・・。
      恐らくメールフォームプロとの関係性は低いのではないか・・・と思います。

  • オリオン 2015年6月30日 at 11:05 AM

    管理者様

    いつもこちらを参考にさせていただき、お世話になっております。
    このような技術に関してあまり知識がなく、行き詰まってしまいましたので質問させていただきます。
    返答いただけたらと思いますのでお願いいたします。

    HPB19クラシックのフルCSSテンプレートでHPを作成し、
    このホームページを参考にして、お問い合わせフォームの設定を全て完了させました。
    HPから動作確認をしたところ、Thanksページにも変わりますし、内容が記載されたメールも届きます。
    しかし、【JavaScriptが動作していない状態で送信されました】と表示されます。
    そのためHPBのお問い合わせフォームのHTMLソースをもう1度確認してみると、後の
    「」
    の文がエラーになっていて何回打ち直してみても直りません。
    エラー内容は「属性名(id)が未定義です。」と出ます。

    サーバーは大塚商会さんのアルファメールを使っています。
    その文が間違っているのか、何か根本的に間違っているのか、何回も確認してみましたがわかりません。
    よろしくお願いいたします。

  • 不慣者 2015年6月30日 at 2:10 PM

    管理者様
    ご回答をいただいていたのにお返事が遅くなり申し訳ございませんでした。

    ご指摘のとおり、自動返信のメールを開こうとするとoutlookが動作停止するのは
    わたしのパソコンのメーラーの設定が問題のような気がします。
    他のパソコンから問い合わせしたところ自動返信も何の問題もなく受信でき、
    問い合わせのメールも正常に届いています。
    私のoutlookパソコンのメーラーの設定の方は時間をかけて何が問題なのか調べてみようと思います。

    管理者様のおかげで
    hpbの問い合わせフォームからメール送信ができ、thanksページの表示、問い合わせお礼の
    自動返信までできるようになりました。ほんとに助かりました。ありがとうございました。

    厚かましくもう一点お伺いしたいのですが、現在thanksページへのリンクがトップページの
    左下部に小さく表示されたままで、サイトの閲覧者が何かの拍子でそこをクリックしてしまったの時に
    問い合わせをしていないのにthanksページが表示されてしまうようになっているのですが、
    それはしようがないことなのでしょうか。
    一度気になってそのリンクの部分を削除したらthanksページへのリンクが外れ、
    リンク表示の画面でthanksページのサイトの確認ができなくなったりしてしまいました。
    スマホ版へのリンクについても同様にトップページの左下にあり、リダイレクト設定しているはずなのですが、
    そのリンクをクリックするとパソコンからでもスマホ版のページが閲覧できてしまいます。
    何かいい方法はありますでしょうか。

    いずれにしても自動送信機能付きの問い合わせフォームが出来上がりたいへん満足しております。
    ありがとうございました。

    • Pasonal 2015年6月30日 at 11:27 PM

      不慣者様
      hpbは新しくページが追加されると、TOPページのどこかに勝手にリンクを(強制的に)作ります。
      ※大抵はTOPページの一番左下あたりにリンクが挿入されていることが多いです。

      サイトの確認(ツリー形式で表示されるページ)画面でthanks.htmlが表示されていなくても、作成したページはファイル内にキチンと残っているので安心してください。
      thanks.htmlを再び編集する場合は、タブを「フォルダ」に変えて、ファイルや画像の一覧から「種類」又は「更新日付」でソートをかけて、thanks.htmlをダブルクリックで開いてください。

      「同期」などを行うと、またトップページにthnaks.htmlのリンクが復活してしまいます。
      ご注意ください。

      アップロードする場合は、そのままの状態でアップロードをすれば、ファイル内にあるthanks.htmlも自動でアップロードされるはずです。

      ※上記内容で分からなければ、またお気軽に連絡ください。
      すぐには返信できませんが、3~4営業日までにはご返信いたします。

  • 不慣者 2015年7月1日 at 4:23 PM

    管理者様
    度々的確なアドバイスをありがとうございます。
    ほんとですね。サイトの確認画面から消えていてもファイルそのものは
    残っていて、リンクも残っているし、編集も可能なんですね。
    こんなに何も知らずにホームページ作りをしているとはお恥ずかしいかぎりです。
    管理者様には何から何まで丁寧にご説明していただいてほんとに助かりました。
    ありがとうございました。

    すみません…もう一つだけ質問をさせていただいてよろしいでしょうか。
    管理者様がアドバイスして下さった「同期」などを行うとthanksページが
    トップページに復活してしまう点なのですが、
    逆にわざとそのようにしてthanksページをサイトの確認画面に復活させて、
    スマホへのリダイレクト設定の変更等をしようと思ったのですが、
    そのわざと復活させる方法が今度はわかりません。
    トップページにまだある状態の時のリンク部分のHTLMソースを記録しておいて、
    復活させる時にそのソースをthanksページのソースに追加しなおす
    という方法が考えられるのですが、素人のわたしがあまりソースを切り貼りしないほうが
    いいのではないかと思い、それ以外の方法を考えていたのです。

    全く急ぎませんのでまたご都合のいい時にご教示いただけましたら幸いに思います。
    よろしくお願いいたします。

  • 不慣者 2015年7月3日 at 12:20 AM

    管理者様
    先日質問させていただいた事項について自分なりに答えをみつけました。
    「thanksページへのリンクがトップページに強制的に作られてしまい、
    そのリンクを削除したらサイトの確認の画面でthanksページが現れなくなり、
    その後復活させることができない」と思っていたのですが、

    ①トップページの同じ場所でリンクを挿入すれば復活させることができる。
    ②そもそもthanksページのリンクそのものを削除せずに、リンクのHTLMソース
    の内、「thanks.htmlへのリンク」の部分のみを削除してリンクのHTLMソースは
    温存しておけばサイトの確認の画面から消えることはない。

    この二つの対処法を思いつきました。どちらも少し考えれば思いつくことなのですが、
    不慣れな私はすぐに思いつかず、お騒がせして申し訳ございませんでした。

    管理者様のおかげでやっと形の整ったホームページができました。
    本当ににありがとうございました。

    • Pasonal 2015年7月4日 at 1:59 PM

      不慣者様

      お返事遅れまして、大変失礼いたしました。
      こちらも勉強させていただき、ありがとうございました。

      また、当サイトにお立ち寄りください。
      お待ちしております。

  • Rizwan Rana 2015年7月7日 at 2:55 PM

    Hi I have a problem in my contact.html form. I have followed your video instructions completely. My server is same as your server which is X server. I am using homepage builder for website. The contact. form is not working. Please help me what is the problem. cgiの動作チェック gives an error. I have uploaded mailformpro on my server. What domain name should I use? This is my server info:
    host-name-address: *****.xsrv.jp
    user name: ***door
    hotst folder:****-***.com
    Can you help me using this information?

  • 木下 2016年1月2日 at 3:09 AM

    管理者様 
    初めまして
    こちらのサイトで勉強させて頂いております。有り難うございます。
    動画も大変わかり易く初心者の私でもなんとか設定出来つつあります。
    ところがどうしても理解出来ないところがありご教授願えればと思い連絡させて頂きました。

    動画の通り設定を行い、現状設定したメールアドレス宛に問い合わせメールが届くのですが
    問い合わせフォームの入力欄にOKやtextareaなどのテキストが表示されます。
    全て入力後送信ボタンを押すと同じ問い合わせフォームの画面になります(上記のテキストは表示されません)。
    そしてもう一度送信ボタンを押すと正常に送信されるのです。

    もうひとつHTMLソースで 下記のような構文エラーが出ます。
     属性名(value)が未定義です
    属性名(id)が未定義です

    上記の問題を多くのサイトでも調べたのですが解決出来ません。
    お忙しいところ大変申し訳ございませんがご回答頂けると幸いです。
    宜しくお願い致します。

    • 木下 2016年1月2日 at 3:17 AM

      すみません
      投稿した質問を確認したところ構文エラーのhtmlコードを入力したのですが表示されていません。
      下記のコードを参考にして下さいと記載のある参考htmlで9行目の(value)と38行の(id)が未定義と表示されます

      宜しくお願い致します。

    • Pasonal 2016年1月2日 at 3:23 PM

      木下様

      ページを拝見させていただきました。

      >問い合わせフォームの入力欄にOKやtextareaなどのテキストが表示されます。
      テキストは本来、メール送信ボタンを押下した際に、入力チェックのエラーとして表示されるものです。
      これが最初から表示されているということは、mailformpro.cssが適用されていないということになります。

      木下様のお問い合わせページの下記の部分を見直してください。
      link rel=”stylesheet” href=”mail/mfp.statics/mailformpro.css” type=”text/css”/

      上記の囲みが木下様のページでは『全角』のダブルコーテーションとなっています。これを『半角』に修正してください。

      他の箇所については確認いたしましたが、さして問題ないように思います。
      これで一度、お問い合わせページの動作チェックを行ってください。

    • Pasonal 2016年1月2日 at 7:05 PM

      木下様

      タグ付きなので、表示されてませんでした・・・。
      大変失礼いたしました。
      メールにて再度お返事したします。

  • 木下 2016年1月2日 at 10:47 PM

    管理者様 
    この度は大変お世話になりました。
    感謝いたします

    事業の益々のご発展を祈念しております
    ありがとうございました。

  • 岩本 2016年1月7日 at 11:08 PM

    管理者様

    初めまして。

    初心者で、勉強中の身でございます。
    動画も拝見させて頂き、設定してみましたが、うまくいきません。
    (動画はとてもわかりやすく大変参考になりました。ありがとうございます)
    必要項目を入れて送信をクリックすると404エラーとなります。

    ホームページビルダー17を使用しているのですが、それが原因でしょうか。

    サーバーはロリポップを使用しており、ロリポップに問い合わせしたところ

    「メールの送信処理を行うファイルの指定が行われておりませんでした。」と返答がきましたが、
    いまいち意味がわからず、設定方法がわかりません。

    ご教示ください。長文失礼しました。よろしくお願いします。

    • Pasonal 2016年1月8日 at 9:19 AM

      岩本様

      >必要項目を入れて送信をクリックすると404エラーとなります。

      404エラーだとパスが間違っているのではないでしょうか?
      cgiのページを再度見直してください。

      実際のサイトのURLや、もう少し詳細な情報があれば原因がわかるかもしれません。
      下記のお問い合わせページか、またはコメント投稿欄からご連絡ください。
      http://pasonal.com/contact/

  • 岩本 2016年1月13日 at 3:53 PM

    何度もすみません。

    メールで何回か返信していますが、送れてますでしょうか。
    届いておりましたら、同じ内容を何度も大変申し訳ないです。

    yahooメールだったからなのかと思い、gmailに変更しました。

    はじめ、赤い帯は表示されました。

    設定後は出なくなりますが、あってますでしょうか?
    CGIのパスというのはconfig.cgiをTeraPadで開いた際の内容でしょうか。

    サンクスページのURLは確認しましたが、あっていました。

    質問ばかりで大変申し訳ございません。

    • Pasonal 2016年1月13日 at 4:57 PM

      岩本様

      メール届いていますよ。
      yahooメールのほうにお送りしたので、よろしくお願いいたします。

  • yosi 2016年1月17日 at 4:49 PM

    「http://ユーザーcgiドメイン名/mail/example.html」にアクセスして、CGIが正常に動作するかを確認

    上記の段階でつまづいております。

    「ユーザーcgiドメイン名」とはどの部分のことでしょうか?

    サーバーアカウント情報の中の、共有SSL、フルパス、FTPサーバー、FTPSサーバー、WebDAV、FTP・WebDAVアカウントのいづれかでしょうか?

    初歩的な質問で申し訳ありませんがよろしくお願いします。

    • Pasonal 2016年1月18日 at 8:52 AM

      「ユーザーcgiドメイン名」ではなく、通常のドメイン名のみです。
      ドメインは『example.com』や『example.jp』となります。

  • cocoa 2016年8月20日 at 6:59 PM

    管理者様

    初めまして。
    今回メールフォームを作る際の参考にサイトを拝見させて頂きました。CGI初心者です。

    一通り記載通りにやったのですが、どうしても送信ボタンを押すと404エラーでページが表示されません。過去同じような質問をしている方にパスが間違っているのでは?とのお答えがあったので、思いつく限り色々なものを試したのですが上手くいきません。こちらはBIGLOBEのサーバーを借りており、CGI、sendmailは使えます。

    お忙しい中恐縮ですが、よろしくお願い致します。

    • Pasonal 2016年8月20日 at 7:39 PM

      cocoa様

      記事を閲覧していただき、ありがとうございます。
      GIGLOBEのサーバーをレンタルしているとのことですが、どのサーバーをレンタルされていますか?
      詳細な情報を教えてください。
      例:『Webホスティング』や『プロバイダーのサーバー領域』など

      • cocoa 2016年9月3日 at 4:32 PM

        管理者様

        お返事ありがとうございます!
        こちらのお返事が遅くなってしまってすみません。

        詳細な情報を、との事ですが、無知なものでどの情報を出せばいいのか分かりません…Webホスティングやプロバイダーのサーバー領域などがこちらにある情報のどれに当たるのか判断ができないです…すみません。もしご迷惑でなければ、メール等で実際のページURLをお伝えして見て頂いた方が良いのでは、と考えているのですが可能でしょうか?

        よろしくお願い致します。

  • 大長 2016年9月14日 at 4:57 PM

    お世話になります
    色々と参考にさせていただいております
    CGIは正常となっていますが
    動作は、送信ボタンを押すと、クリアを押したときと同じように、文面が消えてしまいます。
    もちろん、メールも送られてきません。thanksベージ(thanksページは、プライベートホームページ(index.html)と同じところにアップしましたが移行しません。どうしてなのでしょう?
    宜しくお願いします

    • Pasonal 2016年9月14日 at 9:32 PM

      大長様

      CGIが動いているとのことなので、レンタルサーバー側の問題ではないと思います。
      入力フォームが消えるのは、HTML側に何かしらの問題があるのかもしれません。
      リンク等(http://は省いてください)をご提示いただければ、詳細が分かるかもしれませんが・・・。

  • たら 2017年1月22日 at 10:03 AM

    お世話になります。
    動画を拝見して、初心者の私でも分かり易い教え方で、大変参考にさせていただいております。
    ありがとうございます。

    しかしすぐに行き詰ってしまいました。すいません。質問させてください。

    序盤の http://ドメイン名/mail/example.htmlの箇所です

    サーバはロリポップなのですが、上記URLを入力すると「※指定されたページ(URL)は見つかりません。」
    と表示されます。

    試しにhttp://ドメイン名までだと、「※指定されたページ(URL)へのアクセスは禁止されています。」
    と表示が変わるので、ドメイン名はあっていると思うのですが、mail以下を入力すると、「※指定されたページ(URL)は見つかりません。」となってしまいます。

    FFFTPの画面ではしっかりとmailフォルダが確認できていて、mailフォルダもindex.htmlと同じ階層にあるという状況です。

    いろいろ調べましたが、困ってしまい質問した次第です。

    よろしくお願いいたします。

    • Pasonal 2017年1月22日 at 5:24 PM

      「指定されたページ(URL)は見つかりません。」の表記は404 Not Foundの場合に発生するものです。

      [原因]
      1.URLが間違っている(大文字、小文字、記号など)
      2.サーバーに必要なファイルが適切な場所にアップロードされていない

      上記の理由以外考えられません。

      ・自分のホームページ(トップページなど)は問題なく表示されていますか?
      ・ドメイン(or 独自ドメイン)は有効ですか?
      ・DNS設定は適切ですか?

      ロリポップ公式の「よくある質問」のページを一度確認し、上記の点が適切に設定されているか確認してみてください。

  • たら 2017年1月22日 at 6:26 PM

    Pasonal様、お忙しい中、対応して頂きありがとうございます。
    今一度ロリポップの設定を見直しながらやっていきたいと思います。
    ありがとうございました。

返信を残す