QHM(Quick Homepage Maker)でホームページを作る(4)--オフラインで確認？（追記あり）
Yotchanさんからコメントをいただきました。
バックアップしたサイトを
パソコン画面で確認するすべは
何かあるのですか？
従来のホームページの作り方だと、サーバーの中にHTMLファイル（や、CSS、画像等）がありますが、QHM（Quick Homepage Maker）システムではサーバー内にHTMLファイルがないのです（自分のPC内にもページのHTMLファイルは存在しません。QHMはすべてオンラインで作る仕組みだから）
では、オフラインで確認するにはどうするのか？ と思う方がいても不思議はありません。というか、私がそう思ったのですが。
サーバー内にHTMLファイルはありませんが、ブラウザ画面で「ソースを表示」させると、<html>〜〜〜〜</html>があります。このソースは従来の作り方のHTMLと同じです。
そこで、ソースをコピーして自分のPC内に「****.html」を作っちゃいます。
この****.htmlをブラウザで見ると、オンラインとほぼ同じ画面を表示させることができます。（注意１参照）
注意１：QHMは文字エンコードをUTF-8にしているので、そのままでは文字化けするかもしれません。その場合はブラウザの 表示 > 文字エンコーディング を日本語（Shift_JIS）に変えます。
デザインを変更したい場合
CSSでデザインを変更したい場合は、****.htmlのCSSリンク、画像リンクをローカルエリア内で正しくリンクさせるように変えます。
【追記】具体的な手順：以下は自分のPC内で行います
****.htmlを現在選んでいるテンプレートフォルダに入れます。
****.htmlをテキストエディタ（メモ帳など）で開きます。
◆CSSリンクの変更（PC内のCSSを****.htmlに反映させるための処理）
<head>〜〜〜</head>内の
<link rel="stylesheet" media="screen" href="http://＊＊＊.com/skin/hokukenstyle/□□□_01/main.css" type="text/css" charset="Shift_JIS" />
を
<link rel="stylesheet" media="screen" href="main.css" type="text/css" charset="Shift_JIS" />
に変更（上の太字部分を削除）します
CSSでデザインを変更する場合、細かく調整することもあるので、オフラインで作業できるほうがいいです（変更のたびにFTPアップロードするのでは面倒で大変(^^;)）
デザインを変えるCSSは主に２つ。テンプレート内の「layout.css」「color.css」。
layout.cssは全体のレイアウトを設定し、横幅、サイドメニューと本文コンテンツの横幅比率、メニュー位置の左右を変更できます。
color.cssは文字、色、見出し、メニューのデザイン、背景画像などを細かく設定しています。
【追記】具体的な手順：
layout.css、color.cssをテキストエディタで開き、中に書いてある設定 （width:786px; とか font-size:14px; とか）を変更し、ファイルを保存します。
****.htmlをブラウザで表示させると、さっきの変更が反映されています。
このようにしてCSS変更→画面確認を続けます。
オフライン確認でオーケーになったところで layout.cssとcolor.cssをサーバーにアップロードします（サーバー内のファイルを上書きします）。
※layout.css、color.cssのコピーをとっておいてから変更作業するほうがよいです。
注意２：layout.css、color.css以外にもレイアウト・デザインを制御する要素があるので、オンラインでは少し違って見えることもあります。
【追記】デザインカスタマイズの方法はこちらのサイト→D++QHMcooldesignLabo で丁寧に説明しています。でも、オフラインで確認するやり方ではないかもしれません。
※Quick Homepage Makerについては 「簡単！ホームページ更新」をご覧ください。
| 固定リンク
「CSS（スタイルシート）」カテゴリの記事
- QHM(Quick Homepage Maker)(8)--CSSとFirefoxプリント(2009.08.01)
- QHM(Quick Homepage Maker)(7)--文字サイズ変更ボタン(2009.07.28)
- QHM(Quick Homepage Maker)でホームページを作る(6)--ページ内アンカー：目次(2009.06.24)
- QHM(Quick Homepage Maker)でホームページを作る(5)--フォームの設置(2009.06.16)
- QHM(Quick Homepage Maker)でホームページを作る(4)--オフラインで確認？（追記あり）(2009.06.06)
「パソコン・インターネット」カテゴリの記事
- Mac、Firefoxの不具合メモ(2009.08.30)
- QHM(Quick Homepage Maker)(8)--CSSとFirefoxプリント(2009.08.01)
- QHM(Quick Homepage Maker)(7)--文字サイズ変更ボタン(2009.07.28)
- QHM(Quick Homepage Maker)でホームページを作る(6)--ページ内アンカー：目次(2009.06.24)
- QHM(Quick Homepage Maker)でホームページを作る(5)--フォームの設置(2009.06.16)
コメント
kirikoさん、こんにちは。
早速対応していただいて、ありがとうございます。
今度も印刷して読み返しました。
>CSSでデザインを変更する場合、細かく調整することもあるので、オフラインで作業できるほうがいいです
（変更のたびにFTPアップロードするのでは面倒で大変(^^;)）<
やはりそうですね。
>CSSでデザインを変更したい場合は、****.htmlのCSSリンク、画像リンクをローカルエリア内で正しくリンクさせるように変えます。<
>デザインを変えるCSSは主に２つ。テンプレート内の「layout.css」「color.css」。<
とにかくつくったhtml内の記述を変えるのですね。
自分のサイトでhtmlをつくってみてみましたけど、
>ローカルエリア内で正しくリンクさせる
とか
>「Layout.css」「color.css」
を変えるとか
具体的には見当がつきませんでした。
でも図で示していただいていますので
概念的には理解しましたm(__)m。
投稿： Yotchan | 2009.06.07 19時16分
Yotchanさん
説明不足だったので、追記を書きました。
CSSファイルをいじるのは、馴れるまで厄介かなと思います。
デザインを変えるのでなく、テキストを変えてオフラインで確認するなら、HTMLファイルを開いて内容を変えれば良いです。「おまじない」で設定した部分がHTMLタグに変わっていますけど、そこは放置しとくということで。
投稿： kiriko | 2009.06.08 23時24分
kirikoさん、こんにちは。
ご丁寧にありがとうございました。
なるほど***.htmlをテンプレートフォルダに入れるんですね！
で、その中のCSS変更が反映するようにリンクを修正したうえで
layout.css、color.cssをいじる．．．と。
そうすれば***.htmlが変わっているはずなので、微修正してからCSSを
FTPでアップ．．．
という流れですね。わかりました。
>CSSファイルをいじるのは、馴れるまで厄介かなと思います。<
そうですね。
>【追記】デザインカスタマイズの方法はこちらのサイト→D++QHMcooldesignLabo で丁寧に説明しています。でも、オフラインで確認するやり方ではないかもしれません。<
ときどき覗くサイトですけど...
デザインカスタマイズの内容までは見ていませんでした。
いつかは詳しく見よう（読もう）と思ってはいたのですが。
オフラインでの確認方法は、今回はじめて知りました。
かさねてありがとうございましたm(__)m。
投稿： Yotchan | 2009.06.09 11時27分