アメブロカスタマイズの道05～スタイルシートの編集開始です
すっかりアメブロから遠のいていたのですが、
ブログデザインの勉強をする必要性が出てきたので
備忘録を兼ねて書いていきたいと思います。
ブログデザインの要であるスタイルシートを編集していきます。
『アメブロカスタマイズの道～カラム』でもふれましたが
アメブロも他のブログサイトと同じように、カラム（領域）ごとにデザインを指定しています。
このデザインの指定こそスタイルシート（CSS・カスケードスタイルシート）によってなし得る事です。
スタイルシートには「セレクタ」というのがあって、
「セレクタ」に「カラム」名をつけて、デザインが出来上がる感じです。
じゃぁ、アメブロの「カラム」には、どんな「セレクタ」が指定されているのかというと、
本当はまだまだ細かなカラムに分かれるのですが、
とりあえずはこんな風になってるんや…
と思ってもらえればいいです
ちなみに図の「#*****」というのが「セレクタ」名です。
解りにくいかもしれないので、それぞれのセレクタの役割はどうなっているのかというと
| ●1段目 | ||
| body | タグ | ページ全体 |
| ●2段目 | ||
| #amebaBar | ID | ページの最上部 |
| #frame | ID | ヘッダーと記事とサイドバー部分 |
| #footerArea | ID | ページの最下部 |
| ●3段目 | ||
| #overHeader | ID | ヘッダーの上の誘導メニュー |
| #header | ID | ヘッダー |
| #wrap | ID | 記事とサイドバー部分 |
| ●4段目 | ||
| #main | ID | 記事全体 |
| #sub_a | ID | サイドバー片方 |
| #sub_b | ID | サイドバー片方 |
「●**段目」というのは、
この部分がひとつの塊になってると考えると解りやすいかな…
って私が勝手に思ってるだけです
では、さっそくスタイルシートを編集する準備にとりかかります。
オーソドックスな手順としては
ブログを書く
デザインの変更
cssの編集
で、図のような画面が現れるはずです。
の中がスタイルシートの中身となり、
この中の文字を必要に応じて修正していくことになります。
ただし注意事項として、
編集前に全文をコピーしておく。
触らなくていい所を修正してしまい、デザインが崩れてしまった
というのはよくあります。元に戻す為にも、必ずバックアップをとっておく習慣は必要です。
保存前には表示を確認する。
見た目では分からないので、
保存前には
表示を確認する、で確認しましょう。
編集後には必ず保存しましょう。
これもよく忘れてしまう（オレだけか
）ので、最後の
保存も忘れずに。
エラーが出てしまったら、落ち着いて全文コピー。
保存がうまくいかずにエラーしか出ない事がたまに発生します。
そんな時は、慌てず修正したスタイルシートをコピーして、
その後ブラウザを再起動して、スタイルシートの編集画面を呼び出しましょう。
そしてコピーしたスタイルシートを貼り付けると、スムーズに保存できることもあります。
では次は、さっそくスタイルシートの編集にはいります。
まずは簡単な全体のレイアウト幅を変更しますね