１ページ完結型ページならではのコンテンツの並び
たたき台であるひな形htmlファイルの中身は、店を知っている人が見ても欲しい情報がすぐ見つかり、初めての人には店のウリや雰囲気，提供されるメニューなどのイメージが掴みやすいサイトを意識しています。
もちろん不要な部分は削除したり、内容を並べ替えたりもできます（多少手間がかかったり、しくじると表示が崩れたりしますが・・・それも経験です）
ページ内コンテンツの並び
- 一番上にh1で店名または検索して見つけてほしい文言などの帯
- 告知，お知らせ，最新情報などのセクション
- メニューなど提供するサービスを折り畳み部分に収納してあるセクション
- 店のウリやPRになる特色などをアピールするセクション
- 所在地と地図、行き方などの説明セクション
- 店主の挨拶やプロフィール
- SNSなど他の情報へのリンク（それぞれのセクション毎に電話発信リンクボタン）↑ のような簡単な構造の１ページです。
セクション順を入れ替えたり削除したり、動画を枠内で表示させたりももちろんできます（オプションというかhtmlの追加記述が要りますが）。
ひな形ダウンロードページへ
自分のサイトを持っていない段階から
自前サイトをアップロードするまで
ここまでの２記事で、だいたいの趣旨や流れを説明してきていますが、書き方がとっ散らかっているので整理しましょう (;'∀')
前前の記事
-
実店舗の小規模商売はホームページにお金をかけても（ry
実店舗の商売はSEOを頑張っても同業者との順位争いにしかならない件
続きを見る
前の記事へ
-
自営の個人店のための お金をかけないホームページの自作
続きを見る
もう一度作業の流れの確認から（ ↓ ）です。
具体的な作業の流れ
- ダウンロードページ（ ← ）から、ひな形をダウンロードして、圧縮ファイルを展開すると【Template_Canthara】という名のフォルダが出来る。
- このフォルダの中の【index.html】ファイルを、
①手持ちのブラウザ（Edgeやchromeなど）で開いて確認しながら
②おススメエディターのMery（メモ帳でもOK）で開いて編集。 - htmlの中身の
<body>以下、相対パスの記述でいける範囲をブラウザで確認しながら作り込んで、気に入ったページが出来たら、 - レンタルサーバーを借りて、独自ドメインを取得。
URLが決まったら、【index.html】の中の残りの絶対パスが必要な箇所を完成させる。 - おススメのFTP （ファイル転送プロトコル）ソフトFFFTPを使ってサーバーにファイル一式をアップロードして、ブラウザから正規のURLで表示の確認。
- 動作やリンク先など間違いがなければ、【index.html】の中の
<meta name="robots" content="noindex,follow">のnoindexからnoを取ってindexに変えてアップロード（上書き）して、Google検索にかかるようにします。 - googleのSearch-Consoleからsitemapを登録（しなくてもよい）
借りたドメインのURLを検査（しなくてもよい） - １週間から１０日程度（？）待って、店舗名＋地域名などで見つかるかチェック。
・・・（ ↑ ）のような流れであるのは前回も書きましたね (*^^)
上の４～６など、レンタルサーバーを借りて独自ドメインを取るまでは、どうしたらいいか分からず不安かも知れませんが、後に説明します。
FTPソフトも、借りたサーバーから受け取った内容で設定して、何度かアップロードなどやってみればすぐに慣れてしまうと思います。
実質的には、上の２～３くらいまでの範囲が肝になるので、そこのところを実際のhtmlファイルを開きながら順に書き換えていきましょう。
で、（ ↓ ）心と体もといPCの準備や使いたい写真などの用意をしましょう。
自分のPC側の準備
- エクスプローラーの【表示/非表示】の設定で、ファイル名拡張子を表示する設定にしておく。
- ファイルをサーバーにアップロードする用意として、【FFFTP】（ ← ダウンロードできます）をダウンロード，インストールして使えるようにしておく。
- htmlやcssファイルを書き換えるエディターとして【Mery】（ ← ダウンロードできます）というテキストエディターをダウンロード、解凍して使えるようにしておく。
- はじめて言いますが、ブラウザは【GoogleChrome】をダウンロード，インストールしておくと、それで話を進めますので都合がいいです。
- サイト内で表示させたい店の外観写真や店内風景，ロゴ文字の入った看板，店主の写りの良い写真，代表的なメニューの写真などを10～20点くらい用意しておく。
（↑ ここが意外と手間ひまかかるのです。ページの書き換えを進めていくと必要性が分かると思うので、サイズ変更などはそれからでも良いです。） - 一番上の画像に使うロゴ文字入りの店舗写真や、開くボタンや小さなアイコン用の画像を、店のロゴなどを加工して作っておくとかっこいいかも（いや、必須だと思います。）
本当はこちら（ ↓ ）が先ですが、自分の中で決めておくことなど・・・
※ ここまでずっと言い忘れていましたが、Windows（今は10）上での操作の解説になります。MacやLinuxの方は、html書き換えの基本は同じなので、ブラウザはMacならばsafari（？）LinuxならFirefoxなど（？），テキストエディタとFTPソフトはよく分かりません m(__)m
ご自分で確保してください。
準備が出来たら始めましょう
ダウンロードした圧縮ファイルは、【ダウンロード】のフォルダに入っていますか？
そしたらその【〇〇〇.zip】を右クリックして、「すべて展開(T)...」を選びます。
「ファイルを下のフォルダに展開する(T)」で、フォルダのパスが選択できるようになっていますから、そのまま「downloads」フォルダ内でもいいですが、アクセスしやすいようにとりあえず「desktop」に展開（解凍）しましょう。
右側の「参照(R)...」ボタンを押して、エクスプローラーからデスクトップを選びます。
この時、OneDriveが生きていると、デスクトップが２箇所にあったりして、うっかりすると見失うので注意 (;'∀')
デスクトップに【Template_Curry Restaurant Canthara】のフォルダが出来ましたか？
そしたらそれを開いて、ウインドウ内の何もないところを右クリック→「表示(V)」から「中アイコン」を選んでおきましょう。
【index.html】をMeryで開き、かつ、GoogleChromeでも開く
使うソフトは、（ ↑ 自分のPC側の準備）で用意したテキストエディタのMeryと、ブラウザのGoogleChromeです。
メモ帳とFirefoxとか、他のソフトでも問題ありませんが、使うソフトが一緒だと話が通じやすいかと・・・
【index.html】を右クリックで「プログラムから開く(H)」でソフトを選択して開いてもいいですが、Meryは出てきませんね ( ;∀;)
Meryを解凍したフォルダから、【Mery.exe】を右ドラッグで、デスクトップにショートカットを作っておいて、【index.html】をそのアイコンに左ドラッグ＆ドロップで開けます。
GoogleChromeは、インストールすると「プログラムから開く(H)」の項目に出てくると思いますが、もし無ければ「別のプログラムを選択C)」を選んで、GoogleChromeを選びましょう。
１度選んで開いておけば、次回からは「プログラムから開く(H)」の選択肢にGoogleChromeが出てくると思います。
もちろん、GoogleChromeのショートカットをデスクトップに置いておいて、ドラッグドロップで開いたっていいです。
PCの操作なんて、道筋は幾通りもありますから結構なんでもいいんです。
それぞれのソフトで開いたウインドウの位置と大きさを調節して並べると、（ ↑ ）こんな風になります。
Meryでindex.htmlファイルを書き換えて保存した後、Chromeの表示を更新すると、どこがどう書き換わったのかが、見てすぐに分かります。
ついでにChromeがアクティブになっている時に【Ｆ１２】キーを押してみてください。
Chromeのデベロッパーツール（要素の検証機能）という便利な機能が備わっています。
で、（ ↑ ）の赤矢印のアイコンをクリックしたら、その左側にメニューバーが現れますから、さらに左側の「Responsive」と表示してあるドロップダウンから、一般にはやや古い（iPhone6/7/8）あたりを選んで・・・
さらに、少し右側にある【・・・】を縦に並べたアイコンから「Show device frame」を選んでみましょう（ ↓ ）。
すると、こんな感じで、スマホで表示したときのイメージを確認しながら作業を進められます。
もう一度【Ｆ１２】キーを押せば、通常の表示に戻りますから、PCで見た時のイメージも確認しながら進められます。
デスクトップ上をこの状態にして、index.htmlをMeryで編集→保存。
GoogleChromeで表示を更新→確認。
この作業の繰り返しだと思ってください。
実際には作業を進めたファイルを壊すと努力が無駄になりますから、Meryで書き進めてChromeで確認して、不備が無いポイントポイントで、こまめにバックアップ（index.html を適当にコピーして、202105052210-index.html みたいに日付時刻を付加した名前に変えておくか、Meryで【ファイル】→【名前を付けて保存(A)...】から、「202105062115-index.html」にして保存するなど）しながら進めます。
これをやっておくと、ウェブサイトを過去の状態に戻すことも楽ですから (^-^;
つづく
ひな形ダウンロードページへ
次の記事へ
-
エディターでhtmlを書き換えて作る１枚完結サイト（２）
エディターでhtmlを書き換えて作る１枚完結サイト（２）
続きを見る
前の記事へ
-
自営の個人店のための お金をかけないホームページの自作
続きを見る