無料ブログ JUGEM(ジュゲム) - デザインで選ぶブログ(blog)サービス・簡単作成・モバイルテンプレート編集・モブログ・携帯対応！

はじめに

CSS。ブログを持っている方なら一度は聞いた事があると思います。CSSはカスケーディング・スタイルシート（Cascading Style Sheet）の略なわけですが、この言葉にはそもそもどういった意味があるのでしょう。

CSSの最初の頭文字にあたる「Cascade」は『段階的処理』『次々と接続する』という意味をもっています。つまり、CSSとは見た目（Style）を制御するための情報を継承する（Cascading）文書（Sheet）というわけです。JUGEMの管理者ページにある『テンプレートの編集』をご覧になると分かりますが、ブログの内容が掲載されるファイル（HTML）と見た目をカスタマイズするファイル（CSS）と２つに分かれています。従来、見た目の制御もHTML内で行われていたわけですが、CSSの登場で見た目の制御は別ファイルで行えるようになりました。

CSSはブログの味方

CSSという言葉はよく聞くし、ブログの管理画面へ行けば一度は見かけるこの言葉。ブログの内容と見た目を別々に分けて管理してある・・・というのは分かると思いますが、ではCSSを使うことによって具体的にどのようなメリットがあるのでしょうか。

1. ブログはたくさんのファイルを管理しなければならないので、ひとつひとつのファイルを編集して見た目を変えるのは非常に手間がかかります。しかし、CSSを使えばCSSを編集するだけであなたのブログの見た目を瞬時に変えることが出来ます。

2. メニューバーを右から左へ・・・のような大胆なレイアウトの変更もCSSでなら１行書き換えるだけでも可能になります。

3. HTMLファイルのみで見た目を制御していた従来のやり方では不可能だったクリエイティブなレイアウトを制作することも可能になります。

つまりCSSはブログをデザインするのに必須言語といっても過言ではないわけです。でも、「CSSを覚えるのって難しくない？」「CSSを知っていてもセンスの良いブログサイトを作れないんだよなぁ」と考えている方も少なくはないはず。

どうやって勉強しよう？

CSSはたくさんのプロパティと呼ばれるレイアウトのどの部分の見た目を変えたいのか指定するコマンドが存在し、それに使われる値もある程度把握しておかなければなりません。しかも、CSSの読み方がブラウザによって違ったりする場合があるのでときにはレイアウトが崩れてしまう・・・なんてこともあります。

書店でCSS辞典を購入してCSSはだいたい理解出来たとしても、それでカッコいいブログサイトが作れるようになれるというわけでもありません。国語の成績が満点でも良い小説が書けるとは限らないのとおなじです。

CSSを勉強するのに最もてっとり早い方法は自分のお気に入りのブログサイトのCSSを見てみることです。CSSのある場所を見つけるにはまずHTMLのソースをみる必要があります。

見ているページ上で右クリックすると「ソースを表示」があるのでそれを選択してソースを見てみましょう。JUGEMの場合だと６行目から１０行目あたりに以下のようなコードがあるはずです。

もしあなたのお気に入りのブログが「http://●●●.jugem.jp/」だとすれば上記のソースコードによればCSSファイルは「http://●●●.jugem.jp/jm_style.css」にあります。

JUGEMのCSSファイルはスタイルの定義している順番が一環としているので、自分のブログサイトのCSSを読む事が出来れば他のブログサイトでも比較的簡単に把握することが出来るようになっています。

「これどうやってしたんだろう？」と疑問に思ったのならまずCSSファイルをチェックしてみると良いでしょう。もちろん、他人のデザインをそのまま流用するのはよくありませんが、気になるテクニックを見つけ出してそれを自分なりにアレンジしていくことがカッコいいブログサイトを作るための第一歩だと思います。

また、CSSファイルをたくさん見る事で作り方そのもののコツもつかめてくると思います。最初はコードがたくさんあってよく分からなくても、たくさん見る事で見慣れてくるようになります。
センスの良いブログサイトを作るためにはまずはセンスの良いブログサイトをたくさんみて勉強です。

「Circle」の秘密

JUGEMの人気テンプレートである「Circle（サンプル）」は円を効果的に使っているデザインです。特にカレンダーの部分は日付の数だけ円が描かれていてとても可愛らしいデザインになっていると思います。もちろん、このカレンダーの見た目もCSSで制御してあるわけですが、実際どうなっているのか見てみましょう。

まず最初の「calendar」でカレンダー全体の見た目を決定します。ここでは文字の色やフォントなどが設定されています。このカレンダーのチェックポイントになるのは「cell」のほうになります。

「background」というプロパティが定義されていますが、このプロパティを使って文字の背景に画像を入れているのです。この場合、テンプレートディレクトリにある「cell.gif」という画像を使用しているということになります。

ディフォルトでは背景がリピートしていまうので「no-repeat」と記述してリピートしないようにしてあります。こうすることでフォントサイズを変えても日付に対して円が１つしか表示されないようにしています。

My Circleを作ってみよう

CSSファイルを見ることでカレンダーがどのように作られているのかだいたい理解出来ました。それでは日付の背景として使われている画像を自分のオリジナル画像に差し替えてみましょう。まずお使いの画像編集ツールを使って画像を作ってみてください。

CSSファイルのほうで日付が入るセルは「23ピクセルx23ピクセル」の大きさと指定しているので、その大きさで画像を作ると良いでしょう。納得いくものが完成したらコンピュータに保存してください（保存した場所とファイル名はちゃんと覚えておきましょう）。

画像の準備が出来たらJUGEMの管理画面に戻ります。「画像の管理」メニューより、そこから先ほど作ったオリジナル画像をアップロードします。

アップロードするとJUGEMは自動的に画像のコードを生成してくれますが、このコードはブログエントリーをするときに画像を貼付けたいときのコードです。CSSに使う場合は画像へのアドレスのみが必要になります。

例えば以下のような感じです。

画像へのアドレスをコピーして再びテンプレートの編集画面へ戻ります。そしてCSS内にあるカレンダーのスタイルを以下のように書き換えます。

色が強いMYサークルを作ったのでそれにあわせてカレンダーの数字のスタイルも変えてみましょう。ディフォルトのグレーではちょっと読み難いのでもう少し濃いめの色に設定。さらに数字の読みやすさを向上させるために文字をすべて太字に変換させます。

これらの設定はカレンダー内のみに適応したいので「.calendar」にて以下のように定義します。

つまり、今までテンプレートディレクトリを指定していたかわりに、先ほどあなたがアップロードした画像のアドレスに指定しなおすわけです。あとは「更新」ボタンをクリックするだけでCSSの内容が変更されます。

自分のブログをチェックしてみるとカレンダーの日付の背景があなたのオリジナル画像になっているはずです。MYサークルの色にあわせて今回のように文字の色とかを変えてあげると読みやすさも向上しますし、色の組み合わせでおもしろいデザインが完成するかもしれません。

とにかくやってみるのが大事

このように、現存するテンプレートのCSSを少しだけ変えるだけでも自分だけのオリジナルブログに早変わり・・・なんてことも出来るわけです。ブログはまずやってみるのが肝心なように、CSSもとにかくやってみるのが大事です。

お気に入りのブログサイトのCSSをみて勉強してみて、自分で実際CSSを触ってみましょう。もしレイアウトが壊れてしまったり、分からなくなったらまたJUGEMのテンプレートをダウンロードしてやり直すことも出来ます。

自分の部屋をアレンジするようにCSSであなたのブログもいろいろアレンジしてみてはいかがでしょうか。