フルCSSテンプレートをスマホ対応のver21に変更
ホームページビルダーのフルCSSテンプレート（ver.18、スマートフォン対応レスポンシブなし）から、新しホームページビルダーver.21のフルCSSテンプレート（スマートフォン対応、レスポンシブあり）に変更する作業を、今週行いました。
前回は、テンプレート通りに作ってあったホームページだったのですが、今回はあちこち改造したり、コードがおかしくなっていたので大変でした（＾＾；
備忘録的な記事です。
参考にしていただいても良いですが、
- あくまで自己責任でお願いします。
- 当方責任は持ちません
- スタイルシートやIDがなんなのかわからない人は、やってはダメ！
有料サービスを提供開始しました！
ご自分で作業が出来ない方は、ご依頼ください。
↓
スマートフォン対応サービス
作業手順
以下の順番で作業を実施した。
- ファイルのバックアップ
- 各ページのhtml修正
- 新しく同一のデザインで新しいサイトを制作して、適用するテンプレートとレイアウトを確認
- デザイン変更を実行
- スタイルシートの変更がうまくいかなかったので、新しいデザインからスタイルシートをコピー（古いスタイルシートは違うフォルダに逃がした）
- メニューボタンのパーツをコピー
- レスポンシブとして動作、しかし、以前のCSSでフォント変更などを行っていたので、見た目が以前と同じとはいかなくなってしまった。
- 古いCSSに新しいCSSのレスポンシブ部分だけ貼り付けてみることにした
- トップページのフラッシュやiframeを修正
- googlemapを張り替えて、レスポンシブにする。
- 電話番号がダイヤルできるように変更
苦労した部分を書くと・・・
IDが削られていた
デザインが崩れているページがあって、変だな？？？と思っていたら・・・
コンテナのID『inner』が削除されていた。
ID『inner』を適切な場所につけて解決した。
どこでも配置モード１か所を修正
１か所だけ、どこでも配置モード、で編集した箇所があった。
フルCSSテンプレートでどこでも配置モードを使うと、デザインがずれてしまう。
１か所だけだったので、今回はhtmlタグの修正で対応可能だった。
フラッシュをJqueryフォトモーションに変更
フラッシュはiPhoneでは表示できないので、Jqueryフォトモーションに変更をした。
ここで大きなトラブル発生！
スマートフォン表示にすると、Jqueryフォトモーションの縦横比がおかしな事になる。
なんでだ？？？
原因はカスタム設定
原因はカスタム設定だった。（jqueryフォトモーションの設定の２ステップ目）
- 固定サイス指定
- トリミング
の指定のチェックをしていたのがダメだった原因だった。
一度、jqueryフォトモーションをなくして、htmlをきれいにしてから、再度上記にチェックを入れないでjqueryフォトモーションを設定して、解決した。
インラインフレーム
お知らせ欄が、インラインフレーム（iframe）で作成されていたが、これがスマホ表示だとうまくいかない。
ここも結構てこずった（＾＾；
原因は、ピクセルで横幅を指定したいたから。
インラインフレームの横幅（html指定）をピクセルから95%指定にして解決した。
素人設置だったから、起こったトラブルなので、次回インラインフレームは、自分で設置しなおす方が良いかもしれない。
スタイルシート
.ifr-top-news {
height: 230px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
スタイルシートは上記にした。
高さ、230pxは、指でスワイプするのに、これくらいがやりやすい大きさだと思うから。
これより小さいサイズになると、スワイプしずらい。
横縦を%指定する方法もあるけれど、こっちの方がシンプルでなので、レスポンシブで多用している。
googlemap
googlemapは、ホームページビルダーで貼り付けたgooglemapだったのだけど、iPhone6では表示できなかった。（エラー表示になる）
なので、いつものように、googlemapから普通にhtmlで貼り付けて、レスポンシブ対応になるようにcssに加筆を行った。
電話番号
電話番号は、スマートフォンでタッチすると電話番号がダイヤルできるように変更した。
プログラムを設置して、PCの時はリンクが消える様にした。
作業を振り返ってみて
今回は、かなりいじってあるテンプレートだったので、苦労した。（＾＾；
htmlの修正は、上記の他にも細々行っている。
また、画像の処理も特殊なやり方をしていたのがあったので、これも対応した。
まー、なんとかできたけど、やっぱ作業的にはシンドイ。（＾＾；
ホームページの作成・制作代行のリオネル
