« 福岡の中日ドラゴンズファン | トップページ | 福岡市・西新 »

2009.06.06

QHM(Quick Homepage Maker)でホームページを作る(4)--オフラインで確認?(追記あり)

Yotchanさんからコメントをいただきました。

バックアップしたサイトを
パソコン画面で確認するすべは
何かあるのですか?

QHMでホームページを作る(2)--デザインカスタマイズ

従来のホームページの作り方だと、サーバーの中にHTMLファイル(や、CSS、画像等)がありますが、QHM(Quick Homepage Maker)システムではサーバー内にHTMLファイルがないのです(自分のPC内にもページのHTMLファイルは存在しません。QHMはすべてオンラインで作る仕組みだから)

では、オフラインで確認するにはどうするのか? と思う方がいても不思議はありません。というか、私がそう思ったのですが。

サーバー内にHTMLファイルはありませんが、ブラウザ画面で「ソースを表示」させると、<html>〜〜〜〜</html>があります。このソースは従来の作り方のHTMLと同じです。

そこで、ソースをコピーして自分のPC内に「****.html」を作っちゃいます。

この****.htmlをブラウザで見ると、オンラインとほぼ同じ画面を表示させることができます。(注意1参照)

Aboutqhm_2

注意1: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は主に2つ。テンプレート内の「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のコピーをとっておいてから変更作業するほうがよいです。

注意2:layout.css、color.css以外にもレイアウト・デザインを制御する要素があるので、オンラインでは少し違って見えることもあります。

【追記】デザインカスタマイズの方法はこちらのサイト→D++QHMcooldesignLabo で丁寧に説明しています。でも、オフラインで確認するやり方ではないかもしれません。

※Quick Homepage Makerについては 「簡単!ホームページ更新」をご覧ください。

|

« 福岡の中日ドラゴンズファン | トップページ | 福岡市・西新 »

CSS(スタイルシート)」カテゴリの記事

「パソコン・インターネット」カテゴリの記事

コメント

kirikoさん、こんにちは。

早速対応していただいて、ありがとうございます。

今度も印刷して読み返しました。

>CSSでデザインを変更する場合、細かく調整することもあるので、オフラインで作業できるほうがいいです
(変更のたびにFTPアップロードするのでは面倒で大変(^^;))<

やはりそうですね。

>CSSでデザインを変更したい場合は、****.htmlのCSSリンク、画像リンクをローカルエリア内で正しくリンクさせるように変えます。<

>デザインを変えるCSSは主に2つ。テンプレート内の「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分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/132693/45255308

この記事へのトラックバック一覧です: QHM(Quick Homepage Maker)でホームページを作る(4)--オフラインで確認?(追記あり):

« 福岡の中日ドラゴンズファン | トップページ | 福岡市・西新 »