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

公開日: : 最終更新日:2017/10/18 ネットサービス/ブログ , ,

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

関連記事

絵心がないが無料体験版のillustratorで1日でデザインするシフォンケーキ屋さんの看板ができるまで

突如、看板のデザインをすることになった 実家(山梨)にいる母(68歳)が、去年から自宅に小屋を

記事を読む

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

WordPressをStinger3でカスタマイズ ★WordPressテーマのSTINGER

記事を読む

コインチェックと大塚さんとわたし

フラッシュバックする記憶 仮想通貨取引ビジネス一躍脚光を浴びた。いや、浴びすぎたスタートアップ

記事を読む

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

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

記事を読む

世界一小さいAndroid端末 POSH Micro X S240b は、果たして実用に耐えうるのか?

結論から言うと 完全にテザリング端末として超割り切って使用する分にはなんとか使える。

記事を読む

掛け値なしに、お世辞でなく、ビザスクはすごいサービスだと思った2016年。

気づけば色々お世話になっていたサービス「ビザスク」について、ここいらで1つ振り返ってみた。 去年中

記事を読む

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

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

記事を読む

ここのオーナー(えくしび)が社会人になった1998年から更新している、所謂「ホームページ」のトップのテンプレートは10年周期で更新されていた

1998年春に立ち上げバージョン 社会人になった1998年に、ASAHI-NETプロバイダ

記事を読む

またまたStinger3とWordPressのカスタマイズあれこで、だいぶしまったデザインへ

また、色々いじくってみた ★全体カラムの左右を入れ替え STINGER3の本文記事とサイドバ

記事を読む

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

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

記事を読む

a

Message

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

a