AdanKadan @ A

「こだわりデザイン変更」のメニューだけ（「スタイルシートの直接編集」を使わない）でどこまでできるかやってみました。

「こだわりデザイン変更」でテンプレートの簡単なカスタマイズができるのは《AutoPage》の特徴ですが、たとえば背景画を固定したい、というように、ちょっとしたカスタマイズを加えたいことがあります。これには、「スタイルシートの直接編集」を使う必要がありますが、ただ使うと、せっかく追加したトップ画像や背景画像は消えて、元テンプレートのデザインになってしまいます。

　そういうときの対応方法をまとめてみました。

■「こだわり」で生成されたスタイルシートを取り出す

自分のブログURLに、「user.css」をつけます。
たとえばこのブログですと、
http://green.ap.teacup.com/adan/
というブログURLなので、
http://green.ap.teacup.com/adan/user.css
というURLを、ブラウザ（Microsoft Internet Explorerなど）のアドレス欄に、はりつけます。

開いたファイルの中身を全部選んで（キーボードの「Ctrl」を押しながら「A」）、コピー（Ctrl+C）。

■スタイルシートの直接編集

こだわりデザイン変更の下、[デザインを変更する]ボタンの上に表示されている「スタイルシートの直接編集」を開きます。それを全部選んで（Ctrl+A）、そこに予めコピーしてある「こだわり」スタイルシートを貼り付けます（Ctrl+V）。これで、「元のテンプレートのスタイルシート」は「こだわりスタイルシート」に置き換わりました。

■(カスタマイズ例)固定背景を設定する。

/* HTML全体 */
body {
というところを探し（検索(Ctrl+F)が便利）、

body {
の次の行にでも、「固定する」という設定↓を加えます。
background-attachment:fixed;

この内容に関しては、CSS（カスケードスタイルシート）の解説をご参照ください。（注あり）

■保存する

　[編集を保存する]をクリックしただけでは、保存が完了しないことにご注意を。[スタイルシート保存の確認]が出ますので、その画面をよく読んで、最後まで保存操作をしてください。
　ここでつける名前は漢字も使えます。わかりやすい名前を入れてください。「コメント」には、カスタマイズの元になったデザイン（たとえば『スタンダードピンク』ならそれを）と、カラム（左メニューとか）を書いておくのがお勧めです。
　これで完了です^^

■注■スタイルシート＝カスケードスタイルシート(CSS)について

　CSSはWorld Wide Web Consortium(略称：W3C)という団体が提唱しているもので、上記のサイト以外にも解説サイトは沢山あります。
　WEB作成のプロでさえ、この団体の言うことを「すべて」守っているところばかりとは限らない、というくらい、難しく（も、バカバカしいほど細部にわたる）「決まり」がたくさんありますので、我々シロウトは、まあ、のんびり行けばいいんじゃないか？と、（個人的には）思っていますｗｗ。
　有名どころの参考サイトを挙げておきます。
▼HTMLクイックリファレンス
http://www.htmq.com/
・W3Cに完全準拠でない記述があるとかで、マニアには叩かれているのを見るが。レイアウトや事例が見やすく、個人的にはイチオシ。
▼TagIndex
http://www.tagindex.com/
・HTML、CSSのリファンレスのほか、自動作成ツールなども充実。質問掲示板が活発で、サイト主以外の回答者が答えてくれることが多い。

■画像をアップ
画像をAutopageにアップし、URLを確認します。
[参]Autopageの画像URL
http://green.ap.teacup.com/adan/77.html

■CSSの編集
1.管理画面→デザインの変更→[スタイルシートの直接編集]（画面のわりあい下のほうです）

2.スタイルシートの最後に

.commfrm4 textarea{background:url([画像URL]) bottom right no-repeat;}

と入れます。

3.[編集を保存する]
→スタイルシートに名前をつけて、新たに追加保存する
　スタイル名・コメントに、判りやすいよう何か入力してください。
→保存したデザインをすぐに設定する：チェックマーク入れる
→[スタイルを追加する]

■画像をアップする
画像をAutopageにアップします。
（記事に画像いれるときと同じでOK）
管理画面左カラム「画像の管理」→画像の追加

■画像URLを確認する
画像の管理画面にもどると、アップした画像が表示されています。
クリックすると画像が一枚だけ出る画面に移動します。

このときにアドレス欄に出るのが「画像URL」です。
こんな感じ。
http://green.ap.teacup.com/adan/img/1198319104.gif

お助け掲示板からのリクエストで、ブロックBlueを画面幅いっぱい使いたい、というカスタマイズ。スタイルシートを追記にて公開。どなたでもご自由にご使用ください。