Pelogooのブログをカスタマイズして楽しもう！

■まずはテスト環境を作ろう■ ペログーでは、自分のブログの「新規投稿」ページから「オリジナルデザイン設定」を選び、「スタイルシートを編集する」ボタンをクリックすることで、オリジナルデザインを作成することができるようになっています。 ＊「スタイルシート」とは、細かなデザインをするための「指示書」のようなものです。ブラウザは、まずHTMLソース（デザインの設計図）を読み込んで画面を表示しますが、例えばスタイルシート（指示書）の中に「このページの背景色は黄色にすること」などと書いてあると、背景を黄色にして表示する、というような仕組みになっているわけです。 しかし、ペログー上でスタイルシートをちょっといじっては「デザインの設定」→「ブログの再構成」を繰り返すと、思い通りのデザインにするのに百年かかってしまい、イライラして胃に穴があきます。 それになにより、そんな作業をみんなが繰り返すと、ペログーのサーバに余計な負担をかけることになり、結果的に自分のブログの表示が重くなったりするなど、全体に悪影響を及ぼしますので、あまりオススメできません。 そこでまず、自分（自宅）のパソコンにテスト環境を作り、その中でオリジナルのデザイン変更にチャレンジしていくことにしましょう。
	(1)自分のブログを表示する インターネットに接続して自分のブログをブラウザ（IEの場合）で表示したら、プルダウンメニューの「表示」→「ソース」をクリックしてください。
	(2)HTMLソースを保存する すると、左の画面のように、HTMLのソースがメモ帳などのテキストエディタで表示されるはずです（画像は「秀丸エディタ」です）。 そこでこのHTMLソースを、自分のパソコンの適当なフォルダ内に、「名前をつけて保存」します。 たとえば、デスクトップ上に「test」というフォルダをあらかじめ作成しておき、メモ帳などのテキストエディタに表示されたHTMLソースを、「test.html」というファイル名で保存します。 新たに作成するフォルダ名やHTMLソースのファイル名は、本当はなんでもいい（任意）のですが、初心者の方は「test」フォルダを作成して「test.html」で保存してください。
	(3)スタイルシートのURLをコピーする 次に、左図の赤枠内にご注目ください。 HTMLソース（test.html）の７行目あたりに、 http://cat.pelogoo.com/narukuru/_ext/style.css というようなＵＲＬが見えるはずです。 この中の「http」から「narukuru」までの文字列は、ブログ版「なると＆くるみ日記」専用のＵＲＬのことですから、当然ながら、みなさんのブログの場合はみなさん専用のＵＲＬになっています。 ともあれ、このＵＲＬが、あなたのブログの「style.css」というスタイルシートの置かれているＵＲＬなのです。 さて、ここで、このＵＲＬをコピーしてブラウザのアドレス（ＵＲＬ）ウインドウに貼り付け、 「Enter」キーを押してください。
	(4)スタイルシートをダウンロードする すると、左のようなスタイルシートがダウンロードされますので、それをデスクトップ上の「test」フォルダ内に「style.css」というファイル名で保存してください。
	(5)テスト環境用のフォルダを見る テスト環境用に作成した「test」フォルダを開くと、左のように「test.html」と「style.css」の２種類のファイルが見えるはずです。 今後は、もっぱらこの「style.css」を修整していくことになります。 （＊注）バックアップ用に、「style.css」のコピーをとって、同じフォルダに置いておいてください。（「style.css」をいじりまくって、元に戻すことが困難になった場合、バックアップ用の「style.css」を使うことになります）
	(6)HTMLソースの７行目を書き換える 次に、test.htmlをメモ帳などのテキストエディタで開きます。（test.htmlをダブルクリックしてブラウザを立ち上げ、「ソース」を表示させても同じことです） 左の赤枠の部分は、もともとは(3)で説明したように、 href="http://xxx.pelogoo.com/hogehoge/ _ext/style.css" などと、あなたのスタイルシートのＵＲＬが入っているはずですが、この部分を単に「 href="style.css" 」に変更し、上書き保存してください。 以上でテスト環境ができあがりました。試しに、test.htmlをダブルクリックしてみましょう。 ローカル環境（自分のPC環境）上で、自分のブログが表示されているはずです。 ただし、オリジナル用テンプレートを使って、ヘッダ部分にオリジナルの画像を表示している人は、 そのオリジナル画像が非表示になっているはずです。
.head { background-image: url("../_img/head.jpg"); background-color:#CCCC99; } 　　↓上の赤色の文字列を、下の青字のように書き換える .head { background-image: url("http://xxx.pelogoo.com/hogehoge/_img/head.jpg"); background-color:#CCCC99; }	(7)スタイルシートのヘッダ画像のパス（URL）を書き換える オリジナル画像が非表示になっている人は、スタイルシートを編集します。 「test」フォルダ内にあるスタイルシートの「style.css」をメモ帳などのテキストエディタで開き、左のような「 .head { 」という文字列のあるところを探してください。 文字列が見つかったら、その下にある「../_img/head.jpg」の文字列を、画面左下の青字のように半角英字で書き換えます。 当然ながら、http://xxx.pelogoo.com/hogehoge/ という部分は、あなたのブログのＵＲＬになりますので、お間違えのないように。
●テスト環境を作成する意味（まとめ） ペログーのサーバを使わず、自分のＰＣ内にテスト環境を作成するのはなぜかというと、テスト環境のスタイルシート（style.css）をいくらいじっても、本番の自分のブログにはまったく影響を与えないからです。 言い換えると、テスト環境下では、いくらでも自由にデザイン変更を楽しめる、いえ、いくらでも失敗が許される（トライ＆エラーが許される）、ということなのです。いじっては直し、いじっては直し…という作業を、気の済むまで繰り返すことができます。 ともあれ、以上の説明のとおり、準備段階としてのテスト環境を作ることはできましたでしょうか？　これができない方は、先に進めません。諦めずにチャレンジしてください。 テスト環境が作成できたら、いよいよオリジナルデザインに挑戦します。 本コーナーの次回の更新はいつになるやら…なのですが、気長にお待ちいただければ幸いです。 なお、このページに対するご意見ご質問等は、ブログ版「なると＆くるみ日記」のカスタマイズ・スレッドのほうにお願いします。（2005.12.13）