古いフル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が削られてしまっている場合は、致命的。
イチから作った方が早い。

今回は奇跡的にきれいにテンプレートのまま、改造しないで作っていたので、できた作業だった。

ホームページ制作会社は、全国対応・お見積無慮
ホームページ制作会社へのお問い合わせ・お見積電話番号
ホームページの作成・制作代行のリオネル
ホームページ制作のお見積は無料です!お問い合わせフォーム
ホームページ制作のお見積り無料で全国対応
ホームページ制作代行のお問い合わせフォーム

ホームページの
制作・デザインなら!

リオネル
〒193-0833
東京都八王子市山田町1693-9-101
TEL.090-4227-7357

◆初めて買う人用

◆テンプレートの種類が多い!

◆飲食店などお店や自営業向きホームページのセルフサービス

ホームページの制作会社 - リオネル> ホームページビルダー作成代行 > フルCSSテンプレートの入れ替え 古から新へ