HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
何本か記事を書いてきて、記事本文にHTMLを使用しましたので、使ったHTMLタグのスタイル設定（デザイン設定）を行なってみました。
いくつかの設定を行いましたが、今回は初心者の方でも色が変更できるようになる方法を説明したいと思います。たとえばブログ記事編集の際、太文字にしたいときにはBボタンを押しますよね。そうして書かれた文字の色をすべて一斉に変えることができるようになる方法です。
HTMLやCSSが分かる人にとっては何のことはない作業ですが、分からない人にとっては少しハードルが高いかも知れませんので、極力ていねいにご説明したいと思います。
まず作業を行う前に、カスタマイズの際に必ず守っておきたいお約束の部分からです。
CSS編集を行う前に
CSS編集メニューを開くには、マイページのヘッダ下の「クイックリンク」をクリックして、出てくる窓のいちばん左の列の「［デザインの変更］≫スキンCSSの編集」をクリックするのがいちばん便利かと思います。
ページを開くと、「！ご注意」の下に@charset "utf-8";ではじまる大きな窓があります。ここに書かれている文字を変更することで、ブログデザインの変更できちゃいます。
作業をはじめる前に、変更前の状態を必ずバックアップするようにしましょう！
間違ったり、気に入らなかったりしたときに、すぐ元に戻せるようにするためです。枠の下に、「編集前の状態に戻す」というリンクがありますが、1段階前の状態にしか戻りません。CSSを修正する際には、修正して確認するという作業を繰り返すことになりますから、最初の状態まで戻したい時のために、必ずバックアップを行う必要があるのです！
- メモ帳を開く
Windowsのメモ帳でなくても、秀丸などテキスト編集できるエディタなら何でもOK。Wordなどのワープロソフトは避ける。 - 枠のなかのテキスト全部をコピーしてメモ帳に貼り付ける
Windowsであれば、枠をクリックしてCtrlを押しながらAを押すと全文を選択した状態になり、その状態でCtrlを押しながらCキーを押すとコピーできた状態になる - メモ帳に貼り付ける
メモ帳のウィンドウのどこかをクリックして、メモ帳の編集ができる状態にしたうえで、Ctrlキーを押しながらCキーを押す。 - 「ファイル≫名前をつけて保存」で保存する。ファイル名はバックアップ日付が分かるように、今日ならば「CSS111221.txt」としておけばよいでしょう。バックアップ用の専用フォルダをつくっておくのをおすすめしますが、とりあえずデスクトップに保存しておき、不要になったら削除していってもいいと思います。
私は、HTMLやCSSの保存にはez-HTML というソフトを使用しています（無料／リンクウェア）。ウェブサイト制作を本業とする方も多く使っているスグレモノです。ご興味のある方はダウンロードして使ってみてください。
CSSを編集する
さて、バックアップファイルの保存がすんだら、バックアップファイルを上書きしてしまわないために、再び「名前を付けて保存」で作業用ファイルを保存しておきます。ファイル名は何でもOKです。mystyle_yymmdd.cssとでもしておけばよいでしょう。yymmddは日付で、2011年12月21日であれば、mystyle_111221.cssとなります。こうしておけば、いつでもある日付の状態に戻すことができるようになります。
さて、ファイルの内容を見てみましょう。目次からはじまっています。丁寧です。下のほうを見ていくと、おまじないのような文字の他に、いろいろ説明が書かれています。CSSファイルでは、*/と*/の間に挟まれた部分が説明文となり、この間には何を書いても設定に影響を与えません。だけど、その他の部分は、一文字削除しただけでもデザインに影響が出てしまいますので、ご注意ください。
このCSS、めちゃくちゃ優秀です。アメーバユーザーのために分かりやすくするために丁寧につくられていますが、プロも見習いたいくらい優秀です。それほど分かりやすく、見通しよくつくられています。アメーバ技術者の優秀さがうかがえます。
（続く ）