Wordpressのテーマはデザインが命です。
このシリーズは、Wordpressのテーマの作り方として、これまで機能面ばかりを説明してきましたが、
今回は、ホームページデザインについて学習を進めていきたいと思います。
デザインが苦手というプログラマーの人でも見栄えの良いホームページを作るコツなどが学習できますよ。
ホームページの種類と構造
1990年までホームページという概念が無かったので基本的に0個だったんですが、
1990年以後には、誰もが想像できるように、ホームページの数はどんどん増えてきました。
ちなみに、1994年にYahooがページを立ち上げ、1998年にGoogleがホームページを立ち上げたという記録が残っています。
2000年以降に加速的に増えてきて、2019年、世の中のホームページ数は、16億サイト存在すると言われていて、2022年には19億サイトあるという調査結果があるようです。
もちろん、ミラーサイトみたいな全く同じサイトも含まれているかもしれませんが、基本的にドメインや構築する人が違えばホームページのデザインは十人十色違うwebページになるでしょう。
Wordpressのようなデザインをテンプレート的に構築できるCMSを使うことで、ある程度見栄えが良いけど似通ったwebページがたくさん出来てしまったことは否めません。
それでも、独自デザインとして今後もwebサイトはどんどん増えていくでしょう。
そんな、無数にあるwebサイトをジャンル分けすると、どうやら次の９つに分類されるようです。
Webサイトの種別
- コーポレートサイト
- ランディングページ
- プロモーションサイト
- オウンドメディア
- サービスサイト
- ブランドサイト
- リクルートサイト
- ECサイト
- メディアサイト
参考 :
https://www.biz.ne.jp/matome/2003491/
ただ、このジャンル分けは、デザインの区分けにはなっておらず、ページカテゴリでの分類という事を認識しておいてください。
Webページのデザインにおいては、縦と横の段組みによる構造体を基本とした、色々な要素で構成されているため、これが正解とか、こうでなければならないというモノは基本的にはありません。
Webサイトの基本構造
そんな中、よくある構図としては、次のような構造です。
| ページタイトル |
| バナー |
| ページ本文 |
| CopyRight |
スマホページも含めて、ほとんどのwebサイトがこの構造で作られています。
という事で、この無難な構造でホームページを作るのが、効率がいいでしょう。
デザインの基本は統一感
Webページを作る時に、一番最初に何を決めなければいけないのかというと、仕事でwebページを作っている人のほとんどが「色」だと言うでしょう。
どんな内容であっても、色のルールがしっかりしていれば、ページが映えます。
逆に色ルールがしっかりとしていないページは、どんなにいい内容であっても、レベルが低く見られてしまいます。
では、色ルールって一体どういう事かというと、「３色ルール」という事を意識するだけでいいんです。
色の統一感
ホームページの中で使う色を基本的に３色にセットして、なるべくそれ以外の色は使わないという風にデザインしていくことで、ページ全体（サイト全体）の統一感が出て、まとまったページとして印象が残ります。
よく使われているサイトの、
Adobe Colorというサイトの
見本一覧ページを見てみると、５色のカラーパターンが表示されていますが、よく見ると色分類すると３色で構成されているモノが多いという事に気がつくでしょう。
色の中間色も基本の３色を意識すれば、微妙なカラーコードが違っても統一感は得やすいという人の特性があるようです。
構図の統一感
上記の構図説明で書いてあるモノを「シングルカラムデザイン」という言い方をして、スマートフォンはほぼこの構図で使われています。
一方、パソコンでは、マルチカラムデザインという、スマホと比べて、左右に大きくスペースがあるため、そこに色々なメニューや広告などの情報を設置する構図が一般的です。
さらに、１つのHTMLソースで、スマホでもパソコンでも自由に切り替える、レスポンシブデザインというのは、まあまあ有名な構図デザインでしょう。
こうした構図もある一定のルールを用いなければ、レスポンシブデザインは実現できません。
いきあたりばったりで、タグを追加していくような作り方をしてはダメという事ですね。
動きの統一感
ページの動きというのは、動画や表示するアニメーションだけではなりません。
スクロールする動きや、カルーセルのようなスライド、それを操作する挙動、ページ遷移する時のボタンをクリックした時の振る舞いなども、統一感を持たせなければいけません。
統一感というとわかりにくいので、今どきの言葉で言うと、UXですね。Experienceという、ユーザー体験をホームページでは重要視するために、
アフォーダンスなどの心理学理論などを学習する人が多いようです。
文章の統一感
意外と重要と分かっているのに、重要視されにくいのが、文字です。
基本的に、上手な文章というのは、誰が読んでも同じ印象を得られる文章の事です。
ある一部の人しか意味が通じない文章を公開ページに書いても、専門性が高く見られるというワケではなく、わかりにくいページという評価しか得られません。
その為に、できるかぎり万人が理解できる文章を心がける必要があります。
そして、サイト内での文章レベルも統一されている必要があるんですね。
素材のセンス
レストランのホームページを作る時に、そのお店の写真素材が重要である事は誰もが理解できると思いますが、実際に美味しそうに見えないホームページは世の中にたくさんあります。
色味や構図ももちろんですが、写真であれば、撮影されたシチュエーション、イラストであれば、誰がどのような思考で描かれているかという裏のストーリーは、見えない文字としてホームページでは読まれます。
こういう裏ストーリーは、「分かる人だけ理解できればいい」、という方が面白みを感じられるものです。
そして、これには正解がなかなかないので、センスを磨く以外に誰かに教えてもらう術はないんですね。
デザイン思考の鍛え方
普段から、インターネットで色々な会社や他人のブログのホームページを見ているけど、そのページデザインを評価している人は、仕事でデザインをやっている人ぐらいしかいないでしょう。
奇抜なデザインのホームページを見た時に、「すごいな〜」という意見を持つ人は多いけど、「何がすごいのか？」「どの様にすごいのか？」「他のサイトとどのぐらい違うのか？」という視点で評価する人は少ないでしょうね。
実はこうした評価をしていく事で、かなりホームページデザインに対してプロ並みの評価軸を持つことができるようになります。
何気に見るのではなく、ちゃんと思考して見るという事です。
そして、多くのWebサイトを見て数多く煮れば見るだけ、Webデザインに対しての目が肥えてくるという、努力で鍛える方法があります。
ホントに、誰でも簡単にできるのに、なかなかやってる人いないんですよね。
というわけで、Webページのデザインについて、色々と学習してみましたが、実際にWordpressに反映してみたいと思います。
ヘッダ部分の画像が、ずっとnot foundになっているので、管理画面で登録できる画像を登録して整えてみたいと思います。
「外観」 - 「カスタマイズ」 - 「サイト基本情報」をクリック
タイトル、キャッチフレーズを書き換えて、サイトアイコンを登録
登録前の状態
登録後の状態
追加・修正したソースコード
以下のソースコードを、テーマフォルダ直下に配置します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<title><?php echo get_bloginfo('name');?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="<? echo get_site_icon_url();?>" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"/>
<?php
$local_path = get_theme_file_path();
$page_uri = get_page_uri();
if($page_uri && is_file($local_path .'/'. $page_uri .'.css')){
echo '<link rel="stylesheet" href="'. get_template_directory_uri() .'/'. $page_uri .'.css" />';
}
if($page_uri && is_file($local_path .'/'. $page_uri .'.js')){
echo '<script src="'. get_template_directory_uri() .'/'. $page_uri .'.js" /></scripot>';
}
?>
</head>
<body>
<header>
<input id="toggle_menu" type="checkbox" style='display:none'>
<a class='title-area' href='/'>
<img class='logo' src='<?php echo get_site_icon_url();?>'>
<div class='header-title'>
<div class='title mincho bold'><?php echo get_bloginfo('name');?></div>
<div class='catch gothic'><?php echo get_bloginfo('description');?></div>
</div>
</a>
<nav>
<ul>
<?php
$menus = wp_get_nav_menu_items('ヘッダメニュー');
if(!$menus){return;}
$html = '';
foreach($menus as $data){
$html .= '<li>';
$html .= '<a href="'. $data->url .'">';
$html .= $data->title;
$html .= '</a>';
$html .= '</li>'.PHP_EOL;
}
echo $html;
?>
</ul>
<label class='hamburger' for='toggle_menu'>
<span></span>
</label>
</nav>
</header>
<main>
header{
height:var(--size-header-height);
background-color:rgba(255,255,255,0.5);
box-shadow: 4px 4px 20px rgba(0,0,0,0.5);
display:flex;
position:relative;
}
/* Title */
header *{
text-decoration:none;
color:black;
}
header .title-area{
display:flex;
align-items:center;
height:100%;
}
header .title-area .logo{
padding:10px;
height:100%;
}
header .title-area .title{
font-size:1.5rem;
font-weight:bold;
}
header .title-area .catch{
font-size:0.8rem;
}
/* Menu */
header nav{
margin-left:auto;
height:100%;
}
header nav > ul{
display:flex;
gap:20px;
align-items:center;
height:100%;
margin:0 10px;
}
header nav > ul > li{
height:100%;
display:flex;
align-items:center;
position:relative;
}
header nav > ul > li a{
font-size:0.9rem;
line-height:var(--size-header-height);
}
header nav > ul > li a::after{
content: '';
display: block;
width: 100%;
height: 3px;
background-color: black;
transition-property: transform;
transition-duration: 0.3s;
transform-origin: right center;
transform: scaleX(0.0);
position:absolute;
bottom:0px;
left:0;
}
header nav > ul > li a:hover::after{
transform-origin: left center;
transform: scaleX(1.0);
}
/* Hamburger menu */
:root{
--hamburger-width : 25px;
--hamburger-size : 2px;
--hamburger-padding : 10px;
--hamburger-space : 5px;
--nav-width : 150px;
}
header .hamburger {
position:absolute;
top:50%;
transform: translateY(-50%);
right:10px;
display : block;
width : var(--hamburger-width);
height : var(--hamburger-width);
cursor : pointer;
padding-top : var(--hamburger-padding);
}
header .hamburger > span,
header .hamburger > span::before,
header .hamburger > span::after{
content : '';
background-color : rgba(0,0,0,1);
display : block;
width : 100%;
height : var(--hamburger-size);
transition-property : transform;
transition-duration : 0.3s;
}
header .hamburger > span{
position:relative;
}
header .hamburger > span::before{
position:absolute;
bottom : calc(var(--hamburger-space) + var(--hamburger-size));
}
header .hamburger > span::after{
position:absolute;
top : calc(var(--hamburger-space) + var(--hamburger-size));
}
#toggle_menu {
display: none;
}
@media screen and (max-width:768px){
header .title-area .title{
font-size:1.2rem;
}
header .title-area .catch{
font-size:0.8rem;
}
header nav ul{
position:absolute;
top: var(--size-header-height);
left:-100%;
z-index:20;
width:50%;
height:auto;
background-color:white;
margin:auto;
transition-property : left;
transition-duration : 0.3s;
box-shadow:4px 4px 20px rgba(0,0,0,0.3);
flex-direction:column;
gap:0;
}
header nav > ul > li{
width:100%;
height:60px;
padding:10px;
border-top:1px solid #ccc;
}
header nav > ul > li > a{
height:auto;
line-height:inherit;
}
header nav ul > *:last-child{
border-bottom:1px solid #ccc;
}
#toggle_menu:checked ~ nav .hamburger > span {
background-color:rgba(0,0,0,0);
}
#toggle_menu:checked ~ nav .hamburger > span::before {
bottom:0;
transform: rotate(45deg);
}
#toggle_menu:checked ~ nav .hamburger > span::after {
top:0;
transform: rotate(-45deg);
}
#toggle_menu:checked ~ nav ul{
left : 0;
}
}
@media screen and (min-width:769px){
header .hamburger{
display:none;
}
header .menu{
height:100%;
}
}
Footerの作り込み
続いて、footerは次の２ファイルを修正（追加）しました。
</main>
<footer>
<nav>
<input id='menu_toggle' type='checkbox' style='display:none;'>
<ul>
<?php
$menus = wp_get_nav_menu_items('フッタメニュー');
if($menus){
$html = '';
foreach($menus as $data){
$html .= '<li>';
$html .= '<a href="'. $data->url .'">';
$html .= $data->title;
$html .= '</a>';
$html .= '</li>'.PHP_EOL;
}
echo $html;
}
?>
</ul>
<div class='copy'>© 2023 Copyright MYNT, Inc. All Rights Reserved.</div>
</footer>
</body>
</html>
footer{
text-align:center;
padding:10px;
margin-top:50px;
border-top:1px solid #888;
}
footer,
footer *{
font-size:0.9rem;
}
footer ul:empty{
display:none;
}
footer ul{
display:flex;
justify-content: center;
margin-bottom:30px;
}
footer ul > li{
padding : 5px 15px;
}
その他のソースコード
あと、コンテンツ部分のために、次のファイル達を修正（追加）しました。
<?php
function get_content(){
// サイトトップページ
if(is_front_page()){
echo view_page();
}
// 固定ページ
else if(is_page()){
echo view_page();
}
// 投稿ページ
else if(is_single()){
echo view_page();
}
// 投稿一覧ページ
else if(is_home()){
echo view_posts();
}
// 検索ページ
else if(is_search()){
echo view_search();
}
}
function view_page(){
the_content();
}
function view_posts(){
return '投稿一覧ページ';
}
function view_search(){
return '検索ページ';
}
// mediaパスからドメインを取り除くショートカット
function delete_host_from_attachment_url($url){
$ptn = '/^http(s)?:\/\/[^\/\s]+(.*)$/';
if ( preg_match( $ptn, $url, $m ) ) {
$url = $m[2];
}
return $url;
}
add_filter(
'wp_get_attachment_url',
'delete_host_from_attachment_url'
);
add_filter(
'attachment_link',
'delete_host_from_attachment_url'
);
form{
display:block;
width:90%;
max-width:800px;
border-radius:8px;
box-shadow:4px 4px 20px rgba(0,0,0,0.3);
margin:10px auto;
padding: 0 20px;
}
form > *{
padding:20px 0;
}
form > * + *{
border-top:1px solid rgb(200,200,200);
}
form .group{
display:flex;
}
form .group > *{
margin:0 10px;
}
form .group .require{
width:70px;
}
form .group .require::before{
content:"";
display:inline-block;
width:60px;
padding:5px;
border-radius:4px;
color:white;
text-align:center;
font-size:0.8rem;
}
form .group[data-require="1"] .require::before{
content:"必須";
background-color:red;
}
form .group[data-require="0"] .require::before{
content:"任意";
background-color:#337ab7;
}
form .group .caption{
display:inline-block;
width:120px;
padding:5px 0;
white-space:pre-wrap;
word-break:break-all;
font-size:0.9rem;
}
form .group .form{
width:calc(100% - 120px - 60px);
-webkit-flex-grow: 1;
flex-grow: 1;
font-size:0;
}
form .group .form *{
width:100%;
font-size:16px;
}
form .group .form .inputs{
display:flex;
}
form .group .form .inputs > *{
display:inline-block;
--size-input-margin:4px;
margin:0 var(--size-input-margin);
}
form .group .form *::placeholder{
font-size:0.9rem;
color:rgb(180,180,180)
}
form .group .form input[type="text"],
form .group .form input[type="mail"],
form .group .form select,
form .group .form textarea{
-webkit-appearance : none;
appearance : none;
border:1px solid rgb(180,180,180);
border-radius:4px;
padding:5px;
}
form .group .form textarea{
height:150px;
resize:vertical;
}
form .submit-area{
text-align:center;
}
form .submit-area button{
display:inline-block;
padding:10px 20px;
background-color:#337ab7;
border:1px solid #2e6da4;
color:white;
border-radius:4px;
cursor:pointer;
}
form .submit-area button:hover{
background-color:#2e6da4;
}
form .group .form .caution{
display:none;
color:red;
font-size:0.9rem;
margin-top:5px;
padding:0 5px;
}
form .group[data-caution='1'] .form .caution{
display:block;
}
.contact .summary{
width:100%;
max-width:500px;
margin:20px auto 50px;
border:1px dashed rgb(200,200,200);
padding:20px;
}
@media (max-width: 599px){
form{
padding:0 40px;
}
form .group{
display:block;
}
form .group > *{
width:100%!important;
margin:0;
}
form .group .caption{
white-space:normal;
}
}
@media (max-width: 400px){
form{
padding:0 20px;
}
}
@media (min-width: 600px) and (max-width: 700px){
form .group{
--size-require-width:60px;
display:block;
}
form .group .require,
form .group .caption{
display:inline-block;
margin-bottom:10px;
}
form .group .require{
width:var(--size-require-width);
}
form .group .caption{
width:calc(90% - var(--size-require-width));
white-space:normal;
}
form .group .form{
width:calc(100% - 20px);
}
}
*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
outline:0;
}
:root{
--break-point:768px;
--size-header-height:80px;
font-size:16px;
}
ul,ol,li{
list-style:none;
margin:0;
padding:0;
}
main{
padding:10px 20px;
}
main,
main *{
white-space:pre-wrap;
word-break:break-all;
}
main img{
max-width:100%;
}
@charset "UTF-8";
/*!
Theme Name: Kantan Wordpress
Description: カンタンWordpress
Version: 1.0.0
Author: 開発者名
Author URI: http://example.com
Company: 所属会社
Create: 2023.01.01
*/
@import 'common.css';
@import 'header.css';
@import 'footer.css';
Github用意しました
さすがに、ファイル数が増えてきたので、githubにソース一式をプルしておきました。
ブランチで、段階毎に分けてあるので、切り替えて確認してみてください。
ちなみに、今回のブランチは、"ver1.0.4"です。
ユゲタのgithub
固定ページソース
固定ページも、本番さながらにサンプルページを作ってみたので、参考までに掲載しておきます。
<h1>概要ページ</h1>
カンタンWordpressは、Wordpressのテーマを簡単に作る事を解説するためのコンテンツです。
ブログリンク
<a href="https://blog.myntinc.com/2023/01/wordpress-00.html" target="_blank" rel="noopener">https://blog.myntinc.com/2023/01/wordpress-00.html</a>
Podcast解説
<a href="https://hackman.site/" rel="noopener" target="_blank">https://hackman.site/</a>
<img src="/wp-content/uploads/2023/01/wordpress-300x240.png" alt="" width="300" height="240" class="alignnone size-medium wp-image-49" />
Wordpressは個人的には使わないんですが、「新しく会社を立ち上げたのでホームページを作って欲しい」という人は、何故か<b>Wordpressでホームページを作って欲しい</b>と言ってきます。
というわけで、仕事でWordpressを使う機会が多いので、いっそのことWordpressを便利に効率よくできれば簡単に構築出来る方法はないかな？と考えていたんですが、
ローカル開発環境は、以前ブログで書いた、Localwpを使えば簡単に構築できるようになったので、それに伴って個人的にやっている内容を何回かに分けてブログにまとめていきたいと思います。
初回の今回は、Wordpressについての個人的見解や、現状を少しだけ分析してみたいと思います。
以前記事 :<a href="https://blog.myntinc.com/2023/01/wordpressweblocalwp.html" target="_blank" rel="noopener"> Wordpressでwebサイトを作るならやっぱり「Localwp」使うでしょ</a>
<h2>Wordpressのメリット・デメリット</h2>
Wordpressは、万能Webサイトフレームワークというワケではありません。
実際に企業のWebサービスなどを構築する場合は、最近では、ReactjsやNext.jsといったNodejs系が使われていたり、
PHP以外でもRubyやPythonにもたくさんのホームページフレームワークが存在します。
構築するエンジニアの好みによっても使い分けられますが、それぞれ得意分野、不得意分野が存在するので、それを知っておく人も必要になります。
<h3>Wordpressのメリット</h3>
<ul>
<li>世界的に多くのサイトで使われているため、情報やプラグインなどのツールが豊富にある。</li>
<li>ブログサイトやカンパニーサイトが構築する参考書などがたくさん販売されている。</li>
<li>管理画面があり、プログラムが分からなくても構築ができてしまう。</li>
</ul>
<h3>Wordpressのデメリット</h3>
<ul>
<li>世界的に多く使われているので、外部からのアタック攻撃などが頻繁にあり、脆弱性なども常に出続けている。</li>
<li>自己責任で運用する場合、アップデートに失敗して、webサイトが表示できなくなることがある。</li>
<li>プラグインやテーマのバージョン依存関係などが、システムで対応しきれない場合がある。</li>
</ul>
上記のようなデメリットがあっても、Wordpressを構築するスキルを持っている事は決して悪くはありません。
また、トラブル対応の知識などを持っていると、フリーランス活動をする上では重宝されることも多いでしょう。
<h2>Wordpress開発で必要な知識</h2>
Wordpressでホームページを作りたい人は次の知識を持っているといいでしょう。
<ul>
<li>HTML、CSSに関する知識</li>
<li>サーバーに関する知識</li>
<li>PHP言語に関する知識</li>
</ul>
さらに仕事で使えるために必要なスキルは次の知識です。
<ul>
<li>UI/UXに関するデザイン知識</li>
<li>作ったwebサイトを運用して向上させるためのマーケティング知識</li>
</ul>
それぞれの知識は、レベルがあり、どれも専門のプロフェッショナルが存在するレベルまで追求する事ができます。
ただ、浅くてもこれらの知識を一通り理解できていれば、Wordpressは怖く有りません。
<h2>Wordpressを簡単に扱うためには？</h2>
これまで、Wordpressを自社、他社、プライベートなどで数多く構築してきた、筆者としては、次のポイントで構築するのが効率が良く、運用もトラブルが少ないと考えました。
<ul>
<li>サイトごとにテーマを作る。（テーマでほぼ一元管理する）</li>
<li>出来る限りプラグインを使わない。（必要な機能はテーマに盛り込む）</li>
<li>バージョン依存しにくい構造にする</li>
</ul>
Wordpressのテーマは、構築されたWebサイトの基本を司る機能になります。
デザインだけでなく、サイト内の振る舞いすべてWordpressテーマで設定ができるので、独自のテーマを作って管理することで、納品効率もいいし、管理範囲も少なくて済みます。
でも、「テーマって作るの難しそう」と考えている人も多いと思いますが、必要最低限のやり方を覚えてしまうと、あとは、作り込んでいくとどんどん技術知識も向上していきます。
<h2>あとがき</h2>
Wordpressは、トラブルに遭った時はしんどい思いをしますが、OSSとしては、世界規模で展開されているだけあって、非常に有効でしっかりとしたプログラムで構成されているので、勉強になることも多いです。
さわりもしない段階でWordpressをディスるのはなるべくなら避けてもらいたいし、それらのアーキテクトを自分なりにより良くするというのは、まさに<b>エンジニアの腕の見せ所</b>というワケです。
世の中にはWordpressの書籍やWebサイトなどたくさん公開されているので、そうした所にはあまり書かれていない内容を、今後のブログでお伝えしたいと思います。
お楽しみに！
<h1>お問い合わせ</h1>
<form method="post" name="contact" action="https://docs.google.com/forms/d/e/1FAIpQLScb_u1Up7PIEiAv0sIZI9pYVbPFp2CxjJ6qU5uDAAVq7jMtfQ/formResponse" target="complete" onsubmit="window.submitted=true">
<div class="group" data-require="1">
<div class="require"></div>
<span class="caption">何に関するお問い合わせですか？</span>
<div class="form">
<div class="inputs">
<select name="entry.972129934">
<option value="このサイトの内容について">このサイトの内容について</option>
<option value="誤字脱字の報告">誤字脱字の報告</option>
<option value="料金に関するお問い合わせ">料金に関するお問い合わせ</option>
<option value="その他">その他</option>
</select>
</div>
</div>
</div>
<div class="group" data-require="1">
<div class="require"></div>
<span class="caption">名前</span>
<div class="form">
<div class="inputs">
<input type="text" name="entry.1939968703" placeholder="名前" required>
</div>
</div>
</div>
<div class="group" data-require="1">
<div class="require"></div>
<span class="caption">メールアドレス</span>
<div class="form">
<input type="mail" name="entry.628554344" placeholder="mail@example.com" required>
</div>
</div>
<div class="group" data-require="1">
<div class="require"></div>
<span class="caption">お問い合わせ内容</span>
<div class="form">
<textarea name="entry.322258224" placeholder="お問合せ内容を記入ください。" required></textarea>
</div>
</div>
<div class="submit-area">
<button class="submit-button" type="submit">送信する</button>
</div>
</form>
<script type="text/javascript">
window.submitted = false;
</script>
<iframe
id="complete"
name="complete"
style="display:none;"
onload="if(window.submitted){location.href='/thanks/'}">
</iframe>
お問合せページは、GoogleFormを使って、スプレッドシートにデータを貯められる便利機能を使っています。
以前ブログを書いておいたので、そちらをご覧いただき、ご自身のサイト用に構築してみてください。
これは便利、CGIを一切使わずにformデータが収集できる、Google form活用方法
<h1>お問合せいただきありがとうございました。</h1>
<a href='/'>トップへ戻る</a>
