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

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

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

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

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

 

前の記事へ
カラーコード
エディターでhtmlを書き換えて作る1枚完結サイト(2)

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

続きを見る

 

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

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

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

 

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

 

まだ(1)

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

 

78行目

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

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

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

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

78行目の <h1><a title="■■■~このサイトのタイトル~■■■" href="./">■■■~このサイトのタイトル~■■■</a></h1><!-- 一番上の帯の部分の文字 -->

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

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

 

81行目

初登場の画像です。

<img src="image/image001.png" style="width:100%; max-width:500px;" alt="image001"><!-- 一番上の帯の下のイメージ画像001 これは画像編集で雰囲気のあるロゴ文字など重ねてカッコいい画像がいいです。 -->

コメントアウト(<!-- から --> で挟んだ部分)した説明の通りです。

【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】キーで行き来しながら確認できます。

 

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

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

 

86行目

<h2><a href="index.html">■■■~あいさつ文~■■■ </a></h2><!-- あいさつ文のタイトル -->

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

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

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

 

89行目

<img src="image/image002.png" alt="image002" width="120" class="imgleft"></img>

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

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

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

 

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

 

1行丸々削除すると、行番号がずれてしまって後々の説明がややこしくなりますから、削除する場合は、この89行目の先頭に
<!--
同じく89行目の最後に
-->
を、それぞれコピペして、1行丸ごとコメントアウトしてしまうか、89行目を一行まるごと選択したら、deleteではなくEnterキーを押してファイル内の改行を挿入しておきましょう。

 

91~100行目

<!-- あいさつ文 -->
から、
<!--// あいさつ文ここまで -->
まで。
これらの行は、このセクションのあいさつ文の内容です。

好きなように書き換えてしまいましょう。
改行は、

<br>

です。
コピペでいけます。

行間を空けたい時など<br>を並べるのはよくないと言われますが、よほど連続して空欄行を続けない限り大丈夫です。

ただ、やみくもに改行すると、デバイスの幅で折り返される文章が、おかしなことになりかねませんから、Chromeでスマホ表示(前前ページで触れています)を確認しながら進めた方がいいです。

 

111行目

<h2>■~メニューなど(折り畳み)セクションのタイトル~■</h2><!-- セクションのタイトル(スマホで見ても改行されない15文字程度までがおススメ) -->

( ↓ )ピンクで「111行目」の矢印の先をご覧ください。
ここの帯の中の文字列です。

 

1行目から111行目
例によって、■から■までを、15文字くらいの文言に書き換えましょう。
(だんだんと説明が手抜きになってきます。)

 

115行目

111行目のセクション名の帯のすぐ下の大きな画像です。

<img src="image/image003.png" style="width:100%; max-width:640px;" alt="image003"></p>

行の終わりに </p> なんて置いていて、ここはちょっと失敗箇所ですが、先述の image001 の説明( ↑ 81行目の説明)に倣って、画像を差し替えてください。

ここが不要ならば、一行前の114行目の <p class="center"> から、この最後の </p> までの2行を削除してファイル内の改行に置き換えるか、コメントアウトしておきましょう。

 

次回は、118行目の「折り畳み操作」を担うボタン直上の表示以降を説明します。

 

つづく

続きを読む
115行目〜149行目
エディターでhtmlを書き換えて作る1枚完結サイト(4)

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

続きを見る

 

 

スポンサーリンク

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

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