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

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

前の記事へ

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

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

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

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

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

まだまだ（１）～（３）

ページの表示される部分の上側と、１１５行目の大きな画像まで（↑）は前回やりました。

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

１１８行目

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

<p class="center"><b>■～メニューなど（折り畳み）～■を見る</b></p>

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

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

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

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

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

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

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

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

ここの（）内の 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です。

１２６行目

ここから２７９行目の </div> までは、折りたたまれると隠される部分です。

１２６行目の <h3 id="menu">■～メニューなど（折り畳まれ）～■</h3> の「■～・・・～■」を書き換えます。

１３０行目

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

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

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

１３５行目～１３６行目

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

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

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

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

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

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

１３８行目

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

１４０行目～１４９行目

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

１５０行目

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

（↑）ざっくりと図示しましたが、折り畳まれた部分は１３５行目以降、ここまでの繰り返し（ほぼ）です。

１５１行目～１６４（１６６）行目

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

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

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

つづく

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