2時間かつ0円でシャレオツな雰囲気のサイトができました【WordPress】
先日公開した「うさぎ牧場」の公式サイトですが、ものの2時間ぐらいで作成しました。
うさぎ牧場公式サイト | 無料スマートフォン用ゲーム「うさぎ牧場」の公式サイト
既存のドメインからサブドメインを作り、既存で運営しているサイトに間借りしたので、かかった費用はすべて0円。かかった時間は4時間ぐらいです。
※ まだサイトを運営してない、独自ドメイン持ってないという場合はこのやり方だといくばくかのお金がかかります…月1,000円ぐらい。
4時間のうちのほとんどはカッコイイWordpressのテーマを探すのに費やしましたので、実際は2時間ぐらいあれば作れると思います。Wordpressと無料テーマってホントにスゴイですよね。技術なんて全然なくてもサクッとWebサイトが作れちゃう。
ここで自身への備忘録と参考のために、クソ簡単にWordpressで小洒落た（？）サイトを作る方法を書いておきたいと思います。
今回の目標
- うさぎ牧場の情報をまとめた公式サイトを作る
- 時間とお金をかけない
- スマホでも閲覧しやすいレスポンシブ対応
- 問合せフォームをつける
環境
ウェブサイトを作るにはサーバとドメインがあればオッケーです。
今回は新しくお金をかけたくない、でも独自ドメインにしたいので、サーバもドメインも、すでに運営しているウェブサイトから間借りすることにします。
エコです（たぶん違う）。
サーバ
サーバはXServerのいちばん安いプラン（X10）を使います。月1,000円ぐらい。
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
というかすでに使っているので、そこに間借りします。XServerのなにが素晴らしいかというと、
- WordPressが高速（さくらと比較するとめっちゃ早い）
- 1つのプランで複数サイト作り放題、作りやすい
- 管理画面から操作するだけでWordpressのインストール、サブドメインの設定まで完了しちゃう
という3点ですね。パフォーマンスが許せばこの1つのプランだけでいくらでもWebサイトが作れます。やべぇ。
ドメイン
ドメインもわざわざ新しく取るのもアレなので（いいのか？）、既存のドメインのサブドメインを使います。これなら新しい費用はタダです。ドメインはひとつ取っておけばいくらでもサブドメインが切れるので色々便利です。
この作業もXServerの管理画面だけで完結します。便利。
注意点としては、サブドメインの設定が反映されるまで半日ぐらいかかることでしょうか。
WordPressの無料テーマ選び：Invert Lite
さて、環境ができたのでWordpressの無料でクールなテーマを探しました。「Wordpress テーマ 無料」で検索すると本当に冗談のような数が出てきて、探すだけで日が暮れます。
コツとしては、次々試してダメそうならとっとと見限ることでしょうか。
今回選んだのはこちら。
シャレオツなのに設定が簡単で良かったです。独自の設定画面に入力していくだけで、自然とかっこ良くできちゃう親切設計。
そしてレスポンシブ対応。ありがとうレスポンシブ対応。
が、1個だけ問題がありまして、
Invert Liteの画像が縦長になるトラブル
こんなん。
ものすごく微妙なんですけど、スマホで表示した時にトップページの画像の縦横比が微妙に崩れて縦長になっちゃうんですよね。気にしなくてもいいっちゃあいいのですが、一応このようにすると修正できます。
style.cssの.flexslider imgの部分を
.flexslider img {width: 100%; height:auto !important;}
こう。あんまり!importantは良くないと聞きますが、まぁ直るからいいじゃん。
気にならない方はほっといても大丈夫です。
問い合わせフォームを付ける
あとは一応お問い合わせフォームを取り付けて完成です。
お問い合わせフォームは極めて有名なContact Form 7をほとんどデフォルト設定で使いました。
Contact Form 7 | Just another contact form plugin for WordPress. Simple but flexible. [日本語]
Contact Form 7は日付の入力あたりにhtml5関連の微妙な問題があるのですが、逆に言うと日付を入力しなければ全然オッケーかつ楽勝です。
設定を変えたのは「メール」タブの「メール（２）を使用」にチェックを入れただけです。これを入れておかないと、問い合わせをしてくれた人に自動返信メールが送られません。
自動返信メールがないと、
- 入力したメールアドレスは正しいのか？
- ちゃんと問い合わせメールが送れたのか？
- メールのフィルターかかってないか？
などの確認が面倒になってあとで後悔するので、ぜひ設定しておきましょう。
だいたい問合せって忘れた頃に来ますからね。
反省
今回いちばん時間がかかったのは画像です。
トップページのこの画像、一見するとただゲーム内に出てくるうさぎの画像を拡大しただけのように見えますが違います。
要求された画像サイズが大きかったので、普通に拡大すると輪郭がボケボケの拡大コピー丸出しになってしまうのです。
そこで、もとの画像を参考にしてうさぎを描き直しました。超面倒臭かった。そしてきっと誰も気にしない（笑）。
このうさぎ画像問題がなくて、かつWordpressのテーマ選びに時間を使わなければ1時間半ぐらいでサイトが作れたと思います。いい時代になりました。
Webサイトを作る！となるとすごく難しそうなイメージがありますが、ちょっと勉強してなれてしまえばいくらでも簡単に作れるようになりますので、興味のある方は恐れずガンガンやってみてはいかがでしょうか。失敗してもべつに誰も困らないしね！！
さて、肝心のコンテンツが空っぽだから何か作ろぉぉぉぉっと。
その前に、アプリ自体のアップデートが先かなぁ…ふえぇ。
じぃーまでした。