古いフルCSSテンプレートをHPBの20に変更
古いホームページビルダーのフルCSSテンプレート（スマートフォン対応レスポンシブなし）から、新しホームページビルダーのフルCSSテンプレート（レスポンシブあり）に変更した時の話です。
備忘録的な記事です。
参考にしていただいても良いですが、
- あくまで自己責任でお願いします。
- 当方責任は持ちません
- スタイルシートやIDが、なんなのか？わからない人は、やってはダメ！
有料サービスを提供開始しました！
ご自分で作業が出来ない方は、ご依頼ください。
↓
スマートフォン対応サービス
やれば出来るが難しい作業
ホームページビルダー15のフルCSSテンプレートで作ったHPを、ホームページビルダー20の同じデザインのフルCSSテンプレートに変更しました。
結論から言うと、出来る！
けれど、物によっては、ビルダー20で最初から作った方が早いかもしれません。
入れ替え作業が出来る条件
この移し替え作業が出来る条件は、下記です。
NG! ホームページビルダーのテンプレートに沿ってちゃんと作ってある事（改造がない）
ヘッダー、メイン画像、メニュー等が、きちんとホームページビルダーのテンプレートの構造に沿って作ってある必要があります。
具体的には、htmlを確認しながら作成した人はOK。
IDが削ってあるとダメ。
自己流で、テキトーに改造しながら作ってしまった人は無理です。
（イチからやった方が早い）
NG! 同じテンプレート、同じ色、同じレイアウトである事
違うテンプレート、違う色、違うレイアウトに変えるのは、やれば出来るかもしれないが、結構面倒くさいし、難しいと思う。
NG! テーブル（表）が多い
スマートフォンで横長の一覧表を表示すると、うまく表示されないことが多いです。
横長の表が多い場合は、それを作り直さなきゃならないから、イチから作った方が早いかもしれない。
（横長の表を、見出し、リスト、文章の様に縦長にレイアウトしていく必要がある。
ホームページビルダーの公式アナウンス
ジャストシステムさんからの公式なアナウンスは下記です。
JUST SYSTEN社のサポートFAQ スマートフォン用のページの作成について
意味がわかりずらいですが、
「ver20のテンプレートをあてがうことは出来るけど、それだけではレスポンシブ（スマホ表示）にはならないですよ。」
の意味だと思う。
（実際にやってみたが、あてがうだけではレスポンシブにはならなかった。）
実作業
実際に行った作業を紹介
１ バックアップ
失敗しても元に戻せるように、フォルダーごとコピーを取ってバックアップする。
２ ホームページビルダー２０でサイト設定を行う
サイト設定を行う。これをやらないとテンプレートを適用できない。
３ デザイン変更ボタンを押す！
これを押すと、テンプレートの選択画面が表示される。
デザイン、カラー、レイアウトが、同じことを確認する。
（自動で選択されているはず）
※※※※バックアップは取っているか！！！※※※※
次の動作から後戻りできない。
必ずファイルコピー、バックアップを取っておくこと。
OKボタンを押す。
５ 解説
OKボタンを押すと、自動で以下の作業がなされる。
スタイルシート（CSS）の名前変更
古いバージョンとcss名が違うので、ここで変更がかけられているのだと思う。
なぜか、中身は変わっていなかった。
スマートフォン用のcssは書き込まれてなかった。
ヘッダーへの書き込み
- cssのリンク
- java（jquery）のリンク
スマホ表示関係のtelephone=no など4行程度書き込みがあった。
全ページに自動で書き込んでくれていた。相対パスも階層にあわせてあった。
.jsファイルが３つ追加
フォルダー内に３つの.js（プログラムだよ）ファイルが追加された。
スマホ表示時に、メニューを変更するファイルだった。
※※※※今の状態ではスマホでちゃんと表示されない※※※※
作業は続きます・・・
６ 新しく同じテンプレートで見本サイトを作る
同じテンプレート、同じ色、同じレイアウト（サイドバーの左、右配置）で、見本になるサイトを作る。
７ 見本サイトから btn_menu.png をコピペ
大きい表示にするとわかるが、スマホ表示の時に、押すとメニューがペローンと出てくるボタン。
btn_menu.png これをさっき作った見本サイトからコピペする。
８ スタイルシートのスマホ部分（メディアクエリーのとこから）をコピペ
main、containerのメディアクエリー以下の部分をコピペする。
これで作業は全部だったと思う。
こうやってまとめるとあっさりしているけど、実際にやった時は結構苦難の連続であった。
いきなりサーバに上げないで、ローカルできちんと確認する事。 出来ればサーバにテスト領域を作って、そこでテストしてから本番でアップした方が良い。
トラブルシューティング
１ メイン画像が左（右）にずれる（スマホ表示）
手順６の見本サイトを作る時に、レイアウトの左右を間違えていた。 メイン画像が左にずれるからおかしいな～といろいろ調べた。
結局見本サイトを作る段階で、サイドバーが左なのに右のを作っていた。
なので、コピーしたスタイルシートが右用（フロートなど全部逆）なので、メイン画像が左にずれていた。
スマホ用の部分だけコピペしたので、気が付くのに時間がかかった。
２ ヘッダー、メニューが変（スマホ表示）
これは手順７のボタンがなかったから。
.jsファイルを読むと、ボタンがないとちゃんと動作しないことになっているッポイ。
余談
最初は、元のファイルに見本ファイルから、ヘッダーなど必要な部分をコピペしていたのだれど、うまくいかなかった。
たぶんこのやり方が一番早いと思う。
しかし、いろいろといじっている場合。
特にスタイルシートに変更を加えていたり、
ヘッダーやメイン画像のIDが削られていると、
この作業ではうまくいかない。
スタイルシート変更の場合は、程度による。
IDが削られてしまっている場合は、致命的。
イチから作った方が早い。
今回は奇跡的にきれいにテンプレートのまま、改造しないで作っていたので、できた作業だった。
ホームページの作成・制作代行のリオネル
