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

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

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

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

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

 

前の記事へ
115行目〜149行目
エディターでhtmlを書き換えて作る1枚完結サイト(4)

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

続きを見る

 

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

 

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

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

 

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

 

まだまだまだ(1)~(3)

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

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

 

167、168行目

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

<p class="center">
<img src="image/image007.png" style="width:90%; max-width:300px;" alt="image007"></p>

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

 

170行目

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

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

 

173~277行目

135行目~150行目までのメニュー1品分のひとかたまりと同じ構造で、

  • 191~208行目,
  • 209~227行目,
  • 229~249行目,
  • 250~277行目

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

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

 

279行目

123行目の
<div class="js-container"> から
279行目の
</div><!--// 折りたたまれ ↑ --> までが、折り畳まれて見えなくなる部分です。

 

281,282行目

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

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

 

284~289行目

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

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

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

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

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

 

291行目

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

 

292~295行目

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

 

291行目〜313行目

 

 

297~313行目

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

画像の指定は、前記事の135行目~136行目の説明にある通りですが、1点だけ違う所があります。

298行目の
<a href="image/image014.png" data-lightbox="image_group2" data-title="image014のカレー"><!-- 左の小さな画像をクリックすると開く大きな画像 -->
(↑)の、『 image_group2 』の部分です。

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

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

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

 

306行目

170行目にも出てきましたが、漢字などにフリガナ(ルビ)を振っています。

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

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

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

 

315~317行目

294~295行目にも太字の見出しがありますが、ここでも太字の見出しを作っています。

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

 

332行目

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

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

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

 

338行目

(↑)284~289行目で説明したのと同じです。
ここは、284行目で書き換えた電話番号が間違えていない事を確認して、1行まるごとコピペで上書きしてもいいです (^^;

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

 

343行目

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

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

 

つづく

 

 

 

 

 

スポンサーリンク

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

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