「こだわりデザイン変更」でテンプレートの簡単なカスタマイズができるのは《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作成のプロでさえ、この団体の言うことを「すべて」守っているところばかりとは限らない、というくらい、難しく(も、バカバカしいほど細部にわたる)「決まり」がたくさんありますので、我々シロウトは、まあ、のんびり行けばいいんじゃないか?と、(個人的には)思っていますww。
有名どころの参考サイトを挙げておきます。
▼HTMLクイックリファレンス
http://www.htmq.com/
・W3Cに完全準拠でない記述があるとかで、マニアには叩かれているのを見るが。レイアウトや事例が見やすく、個人的にはイチオシ。
▼TagIndex
http://www.tagindex.com/
・HTML、CSSのリファンレスのほか、自動作成ツールなども充実。質問掲示板が活発で、サイト主以外の回答者が答えてくれることが多い。