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