エディターでhtmlを書き換えて作る１枚完結サイト（２）

: エディターでhtmlを書き換えて作る１枚完結サイト（１）
Meryでhtml編集、GoogleChromeで表示確認、以下繰り返し・・・
続きを見る

たたき台の書き換え～アップロードまでのプロセス

htmlファイル内の文章を自店のものに書き換える
掲載する写真を幅640pxに縮小して名前を変更して差し替える
必要に応じてcssを書き換える
ブラウザで確認しながら1～3を繰り返して納得のいくページに作り替える
ファビコンやボタン等のアイコンを自店のロゴなどに差し替える
レンタルサーバーを契約して独自ドメイン取得
<head>部分やSNSシェアボタン部分など、自店のURLを当てはめる箇所を書き換える
サーバーにアップロードしてブラウザで確認
リンク間違いや修正したい箇所などは早めに修正
グーグルのクローラーを待つ
グーグルにインデックスされるのを待つ

・・・（↑）みたいな流れです。
羅列すると面倒臭そうですが、やってみると 1．～ 4．以外はどうってことないです (^^;

ダウンロードして展開したフォルダ【Template_Canthara】の中に、更に【Template_Canthara】フォルダがありますから、これは好きな名前に換えてしまいましょう。
名前を変える時には、このあと取得する予定の独自ドメインと同じ名称を半角英数字の小文字を使い、記号も（-）くらいにしておいた方が後々都合がいいかも。

先ずは（１）

実地の店舗に関連する具体的な材料を当てはめて、【index.html】内の現段階で書ける部分を書き換えていきます。

展開した【Template_Canthara】フォルダを開くと【index.html】がありますから、それをエディター「Mery」で開いてください。

Meryのメニューバーから、「ツール(T)」＞「オプション(O)」＞「記号」の設定で、全部の項目にチェックを入れておくと使いやすい件は前回触れましたが、更に・・・

Meryの「表示」から、【☑ウインドウの右端で折り返し(W)】を選択して、チェックマークを入れておきましょう。

では、上から行を順にジャンジャン変えていきます (^.^)

１行目から６行目・・・

１行目から６行目までは触らず、７行目もアップロードして確認してから書き換えますから今は放置です。

８行目

<TITLE>■■■～このサイトのタイトル～■■■</TITLE>の、
「■■■～このサイトのタイトル～■■■」部分を書き換えます。

<TITLE>高崎市筑縄町のカレー料理『なんたーらカンターラ』</TITLE>など、所在地と業種と店名を端的に入れるのが分かりやすいと思います。

検索結果に表示されるサイトのタイトルですから重要です。
長くならないように３２文字以下程度でおさめるのが吉。

※ ここに書いたタイトルは、同じものをコピペで
１９行目と
２５行目、
７８行目、
４６６行目、
４８３行目、
にも入れたいので、この段階でやっちゃってもいいですし、その部分でまた説明しますのでとりあえず先に進んでもいいです。

９行目

飛んで、１９行目と２５行目

８行目で書いた３２文字以下くらいのタイトルを、それぞれの行の
～ content="■■■～このサイトのタイトル～■■■">の、 “ から “ 内に、８行目からコピペ。
ここは深く考えずに、まるっとコピペで済ませてしまいましょう。※

２０行目と２６行目

９行目書いた１００文字以下くらいのサイトの説明文を、それぞれの行の
～ content="■□■□■□■□■□■□■～このサイトの説明文～□■□■□■□■□■□■□■">の、“～“に、９行目からコピペ。
ここも深く考えずに、まるっとコピペで済ませてしまいましょう。※
あとでこの辺を書き変える時には同じ変更をすべき箇所があったかな程度には記憶に留めておきましょう。

※ 引用符「“　”」の記号を消したりしないように注意

で、２８行目

先ず、あなたが書き変えているこのサイトのイメージカラーは何色ですかと訊かれたらイメージできますか？
<meta name="theme-color" content="#ffdd00">
この行では、スマホからGoogle Chromeなど特定のブラウザで見た時にアドレスバーの背景色が色分けがされるのですが、その色を指定しています。
因みに、初期設定で入れてある【インチキカレー屋カンターラ】の色は黄色（#ffdd00）です。
カラーコードを知っている人は好きな色を指定してください。
知らない人は「#ffdd00」をGoogle検索してみてください。

こんなスライドバー付きの便利ツールが出てきます。
好きな色を見つけて（↑ ここ）のカラーコード（#▲▲▲▲▲▲）を、
～ content="#ffdd00">の、“ から “ 内にコピペ。