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

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

前の記事へ

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

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

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

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

・・・（↑）の流れで、今はようやく2.5くらいの段階です (^^;

まだまだまだ（１）～（３）

前回は、折り畳まれる部分のメニュー１品分が、１３５行目の右側の画像指定から、１５０行目の行間をやや開ける呪文までのひとかたまりであるところまで説明しました。

今回はメニューの２番目と３番目の間にある写真と説明文からです。

１６７、１６８行目

画像の中央揃えの指定です。

【image】フォルダ内の、『 image007.png 』を、幅300ピクセルで中央に表示させています。
alt="image007" 部分の“ から “ までの間には、この画像の名前や説明を入れましょう。

１７０行目

画像の下の「※」から始まっている文章です。
適当に書き換えましょう。

この中央揃え画像と文章が不要ならば、１６７行目から１７２行目（行間をやや空ける呪文）まで削除するかコメントアウトしてください。

１７３～２７７行目

１３５行目～１５０行目までのメニュー１品分のひとかたまりと同じ構造で、

１９１～２０８行目，
２０９～２２７行目，
２２９～２４９行目，
２５０～２７７行目

まで、４かたまり並んでいます。

最後のドリンクメニューの中は、全角スペース（□）を並べて字間調整していますが、これはあまりカッコいいやり方ではありませんのでご了承ください m(__)m

２７９行目

１２３行目の
<div class="js-container"> から
２７９行目の
</div> までが、折り畳まれて見えなくなる部分です。

２８１，２８２行目

<p class="right">※ メニューは全て外税表記です□<br><br>
</p>

折り畳まれない部分の右側に『※～』の文言があります。
例によって全角スペース□で右側の隙間と、<br>を並べて行間を作っています (^^ゞ

２８４～２８９行目

１０９行目の
<section id="page_2">
から始まるセクションが
２８９行目の
</section>
で終わっています。

で、各セクションの終わりに、電話発信のボタンと、一番上へ戻るボタン，少し上（ここでは折り畳まれる部分の上端）へ戻るボタンを並べています。

ここでは２８４行目の電話発信部分を書き換えます。

<p class="right"><a title="012-345-6789□発信" href="tel:0123456789">012-345-6789 <img src="image/ico/TEL_1.gif" alt="通話発信"></a>□□

（↑）にある、0123456789のハイフンありなし含めて３か所に電話番号がありますが、ここを自店の番号に書き換えましょう。
全角スペース□は隙間調整に使っているので、そのままにしておいた方がいいと思います (^^;

２９１行目

３４３行目の </section> まで続くセクションが、
<section id="page_3">
から始まります。

２９２～２９５行目

セクションのタイトル帯の文言と、すぐ下の中央揃え画像，中央揃えの文章の指定です。

２９７～３１３行目

左側（右側も）の、小さな画像を含む説明文章の指定です。

画像の指定は、前記事の１３５行目～１３６行目の説明にある通りですが、１点だけ違う所があります。

２９８行目の
<a href="image/image014.png" data-lightbox="image_group2" data-title="image014のカレー">
（↑）の、『 image_group2 』の部分です。

１３５行目は『 image_group1 』になっていますが、今回は『 image_group2 』です。画像を拡大したときに、ここの名称が同じグループの画像をスライドして見る事ができます。

ここでは、あえて先程のメニュー内の写真とは別に、このセクションの写真（画像）３枚を同じグループ（ image_group2 ）に指定しています。

例によって画像サイズをちぐはぐにしていますが、長辺を640pxに統一するなどしておくと見る人が見やすいと思います。

３０６行目

１７０行目にも出てきましたが、漢字などにフリガナ（ルビ）を振っています。

<ruby> Torisen <rt>とりせん</rt></ruby>

（↑）ここでは、ローマ字アルファベットにひらがなルビを振りました。
全体を<ruby> ～ </ruby> で囲って、<rt>・・・・</rt> 内にルビを振ります。

読み難い漢字などを使う場面で使ってください。

３１５～３１７行目

２９４～２９５行目にも太字の見出しがありますが、ここでも太字の見出しを作っています。

<h3> ～ </h3> の～部分を書き換えてください。

３３２行目

中央揃え画像の指定です。

【image】フォルダ内の、『 image017.png 』を、幅500ピクセルで中央に表示させています。
alt="image017.png" 部分の“ から “ までの間には、この画像の名前や説明を入れましょう。

※　画像の指定については、前前記事の８１行目の説明を参照してください。

３３８行目

（↑）２８４～２８９行目で説明したのと同じです。
ここは、２８４行目で書き換えた電話番号が間違えていない事を確認して、１行まるごとコピペで上書きしてもいいです (^^;

その下の３４０行目の、一番上へ戻るボタンと、少し上（ここでは"page_3"のセクションの上端）へ戻るボタンについては触らず放置が吉です。
（セクション id を書き換えた場合は、ここも適宜修正してください。）

３４３行目

</section>
"page_3"のセクションの終わりです。

次はその下の地図（所在地）案内のセクション（やっと）です (;'∀')

つづく