wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

   

こんにちは、管理人@SS_mshpです。

今回は、googleカレンダーとメールフォームで、予約受付ページを作ってみます(うまくいくかは微妙です)。

画像はfreeimages.comさんからお借りしました。席数が多い飲食店や、広いヘアサロン・複数学科で生徒が多いスクールなどは、専用の予約システムが便利です。しかし、そこまで大きいシステムが必要でない場合、googleカレンダーとメールフォームを使って営業案内&予約受付ができるのでしょうか?

■まずはgoogleカレンダーの設定をしよう

■新しいカレンダーを追加(ページ用)


googleカレンダーのページにアクセスしましょう。(googleアカウントがない方は、事前に登録してください)
上のほうにある、ねじみたいなアイコンをクリック。


カレンダーを追加』というのがあるので、ここで新しいものをつくります。プライベート用すでに使っていて、それとは別にしたい場合は。


タイトルは合うものをつけます。管理人の場合は『wpサイトコンサル予約』としました。『一般公開して利用できるようにする』にチェックをつけることで、サイト上に公開してユーザーが見ることができるようになります。

この場合『個人情報は書かない(○○さまご予約など)』『まちがってプライベート用などにチェックをつけない(公開されます)』という点に気をつけます。

■googleカレンダーをサイトに貼り付けるときのコードは?


上記のページを下にスクロールしていくと『iframe src』で始まるコードが出ています。このコードを表示したい場所に貼り付けると、カレンダーがサイト上で表示されます。

しかし、このコードが曲者なんですよかなり。詳細は後のほうで。

■あとは受付できる日を書いていく!○△×を使うと見やすいよ


表示されたとき大丈夫なように、受付できる日をカレンダーに書いていきます。スマホの小さい画面でも分かりやすいよう『○△×』を使ってもokです。定休日には×をつけておくのも忘れずに!

■googleカレンダーのレスポンシブ対応について(CSS)

■レスポンシブ対応しないと??


iframeの枠だけデバイスにあわせて、中身はレイアウトにあわせないというのが発生しました。その場合、写真のようにカレンダーがつぶれて、文字が見えなくなります。これではどこをタップしてよいかわかりません。

また、この場合はiframeの枠だけレスポンシブでしたが、iframeの指定がなんもない場合は『カレンダーがそのままの大きさで表示されて、スマホだと火曜日あたりまでしか見れない』というのもあるようです。

■googleカレンダーのレスポンシブ対応するCSSはある

検索してみたところ、3061.jp @FUJIDENKIさんという方のサイトで、カレンダーをレスポンシブにするCSSがありました。
https://3061.jp/google-calender-responsive-code/

検索するといろいろCSSが出てくるので『キーワード:googleカレンダーレスポンシブ』状況に応じて、使いやすいものを選んでください。

■上記のCSSを入れても、googleカレンダーのレスポンシブがエラーになる場合

管理人の環境では、上記のようなCSSをいれても、googleカレンダーのレスポンシブがエラーになりました(縦サイズはつぶれたまま)。

理由はワードプレスのテーマで『iframe(youtubeなど)指定している部分が既にあり、干渉していた』という点です


上記の干渉しているCSSをカットすることにより、スマートフォンでタップして表示できる広さになりました。

この場合youtubeは、『埋め込むときは320サイズ固定にする』『カレンダー・youtube個別にCSS指定』『問い合わせのページだけ、対応できるCSSを出力』などの対策が考えられます。

■googleカレンダーとメールフォームでつくった予約ページ例

■PC版予約受付ページ

メールフォームを埋め込んで、同じページ内でカレンダーを見ながら問い合わせメールが送れるようにしたページです。文面とかは工夫の余地があります。

■スマートフォン版予約受付ページ

ちょっと文字が小さいですが、レスポンシブ対応をかけたので、文字がタップできるようになります。左側に『○△×』があったほうが、お客さんが選びやすいでしょう。ホットペッパーグルメとかも、予約ページに行くとカレンダーに○×が出るので、この形式に慣れている人は多いと思われます。

■メールフォームは、カレンダーと同じページにおいたほうが良いの?

メールフォームは、ワードプレスのショートコードをつかって、『カレンダーと同じページ内』に入れました。カレンダーとメールフォームが別々だと、PCタブブラウザならあまり気になりませんが、スマホで確認するたびにページ移動が発生するので、非常に操作が大変になります

このやり方でおこなう場合は、『同じページ内に埋め込める』メールフォームがあると、非常に有利です。

■あとがき・まとめ

とりあえず、レスポンシブさえどうにかすれば、そこそこ形にはなります。カレンダーを埋めるときも、スマホでgoogleカレンダーにアクセスして行えるので、新しく難しいツールを覚えたりしなくてよいのはメリットかと思いました。

キャパが小さめな『スクール/教室/出張コンサル・サロン・飲食店』などまでは、活用しだいで対応できます。宿泊施設などは、複数の部屋から選ばなければならないので、このシステムでは対応できません。

後ほど、ワードプレスプラグインでの予約システムもやってみたいと思います。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』につい …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじ …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行い …

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のweb …

音声セミナー・講座・音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTM …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …