ウェブサイト ホームページなど

エディターでhtmlを書き換えて作る1枚完結サイト(2)

  1. HOME >
  2. ウェブサイト ホームページなど >

エディターでhtmlを書き換えて作る1枚完結サイト(2)

エディターでhtmlを書き換えて作る1枚完結サイトの続きです。

 

前の記事
iPhone6/7/8plusで表示
エディターでhtmlを書き換えて作る1枚完結サイト(1)

Meryでhtml編集、GoogleChromeで表示確認、以下繰り返し・・・

続きを見る

 

ひな形ダウンロードページへ
ダウンロードページへ

 

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

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

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

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

 

先ずは(1)

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

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

Meryの「表示」>ウインドウの右端で折り返し

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

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

 

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

 

1行目から6行目・・・

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

 

8行目

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

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

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

※ ここに書いたタイトルは、同じものをコピペで
19行目と
25行目、
78行目、
466行目、
483行目、
にも入れたいので、この段階でやっちゃってもいいですし、その部分でまた説明しますのでとりあえず先に進んでもいいです。

 

9行目

<meta name="description" content="■□■□■□■□■□■□■~このサイトの説明文~□■□■□■□■□■□■□■">の、“  から 内に、100文字以下程度でサイトの説明を書き換える。
検索結果のタイトルの下に表示される事が多い(Googleが勝手に他の文章を持って来ることもある)ので重要。

 

飛んで、19行目と25行目

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

 

20行目と26行目

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

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

 

で、28行目

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

 

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

 

29行目と30行目

店舗の所在地の緯度と経度です。

グーグルマップでエゴサーチしましょう。

店舗の緯度経度拡大地図を表示すると、アドレスバーに現れる文字列の真ん中あたりの@直後、前の2つの数字がそれです。
~ content="36.▲▲▲▲"><!-- 店舗の緯度 -->の、“  から 内にそれぞれコピペ。

ここまでで、おおよそ<head>部分の現段階で書き換えるべき箇所は書き換えました。

グーグルのアクセス解析「Google Analytics」を使わないならば、48行目から56行目までをざっくり削除してくれていいのですが、そうすると行番号が変わってしまって今後の説明がややこしくなるので放置してください。

せっかく自分で自分のサイトをアップするのですから、Google Analyticsは後でもいいので見れるようにしておくといいかも。

 

ひな形ダウンロードページへ
ダウンロードページへ

つづく

 

続きを読む
1行目から111行目
エディターでhtmlを書き換えて作る1枚完結サイト(3)

エディターでhtmlを書き換えて作る1枚完結サイト(3)

続きを見る

 

 

前の記事へ
iPhone6/7/8plusで表示
エディターでhtmlを書き換えて作る1枚完結サイト(1)

Meryでhtml編集、GoogleChromeで表示確認、以下繰り返し・・・

続きを見る

スポンサーリンク

-ウェブサイト ホームページなど

Copyright 2001-2021 Atelier_Ag2O. Never reproduce or replicate without written permission.