準備とサイトの基本情報の変更

[tag:テーマクッキング]

まず
PtextbookLCRをインストールしていますか？
まだならテーマクッキング解説対応テーマPtextbookLCRレシピ を使うか
テーマクッキング解説対応テーマPtextbookLCR を
ダウンロードしFTPでアップロードしてください。

テーマクッキング画像パーツセットをセットしていますか？
まだならテーマクッキング画像パーツセットをダウンロードし
解凍して出来たimagesファイルを
PtextbookLCRにアップロードしてください。
解り難い場合はimages/customの中の画像を
PtextbookLCR/images/customにアップロードしてください。

書き換え方法はテキストエディタとテーマエディタ共通です。
当サイトの画像を使って解説していきます。

まず見た目はこんな感じですよね。

これからサイトの基本情報を変更していきます。
custom.cssの

body {
  display: block;
  margin: 8px 0;
  background: #ffffff;
  color: #000000;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  line-height: 1.3;
}

を見つけてください。

ProCSS初期化～ProCSS初期化終了まではスタイルを初期化するものなので
無視してくださいね。
書き換える部分はCUSTOM Startから下の部分です。

これから「背景を色々変更したい。」と「サイト全体のフォントを変更したい」を参考に見ていきます。
すでにPtextbookLCRにはある程度のCSSを書き込んでいます、
見るべき場所の解説は以下の通りです。

body {
  display: block;
  margin: 8px 0;
（上下余白を8px幅を指定している）
  background: #ffffff;
（背景色を白色にしている）
  color: #000000;
（文字の色を黒色にしている）
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
（表示するフォントを指定している）
  line-height: 1.3;
（行間を指定している）
}

 各CSSプロパティーの説明は検索してくださいねm(_ _)m
基本中の基本である
やりたいこと:やりたいことの内容;
:　と ;　を忘れないようにすることだけ注意してください。

ではフォントを変更します、ファイルを書き換えてアップしたのですがうまく行ってなかったようで
メイリオの指定が残ってしまっています、これを

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;

のように「'メイリオ',Meiryo,」を削除し書き換えます。

次に背景色を変更し、背景画像を指定します。

background: #000000 url(images/custom/bgback.png) repeat top left;

これは「背景色を黒にし背景画像にbgback.pngを左上から繰り返す」と指定しました。

 上記の書き換えが正確に出来ていると下記の画像のようになってるはずです。

上下の余白幅と文字の色と行間はこのまま変更しません。

今回はここまで！次回はサイトのヘッダーとフッターデザインを変更します。

 独り言(´･д･｀)ﾎﾞｿｯ

ここで楽しめる部分は背景画像の指定！
背景を上に（TOP）に固定して横に繰り返せば「stargazer15」のようなデザインができる
ちなみにこんな感じ

background: #000000 url(images/custom/背景画像) repeat-x top left;

これの考え方のKeyは　repeat top left　のこの部分。

repeat　は繰り返す方法の指定で
repeat　は縦横に繰り返し。
repeat-x　は横に繰り返し。
repeat-y　は縦に繰り返し。
no-repeat　は繰り返さない。

top left は画像の始まる位置指定。
だからこれらを組み合わせると魅せる背景が作れる・・・かも。