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

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

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

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

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

 

前の記事へ
1行目から111行目
エディターでhtmlを書き換えて作る1枚完結サイト(3)

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

続きを見る

 

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

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

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

 

・・・(↑)の流れで、今はまだまだ1.3くらいの段階です。

 

まだまだ(1)~(3)

1行目から111行目
ページの表示される部分の上側と、115行目の大きな画像まで(↑)は前回やりました。

今回は折り畳みメニューの内容を書き換えます。

 

118行目

「折り畳み操作」を担うボタン直上の表示です。

<p class="center"><b>■~メニューなど(折り畳み)~■を見る</b></p>

<p class="center">から</p>までで、中央揃え
<b>から</b>までは、太字の指定です。

そろそろ書き換えのコツが分かってきましたね (^.^)
そうです。
「■~ ・・・ ~■を見る」の部分を書き換えます。

で、その下の折りたたまれている部分を開いたり閉じたりするアコーディオン部分のボタン画像なのですが・・・

 

【image】フォルダ内の【ico】フォルダに、『op150.png』『cl150.png』という名の2つのファイルがあります。

この2つは矢印アイコンに「開いて見る」「閉じる」の文字が透過画像上に並んでいるだけですから、画像加工ソフトを使ってお店のメニューのシンボル的な画像に重ねて作ってもいいですし、好きな画像をそのまま『op150.png』『cl150.png』にリネームして使ってもいいです。
画像ファイルは縦横150ピクセル程度までにしておいた方がいいかも。
ただし、拡張子が同じ.pngならいいのですが、jpgとかgifの場合はcssで指定されている部分を書き換えなくてはなりません。

 

css内の「開く」「閉じる」ボタン画像を指定する部分

【index.html】と同じ階層にある【style.css】ファイルを、Meryで開いてみてください。
Meryのウインドウ内に、今編集しているindex.htmlとは別に、新しいタブでstyle.cssが開かれたと思います。

htmlとはちょっと様子が違いますが、下にスクロールして349行目と352行目を見てください。

ここの()内の image/ico/op150.png が、開くボタンの画像指定

image/ico/cl150.png が、閉じるボタンの画像指定です。

例えば『 hiraku.jpg 』で開いて、『 tojiru.gif 』を閉じるボタンに指定したい場合は、それらのファイルが同じicoフォルダにあるとして、

.js-summary:before {
content: url(image/ico/hiraku.jpg);
}
.js-summary.open:before {
content: url(image/ico/tojiru.gif);
}

に書き換えてしまえばOKです。

 

126行目

ここから279行目の </div><!--// 折りたたまれ ↑ --> までは、折りたたまれると隠される部分です。

126行目の <h3 id="menu">■~メニューなど(折り畳まれ)~■</h3> の「■~・・・~■」を書き換えます。

130行目

<p class="right">※ 価格は全て税別です。□<br><br>

右側に寄せた文章です。
全角スペースで右の余白を作ったり、改行<br>を並べたりして、html的にすごくカッコ悪い部分です。

「※ 価格は全て税別です。□」部分を好きなように書き換えたり放置したり、どうにでもしてください (^^;

 

135行目~136行目

<a href="image/image005.png" data-lightbox="image_group1" data-title="image005のカレー"><!-- 右の小さな画像をクリックすると開く大きな画像 -->
<img src="image/image005.png" alt="image005" width="200" class="imgright"></img></a><!-- 右の小さな画像 -->

コメントアウトの説明の通り、右側の画像の指定です。

【image】フォルダ内の、image005.png を書き換えたりします。
前回の説明の81行目の画像変更を参考にしてください。

ここで使いたい画像は、幅640pxに統一するなどしておくと、拡大画像を見比べる時に統一感が出ます。
(サンプルは敢えてちぐはぐな大きさにしてあります)

data-title="image005のカレー"の、「image005のカレー」部分(“  から までの間)には、拡大表示した写真の下に表示される文言です。
料理名などを入れましょう。

これと同じ文言を136行目の alt="image005" の、「image005」部分(“  から までの間)にコピペしておきましょう。

※ 幅200pxで表示される右の小さな画像と、クリック(タップ)で拡大表示される大き目の画像は、別々に用意してそれぞれ指定すると、データ通信量(ファイルの読み込み速度)的には有利なのですが、ページ内の写真が多くなり過ぎなければ、幅640px画像1種類で押し通してもいいでしょう。

 

138行目

<h4>から</h4>までの間の文言「image005のカレー□1,380円から」部分を、料理名などに書き換え。

 

140行目~149行目

140行目の<p>から、149行目の</p>までの間は、この料理の内容なりうんちくなり、数行使って好きなように説明しましょう。
改行は<br>です。

 

150行目

<p class="gap"></p>

行間を少し開ける呪文です。
<br>を並べるのが恥ずかしい時に使います (^^ゞ

 

115行目〜149行目(↑)ざっくりと図示しましたが、折り畳まれた部分は135行目以降、ここまでの繰り返し(ほぼ)です。

 

151行目~164(166)行目

(↑)で説明した135行目の右側の画像指定から、150行目の行間をやや開ける呪文までが1かたまりで、この塊が並んで折りたたまれメニュー内部を構成しています。

必要ならば、この1単位の行グループをコピーして追加(ペースト)して書き換える操作でメニュー内容は増やせます。

不要な範囲は削除かコメントアウトして減らすこともできます。
いろいろ実験してみてください。

 

 

つづく

 

 

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

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

続きを見る

スポンサーリンク

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

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