自営の個人店のためのお金をかけないホームページの自作

ひな形（叩き台）のhtmlとcssの一部を必要に応じて書き換えるだけ

こんな方におすすめ

PCをある程度使えて、文字の半角全角とかファイルの拡張子なんかを知っている
ホームページビルダーなどを使って、迷宮のようなサイトを自作したことがある
WordPressを使って、ブログなどをやってみたが思い通りにカスタムできずに諦めた
簡単な画像加工ができる（ソフトを使える）か、イラレやフォトショ使いの友人がいたりする

ここではシンプルな１枚完結型のページを、ひな形（たたき台）のhtmlファイルを書き換えて、自店用に改造して作ってしおまう・・・

そうすると、内容の書き換えも写真の差し替えも自由にできるし、自分で作って（カスタムして）アップロードしたサイトだから、進化させたければそれなりに勉強もする。

Ag2O

そもそも、Web上の暖簾ともいえる自店のサイトを業者に丸投げってどうなのよ・・・。
オーバースペックなサイトは要らないから、実用十分な名刺代わりのサイトは自分で作って自分で管理しようよ。

・・・という話です。

前の記事へ

: 実店舗の小規模商売はホームページにお金をかけても（ry
実店舗の商売はSEOを頑張っても同業者との順位争いにしかならない件
続きを見る

たたき台であるひな形のhtmlファイルを書き換えて、自店用に改造するだけ・・・と一口に言っても、例えばホームページ上の画像を差し替える時に、ファイル名＋拡張子（.jpgとか.pngとか）の理解が無いと進みません。

サーバー上のファイルの絶対パスと相対パスの違いなどの理解もあった方が、この先何かとスムーズだと思います。

そんなちょっとした基礎知識などを、一度おさらいする必要があるかも知れません。
これはどうしても避けては通れません。

そこで、

htmlを書いてホームページを作ると言えば【とほほのwww入門】が王道でしょう。

基礎を確認する意味で、

http://www.tohoho-web.com/wwwbeg.htm

（ ↑ ）の、

【とにかく作ってみよう】
（ ↑ ）のページだけでも熟読してみてください。

htmlの基礎を学んで１から作りましょう・・・なんてムリムリムリ！
店を回すので手いっぱいで、１から学ぶくらいなら金払って業者に頼みます。

master

Ag2O

・・・ですよね。

ですからここでは、何度も言っているように「たたき台」となるテンプレートというかサンプルの中身のhtmlを改造しまくって、オリジナルのホームページにしちゃいましょう。
という話です (;'∀')
そうこうしているうちに、htmlの中身の意味もだんだんと分かってきます。

たたき台のhtmlファイルを書き換えてオリジナルのホームページに

ペラ１枚のホームページ（ウェブサイトの事を言っています ^^;）は、業種によって適したレイアウトが違うでしょう。

この「ひな形（テンプレート）」は、小さなお店用のものですから、大きな写真も使いませんし、構造が単純で改変カスタムしやすいと思います。
全体の色合いが暖色系なので、アットホームな雰囲気の例えば美容院とかサロンなどにそのまま使えます。
医療系であるとか電気や機械関係などにはクールな寒色系が合うでしょうから、cssをいじる事で色合いなどは変更できます（後述）。

なにはともあれ、ひな形を使ったサンプルページ（リンク先 ↓ ）を見てみましょう。

https://ameameblog.com/curry-canthara/sample/sample.html/
リンク先のページは、ひな形そのままというか、たたき台として中身を書き換える用のサンプルです。

↓ の画像のリンクは、実際に架空の店舗をでっち上げたテストページです。

内容が無いようでは不慣れな人がhtmlを書き換える時にそれぞれの箇所の様子が分かりにくいかと思い、架空のカレー店を想定してみました。
（※ 内容文が不謹慎なジョークになっているのはご容赦ください）

流行りのレスポンシブデザインとかではなく、PCで表示してもコンテンツの幅を制限してスマホやタブレット端末で見た時のイメージそのままです。
メニューボタンなど無く、ドロップダウンメニューもありません。

あくまでもスマホ閲覧を前提とした、下にスクロールしていくだけのペラのページです。
レスポンシブデザインでなくともPCから見ても見難いということはないでしょう。

ただ、店の商品のメニュー紹介等について細かく書き連ねてしまうとかなり縦長のページになってしまうので、初期状態では折り畳まれて隠されています。

このテストページは、架空とはいえ生意気にも所在地も電話番号もあって、緯度経度のデータも実際の場所も（架空ですが）あります。
実際に『高崎カンターラ』などの文言で検索してみると

こんな風に店名＋地域名で検索された時にちゃんと見つかるサイトが、名刺代わりに使えるサイト（ホームページ）ですね。

この架空店舗のテストページは、実際のお店は存在しませんがその場所そのものは現実にあるので、もし、本当にこのお店を開店したとしても、そのまま使えるホームページになっています。

折り畳みを開くボタンは画像に下矢印を薄く重ねています。

ロゴ文字（画像）やイメージ画像にロゴを入れるとか、こうしたちょっとした画像の加工が出来るとすっきりしたホームページが作りやすいです。

ホームページ作りは

ロゴ文字やボタン，店内イメージの画像加工（サイズ変更も含む）
html記述（書き換え）と、必要に応じてcss書き換え
借りたサーバーにFTPソフトを使ってアップロード

という流れになるので、ホームページ作りの材料を仕込む段階で画像の加工は必須です。
今ではスマホアプリで画像を加工できできたりしますし、必要ならば素材の画像（ページの基礎にもなるロゴ文字とかトップ画像だけでも）だけを誰かに頼むのも一法かと思います。

もちろん店舗や料理の写真は用意して、大きすぎない画像サイズに変更したりトリミングしたりの小加工はご自分でやらないと、後々メニュー変更などの際に写真の差し替えに困ります (^^;

画像の用意ができたら、あとは・・・

ローカル（PC上）にあるhtmlファイルをブラウザで開いて
確認しながらエディターでhtmlを書き換える

これの繰り返しの作業になります。

html編集に使うエディターは、Windows付属の「メモ帳」でも十分いけますが、htmlファイルの内容を色分け表示してくれる「Mery」（ ↓ ダウンロードできます）というテキストエディターをお勧めします。

https://www.haijin-boys.com/wiki/メインページ

Meryの「ツール」＞「オプション」＞「記号」の設定で、全部の項目にチェックを入れておくと使いやすいと思います。

具体的な作業の流れ

ひな形をダウンロードして、圧縮ファイルを展開すると【Template_Canthara】という名のフォルダが出来ます。
このフォルダの中の【index.html】ファイルを、
①手持ちのブラウザ（Edgeやchromeなど）で開いて確認しながら
②先述（ ↑ ）のMery（メモ帳でもOK）で開いて編集します。
htmlの中身の<body>以下、相対パスの記述でいける範囲を作り込みながらブラウザで確認して、「これで行こう(*'▽')」・・・となってから、
レンタルサーバーを借りて、独自ドメインを取得するなり（SSLに対応していた方がいい）して、URLが決まったら、【index.html】の中の残りの絶対パスが必要な箇所を完成させます。

（ ↑ ）さくらのレンタルサーバーは安くて安定していておススメ (*‘∀‘)
FTP （ファイル転送プロトコル）ソフト（FFFTPがおススメ）で、サーバーにアップロードして、ブラウザから正規のURLで表示の確認。
動作やリンク先など間違いがなければ、【index.html】の中の
<meta name="robots" content="noindex,follow">のnoindexからnoを取ってindexに変えてアップロード（上書き）して、Google検索にかかるようにします。
googleのSearch-Consoleからsitemapを登録（しなくてもよい）
借りたドメインのURLを検査（しなくてもよい）
１週間から１０日程度（？）待って、店舗名＋地域名などで見つかるかチェック。