ブログのカスタマイズ デザイン変更をスタイルシート(CSS)で

ブログをカスタマイズしてよりクールに！

ブログ、どうせなら自分なりの個性を出したいものです。
ブログ・サービスの選択にあたり、気に入ったテンプレートがあるかどうかで決めている人も多いのではないでしょうか。そんなお洒落さんにおすすめなのが、スタイルシート(CSS)によるデザインの変更・カスタマイズです。

ブログはその構造上、デザインの変更・カスタマイズがとても簡単に出来るようになっています。

スタイルシート変更の方法はお使いのブログの「種類」や「コース」によって多少異なるでしょうが、基本的にどんなブログでもカスタマイズ出来ます。スタイルシート(CSS)の記述を書き換えること（背景を赤から青へ変更する等）に変わりは無い訳ですから。
以下では自分が使用しているブログ、「OCN ブログ人 はじめの一歩（無料コース）」でデザインを変更・カスタマイズする方法を紹介したいと思います。

・・・

OCNブログ人、無料コース「はじめの一歩」では、基本的にスタイルシートの変更は出来ないようになっています。でも、ブログはスタイルシートでデザインを決定している以上、そのスタイルシートを書き換えさえすれば変更できてしまいます。
方法は至って簡単。自分なりに書き換えたスタイルシートを「オリジナルと同じ場所に同じファイル名でアップロード、上書きする」だけです。裏技ってわけではありませんけどね。

ただし、恒久的にデザインを変更できるわけではありません。ブログを「更新」したり、「コメント・トラックバック」があれば元のオリジナル・デザインに戻ってしまいます。つまり、このデザイン変更の欠点は、更新やトラックバックが有る度に元のデザインに戻ってしまうということです。デザインが元に戻る度に、自分で作ったスタイルシートをアップロード、上書きしなければならないのです。

ちょっとややこしいですが、例えばこのブログ「Melody Talk」は元のデザインは緑を基調としたポップなものです。自分はそれをオレンジ系のデザインに変えています。もしこの記事にコメントが入ると、デザインはたちまち元の「緑」のデザインに戻ってしまうのです。デザインを「オレンジ」に戻すには自分で作ったスタイルシートを再びアップロード（上書き）しなければならないと言うわけです。

というわけで、一日に何回もコメント・トラックバックがあるブログの場合はちょっと大変かもしれません。その度にスタイルシートを上書きしなければならないわけですから。
でも考えようによっては、デザインが元に戻っていれば「コメントかトラックバックがあったんだな」ということが分かるので、一種のお知らせ機能として使うことも出来ます。まあ悪いところだけではありません。

ちなみに「上書き」といっても心配はいりません。更新したりコメントがあれば元のスタイルシートに戻るわけですから。決してオリジナルのスタイルシートが無くなる訳ではありません。でご安心を。

まあ何れにしても、この方法でデザインを変更・カスタマイズするには、先ず自分のブログのスタイルシートを手に入れなければいけません。

まず自分のブログで使用しているスタイルシートの場所（アドレス）を確認してみましょう。インターネット・エクスプローラ（IE）の場合、自分のブログが開いている状態で右クリック、出てきたメニューの中から「ソースの表示」を選択します。するとメモ帳が開きますので、その中からスタイルシートの場所（アドレス）を探します。たいがい上から数行のところにあるので探してみてください。ちなみに自分のブログの場合はこの様になっています。

<link rel=”stylesheet” href=”http://www.melodytalk.net/melody/styles.css”
type=”text/css” />

つまり、私のブログのスタイルシートはこのアドレスにあるということです。アドレスが分かれば、後はそのアドレスをIEのアドレス欄にコピペ、「Enter」キーを押すだけです。スタイルシートが開きますので、そのダウンロードしたスタイルシートを「名前を変えないで（この場合「styles.css」というファイル名で）」適当な場所に保存しておきましょう。マイドキュメントに専用のフォルダを作っておくと便利です。

スタイルシートをダウンロード出来たら、後は書き換えればいいわけですが、これがちょっとややこしい。スタイルシートを見てもらえば分かると思いますが、記号や数字が羅列してあるだけで一体何のことやら・・・。
もちろん知識のある人はそのまま手書きで書き換えればオーケーですが、もっと便利な方法があります。

便利な方法、それはホームページ作成ソフトの利用です。自分の場合はホームページビルダー（ガイドブック付きトクトクパックがおすすめ）ですが、このソフトにある「スタイルシート・マネージャー」がとても便利。すっきりと項目が整理されているので簡単に書き換えが出来ます。

ここではホームページ・ビルダーを利用してスタイルシートを変更する方法を、メモ代わりに残しておきたいと思います。
変更は以下の４つのエリアに分けて考えるとデザインしやすいと思います。

■準備
ホームページ・ビルダーを起動、「ファイル」→「開く」で先ほど保存したスタイルシートを開きます（拡張子はcss）。するとスタイルシート・マネージャーが起動してスタイルの一覧が表示されます（上の図）。
ブログはこの一覧の項目で「色やサイズ」などが決められています。ちなみにどれでもいいのでクリックして選択してみてください。すると下の欄に項目が表示されます。その下の欄に表示された項目こそがデザインを決めている部分です。よってこの項目を変更すれば「色やサイズ」の変更が出来るというわけです。

■Aエリア：タイトル（カラー、文字、レイアウト等）の変更方法。
タイトル部分はブログの顔なので、この部分を変えるだけでもかなりデザインが様変わりします。
スタイルシート・マネージャーに「#banner」という項目があります。この「#banner」がブログのタイトル部分のデザインを決定している項目です。「#banner」を選択した状態で「編集」をクリック、すると編集ダイアログが開きます。

まず「カラー」ですが、これは「カラーと背景」で好きな色に変更します。また「背景画像」を設定すればタイトル部分に画像を入れることも出来ます。ちなみにこのブログ「Melody Talk」ではタイトルにオレンジ模様の画像(800×75ピクセル)を使用しています。背景を画像にする場合は、あらかじめ画像をブログにアップロードし、そのアドレスをこの欄に記入します。画像は少し大きめのものを用意しましょう（ブログ人、３カラム型は大体このサイズ）。

次にタイトルのフォントですが、自分は「フォント」で文字の種類を、「カラーと背景」の「前景色」で色を決めています。ちなみに文字の種類は「Trebuchet MS, Verdana, sans-serif」に、文字色は「白」にしています。
文字の種類はウインドウズとマック、両方に対応しているものと非対応のものとがあるので数種類設定する方がいいかもしれません。レイアウトは「文字のレイアウト」で設定します。タイトルを中央にしたければ「水平方向の位置」で中央に変更します。

■Bエリア：サイドバー（背景色、文字色、リンク等）の変更方法。
このサイドバーの部分は変更できる項目がたくさんありますが、なるべくオリジナルに忠実なデザインにしておいた方が無難です。デザインが元に戻った時のことを考えて、なるべく違和感が無いような変更を施しましょう。

スタイルシート・マネージャーにある「sidebar ～」の項目は全てこのエリアのデザインに関する項目です。「A」はリンク関係、「Li」はリスト（サイドバーにあるテキスト群）、「H2」は見出し部分（左上の「コンタクト」や「最近の記事」など）に関する項目です。

「sidebar A（リンク）」について。リンクを示す「A」タグには色々な種類があります。「A:LINK」はクリック前のリンク、「A:VISITED」はクリック後のリンク、「A:ACTIVE」はクリック中のリンク、「A:HOVER」はマウスが上にある時のリンクといった具合です。自分は「sidebar A」→「フォント」でリンクのスタイルを「文字飾りなし」に設定し、後はそれぞれ「sidebar A:LINK」は茶色に、「sidebar A:HOVER」は薄茶色に、といったようにそれぞれ色を変更しています。

「sidebar Li」では「カラーと背景」の「前景色」で文字色を変更しています。サイドバーはほとんどリンクなのでテキストが表示されることはありませんが、もし表示された場合は、ここで変更した文字色が表示されます（左サイドバー下の「Welcome to my Blog ! 」以下がそれ）。

「sidebar H2」では「カラーと背景」の「前景色」と「背景色」でそれぞれ色をを変更しています。ブログ「Melody Talk」左上のセミタイトル「コンタクト」や「最近の記事」がそれで、背景（背景色）を薄茶、文字（前景色）を濃い茶色に設定しています。その他にも色々変更できるので試してみてください。

■Cエリア：メイン記事（背景色、文字色、リンク等）の変更方法。
いよいよメインのスペース、本文のデザイン変更ですが、上から順に見ていきます。

最初はメインの記事部分の背景と文字色。スタイルシート・マネージャーの「content」を選択した状態で「編集」をクリック、開いたダイアログの「カラーと背景」を選択します。そこの「前景色」で文字色を、「背景色」で背景の色を決めています。自分のブログの場合は背景を白、文字はちょっと薄い黒色に設定しています。

次は日付の部分。ここは「content H2」という項目でデザインが設定されています。同じようにダイアログを開き、「レイアウト」を選択します。ブログを見てもらえば分かりますが、自分はこの項目で、日付の下に薄茶の一本線を入れています。具体的には「上下左右（パディング3px）、下方向（マージン10px, ボーダー2px, カラー, スタイル実線)」という設定です。まあこの辺は完全にお好みですね。

最後は記事のタイトル部分「content H3」です。自分はサイドバーの見出しの時と同じく、「カラーと背景」で背景を薄茶、文字を濃い茶色に設定しています。

あと細かいところでは「content P.posted（各記事下のカテゴリやコメント、トラックバックへのリンクがあるところ）」のレイアウトで、上部に薄オレンジの点線を引いています。ここも先に挙げた「日付」のようにダイアログの「レイアウト」で変更しています。

■Dエリア：背景（カラー）の変更方法。
絵で言うキャンパスの部分です。「Melody Talk」では元のデザイン（クラシックテンプレートの「タイプパット人」）が青色となっていますが、自分は薄いチョコレート色に設定しています。このキャンパスの上にブログが乗っているというわけですね。
スタイルシート・マネージャーに「BODY」という項目があると思うのでそれをクリック。「編集」ボタンを押すと編集ダイアログが表示されます。

「カラーと背景」を選択してみましょう。もしあなたのブログの背景に色が付いていれば、この部分が変更されているはずです。ちなみに自分のブログの場合は「薄いチョコレート色」ですね。この項目をクリックすることで大まかな色の変更が出来ますが、さらに「ユーザー定義」→「その他」を選択すれば、もっと細かく色の設定が出来るので色々試してみてください。変更が終わったら「OK」でダイアログを閉じます。

・・・

色の設定など、どんな色がいいかは実際に見てみないと分からないと思います。そんな時におすすめなのが、やはりホームページビルダーです。ホームページ・ビルダーを使えば、デザインを見ながら編集することが可能となります。

ビルダーの「URLを開く」で自分のブログを読み込みます（多分エラーがでます。ブログパーツ等、環境によっては取り込めません）。すると真っ白なマイブログが現れることでしょう。先ずはそのファイルを適当な名前で保存しましょう。

次にメニューにある「S」のアイコンをクリック、スタイルシート・マネージャーを開きます。一覧に出ているスタイルシートへのリンクを削除し、新たに保存しておいたスタイルシートをリンクさせます。これでカラーなブログがビルダー上に現れます。
あとは実際に見ながらスタイルシートを編集していけばいい訳です。ただし表示が若干崩れたり、文字化けしたりするので編集しづらいかもしれません。とはいえ、やはり見ながらのほうが編集には便利です。

くどいようですが、手を加えたスタイルシートはオリジナルと「同じ場所」に「同じ名前」でアップロード、上書きしなければダメですよ。

ブログ人にログイン、「コントロールパネル」→「ファイル管理」でオリジナルの「styles.css」がある場所を探します。見つけたら「新規ファイルのアップロード」で自分のPCに保存した変更後のスタイルシートを選択、アップロードします。「上書きしますか？」のダイアログが出ますが「はい」で上書きしてください（更新やコメント、TBで元に戻るので心配いりません）。WEBで確認すればおニューなデザインになってるはずです。

・・・

という訳で、とりあえずこれで終了です。走り書きなので文章に筋が通ってるか甚だ疑問ですが・・・。参考までに色設定で便利なサイトを載せておきます。

□□□
Mariのいろえんぴつ