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

関連記事

Windows10でGenymotionで音がでなくなったので諦めてBlueStacksに乗り換えたが、やや今ひとつだったら、NOXが最高だった

ただただ、Androidアプリの画面を動画で録画したくて 仕事で扱っているのはいわゆるスマホネ

記事を読む

セゾンの永久不滅ポイントを等価交換で銀行に振り込む方法を発見した!

永久不滅ポイントってありますよね 永久不滅ポイントサイト |永久不滅.com(ドットコム) :

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

男もすなるblogなるものをWordpressとロリポップで開始 まずは、地ならし。 ○

記事を読む

単焦点のレンズが欲しいけど先立つモノが無いのでPIXTAをはじめてみた

せっかく先日買ったミラーレス一眼カメラ・・・ 小学1年生にあがった長女が生まれる前に買ったコン

記事を読む

a

Message

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

a