250円/月のロリポップサーバで昔ながらのホームページとWordPressを同居させてみる

2019/06/01

bouquets_top

お料理教室のホームページを作ることになり。
久しぶりにこれまでのWeb制作(素人)スキルを総動員。

ホームページとWordpressを同居

とりあえず、このサイト同様にロリポップでWordpressが使える一番低額な250円/月~のロリポプランを契約。

最初はWordpressだけで全てやろうと思ったのだが、オーソドックスな

Wine Salon h ::: 目黒にあるワインとフレンチのサロン形式のお料理教室 ソムリエ・料理研究家 阿部寿子 :

こんな感じのサイトを作りたいというオーダーを受けて。

ロリポップの管理画面で簡単インストール機能で、WordpressをサイトのTOPではなく「/wp/」以下にインストールして同居させることに。.htaccessの中で、

# BEGIN WordPress

RewriteEngine On
RewriteBase /wp/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]

# END WordPress

という設定をしないと、403エラーや、500エラーと格闘しつつ、なんとか同居成功。

ちなみに、テーマはSimplicity | SEO最適化済みのシンプルな無料Wordpressテーマ : をベースに極力すっきりしたブログに。デザインのカスタマイズもやりやすく、自分は最初から「Stinger3」にして苦労したけど、こういうのからスタートもいいかも。レスポンシブウェブデザインにも対応してるみたいでSEOにも強そう。

投稿ごとのヘッダに更新日がでるのがいらなかったので、datetime.phpから以下の部分を削除した。

 is_update_date_visible

静的ホームページの無料テンプレートをベースに改造

いわゆるベタなホームページ作成なんていまどきはやらないのか、無料テンプレートを色々探すも中々見つからず・・・そんな中、ちょうどよく

■無料 ホームページ デザインテンプレート | デザインなう | 無料テンプレート :

この中から「すっきりソフトな印象向け」がシンプルだったので、広告もコピーライトもいらないということで、拝借して改造することに。

トップページに画像がフェードイン・フェードアウトで表示されるようにしたいという要望を受けて

■jQueryを使って複数画像をフェードインフェードアウトで切替表示 :
こちらで、JSをいじって設定。

また、問い合わせフォームを付けたいということで、ロリポップのデフォルトでcgiが使えるということだったので

メールフォームCGI UTF-8対応 | ホームページ制作素材ダウンロード :

これをカスタマイズしてアップロード。最初、UTF-8版があることに気づかずに設定していて文字化けに悩まされ、send.cgiで無変換設定など試行錯誤するもどうしてもタイトルの文字化けが直らないのでタイトルは英文字で妥協することに。thanksページもベースに作ったページを元に適当に作成して差し替え。
普段使ってるメールアドレスへ問い合わせ時にメールが入るように。

フォントをホームページとブログでそろえる

妻のMacbookがSafariで、フォント指定していないホームページ部分が明朝体で、ブログの方がフォント指定しているためゴシックになるのをそろえたいということになり。Wordpressのスタイルシートでfontの指定の部分をがんばっていじろうと思うも疲れたので、一旦削除。

body {
font-family:
'Hiragino Kaku Gothic ProN’,
Meiryo, sans-serif;
font-size:1em;
/*height:100vh;*/
}

あとは、

title

こんな感じのフォントにしたいということで、Macには最初から入ってるらしい「Zapfino(ザッフィーノ)」フォントを無料で探すも、これまた色々あるので4つくらい入れたうちからよさ気なものをパワーポイントで打ち出し、スクリーンショットからのIrfanviewで切り出し。なんだかんだ、これが一番早かった。Homeボタンなどを作成。

なんだかんだで大体出来た

たまプラーザのお料理教室「Bouquets champetres(ブーケシャンペトル)」

今回、珍しかったので、「.tokyo」ドメインをムームードメインで取ってみた。年間で900円くらいだったし。そこで.jpにしなくてもいいかなと。

■おまけ(まだ試せていないけど)
静的ページにWordPressの新着情報を表示! :

※今回撮影のために購入したカメラ。大変リーズナブルで満足です