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

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

前の記事へ

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

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

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

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

・・・（↑）の流れで、今はまだ1.の段階です。

まだ（１）

ですが、<head>部分の考えて書き換える部分は、前回で既にやっつけています。
URLが確定したら書き換える部分はあとまわしにして放置しつつ、どんどん行きます。

７８行目

いよいよブラウザで見た時に表示される部分です。

一番上の色帯の中に白抜き文字で表示されている部分を書き換えましょう。

ここの帯の色を変えたいとか、文字色を変えたいなんていう我儘 (^'^) な人は・・・、

ど素人の私が言うのも烏滸がましいのですが、おおいに見込みがあります (*'▽')
cssの書き換えは、このシリーズの後の方で触れますが、ご自身でググるなりしてcssを書き換えながら進めましょう (^^)

７８行目の <h1><a title="■■■～このサイトのタイトル～■■■" href="./">■■■～このサイトのタイトル～■■■</a></h1>

の、“ から “ までの間にある「■■■～このサイトのタイトル～■■■」の部分と、
“ “ の付いていない「■■■～このサイトのタイトル～■■■」の部分両方に、前の記事で書き換えた、８行目の<TITLE>■■■～このサイトのタイトル～■■■</TITLE>の、「■～■」の部分（新しく書き込んだサイトのタイトル）をコピペします。
（＜TITLE＞とか＜/TITLE＞の文字は要りません）

検索結果を左右する文言ですから、８行目の説明にも書きましたが【地域名】【業種名】【屋号】がさらっと入っているといいですね。

８１行目

初登場の画像です。

コメントアウト（ で挟んだ部分）した説明の通りです。

【image】フォルダに入っている、image001という名の .png という拡張子の画像ファイルが、ここで表示されます。
最大幅500ピクセルで、横幅いっぱいに表示される設定です。

お店の写真や料理の写真に、店のロゴ文字などを加えた画像を編集して作ってあれば、それをここに表示しちゃいましょう。

例えば「orenomise.jpg」という写真（画像ファイル）があったら、オリジナルはいじらずに【image】フォルダにコピーします。

orenomise.jpgの名前をorenomise-s.jpgなどに書き換えて（拡張子はいじらない）手持ちの編集ソフトで開き、横幅640px程度に縮小します。

ファイルが大きいとデータ量が多いので、サイトの表示スピードに影響しますから、必要以上に高精細な画像は縮小（さらに圧縮できるとより小さくできる）しておいた方がいいです。

そしたら、その「orenomise-s.jpg」の拡張子も含めたファイル名をコピーして、

<img src="image/image001.png"～

の、image001.png　部分を選択してペースト（上書き）

その後に続く、
alt="image001"

の、image001　部分（“ から “ までの間）には、この写真（画像）の説明（店名とかキャッチコピーとか）を普通に全角文字で記述するのがいいです。

何かの都合で画像が表示できない時に、ここの文字列が表示されます。

Meryのツールから【ファイル(F)】＞【上書き保存(S)】したら、

index.htmlを開いているChromeで再読み込みして表示を確認してください。

前前回説明した、「スマホで表示される状態」と「PCで見た状態」を【F12】キーで行き来しながら確認できます。

上端の色帯の文字と、すぐ下の画像が書き換わっていましたか？

もしだめなら、ここまでの操作のどこかで間違いがありますから、もう一度見直しましょう (^^;

８６行目

<h2><a href="index.html">■■■～あいさつ文～■■■　</a></h2>

８１行目の画像の下に続く、あいさつ文の見出し部分です。

『当店の新型コロナウイルス防止策について（お知らせ）』など、まずお知らせしたい文章を続けますから、それに見合ったあいさつ文の表題を入れましょう。

例によって、■から■までを書き換えます。
">などのタグや記号には触らないようにしましょう。

８９行目

８６行目の「あいさつ文見出し」の下に続く、あいさつ文の左側の画像を指定しています。

８１行目で説明したように、【image】フォルダにコピーした画像を縮小（ここでは拡大表示させませんから、幅240px程度に縮小してもいいです）して、ファイル名を「image002.png」部分に入れます。

その右の、 alt="image002"
の、image002　部分には、この写真（画像）の説明（『店主近影』等）を普通に全角文字で記述してください。
何かの都合で画像が表示できない時に、ここの文字列が表示されます。

あいさつ文の文字は指定した画像の右側に来ますが、あいさつ文の文字数が少ない場合はこの画像が下にはみ出してかっこ悪いので、この１行は丸々削除してもかまいません。
（画像は表示されなくなります）

１行丸々削除すると、行番号がずれてしまって後々の説明がややこしくなりますから、削除する場合は、この８９行目の先頭に

を、それぞれコピペして、１行丸ごとコメントアウトしてしまうか、８９行目を一行まるごと選択したら、deleteではなくEnterキーを押してファイル内の改行を挿入しておきましょう。