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

公開日: : 最終更新日:2016/12/10 ブログ , ,

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の新着情報を表示! :

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

a

関連記事

WordPress4.0にVerUPしたくてバックアップしようとして色々ハマるの巻

WordPress 4.0 が利用可能です ! 更新してください。 と出たので気軽に更新しよう

記事を読む

Stinger3カスタマイズ(マイ)ブーム再燃

気が向いたので、またStinger3をいじってみることにした。 どうやら子テーマというのを作成

記事を読む

気分転換に、LOGASTERで、適当にロゴを作ってみるテスト

なんとなく2年間ほったらかしだったので。ダサいロゴだったのを変更することに。 変更前

記事を読む

男もすなるblogなるものを(初期契約と設定)

まずは、地ならし。 ○ロリポップ!レンタルサーバー 【 ご契約プラン 】 ロリポプラン

記事を読む

サイドバーのウィジェットが落ちるのを直してみた

サイドバーのウィジェットが、ある程度下の方へいくと突然消えて気持ち悪いのをなおしい衝動に駆られて調査

記事を読む

WordPressのテーマ”Stinger3″のエントリーごとのSNSシェアボタンにLINEを追加した

時代の流れでLINEにも対応 すっかりここのブログも約半分はモバイルからのアクセスということで

記事を読む

WordPressをStinger3でカスタマイズなど

★WordPressテーマのSTINGER3公式サイト ○紹介されているプラグインをひと通りイ

記事を読む

a

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

a