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

はじめに

前回、JUGEMテンプレートのCSSを少し改造してみましたが、今回から本格的にオリジナルテンプレートを作って行きましょう。とは言ってもゼロから作るのはとても大変な作業なのでJUGEMが提供している『plain』というテンプレートを使って、ここから大改造していこうと思います。
『plain』はその名のとおり非常にシンプルなレイアウトになっていてHTMLファイルのほうは基本的な構造のみで構成されています。シンプルな分、改造もしやすいというも魅力のひとつです。早速改造・・・といきたいところですが、まずCSSの書き方をもう少し紹介しておこうと思います。

classを使ってみる

CSSの記述方法は幾つかありますが、今回はクラス(class)を紹介したいと思います（他の記述方法は今後の講座にて紹介していきます）。classとはHTMLタグをより細かく活用するために作られた属性のことで、スタイルシートと組み合わせることによってさらにより多くの表現が可能になります。
例えばHTMLページ内に<p>が幾つか点在していても、classとスタイルシートを組み合わせるだけでそれぞれに違う見た目を継承させることが可能になりました。

クラスの記述はHTMLの属性として以下のように記述します。

クラス名は半角英数であればどのような名前を付けても構いませんが、あとで編集がしやすいように分かりやすい名前を付けておくと良いでしょう。スタイルシートに記述するときはクラス名の前にピリオド（.）を付け足して以下のように記述します。

スタイルの記述方法ですが、上記のように改行をして書き込んでも良いですし、１行で書くことも可能です。プロパティの書く順番も決まっていませんのでそれぞれが好きなように書けば良いと思います。ただあとで編集するときのことを考えて読みやすく書いておく必要があると思います。筆者の場合は上記のように改行を使い、プロパティはアルファベット順に書いています。

上記のようにひとつのclassに対して指定することも可能ですが、複数共通して同じプロパティを指定したい場合も出てくると思います。そういった場合はカンマ(,)で区切って記述することが出来ます。共通しているプロパティはまとめて記述して、そうでないプロパティは個々で指定するという方法があります。

さらにクラス名とHTMLを組み合わせたスタイル定義もあります。例えばページ左右のエリアに対して異なるリンクの色を加えたいときにリンクひとつひとつに「class」を書き込んでいたら非常に効率が悪いです。そこでユニーク名＋HTMLタグと組み合わせることによってより細かくスタイルを定義します。また、どのHTMLタグにスタイルを定義しているのかを分かりやすく表現するために「タグ＋クラス名」という記述方法もあります。

次から次へスタイルを書き込むだけでなく、このような『整理術』があとで編集するとき非常に楽になります。何処にあるタグにスタイルを継承させるのかというのを把握しながら記述していくと良いと思います。

エントリー部分をカスタマイズしよう

それでは『plain』テンプレートでclassを使用しているエントリー部分の見た目を変えて行きましょう。HTMLを一切変更しなくてもスタイルシートがHTMLのどの部分を継承しているのかさえ分かればスタイルシートの編集のみで見た目を大きく変えることが可能です。クラスがエントリーのどの部分を定義しているのかを把握してそれぞれの見た目を変えて行きましょう。

「plain」のエントリー部分はこのようなclass(クラス)で構成されています。

タイトル部分をカスタマイズ

タイトル部分はグレー太文字で本文のフォントサイズより若干大きくなっているだけなので、まずここを少しカスタマイズしてみましょう。スタイルを以下のように変更してみました。

【デフォルト】

【カスタマイズ後】

前回の講座で画像のアップロード、CSSへの記述方法を紹介しましたが前回と同じ要領で画像をエントリータイトルの背景に貼付けます。

今回の画像はタイトル左にアイコンのような役割として貼付けたいので背景はリピートさせないようにします（no-repeat)。画像の配置を左上に設置（0% 0%)すると文字の真横にアイコンが置かれないケースが出てくるので、左中段に設置(0% 50%)します。

アイコンを貼付けたことで、アイコンの横幅分の少し右へ寄せる必要があります。寄せておかないと上の図のようにアイコンと文字が重なり合ってしまいます。

アイコンの横幅は21ピクセルなので、21ピクセル以上の左側に詰める必要があります。『plain』テンプレートのデフォルトのスタイルで『margin』と呼ばれる余白を空けるプロパティが既に設定されていますが、それとは別に詰める場合は『padding』を使います。

この２つのプロパティは似ていますが、marginは枠線から外の間隔を空けるプロパティで、paddingはコンテンツから枠線までの間を指定するプロパティです。



今回はテキスト（コンテンツ）を寄せたいので『padding』を使用します。

『margin』と『padding』の記述方法が様々ですが、上記の例のように４つの値を書く場合は「上、右、下、左」の順に設定しています。つまり「margin: 15px 0px 15px 0px」の場合は、上と下に15ピクセルの余白を作っているということになります。

同様に「padding: 0px 0px 0px 25px;」の場合は25ピクセル左へ詰めるといった具合になります。アイコンの横幅より少し大きめに設定しておくと文字とアイコンが隣接することなく見やすくなると思います。

アイコンの設置のほかにエントリータイトルに新しく加えたプロパティは「border-bottom」です。「border」と呼ばれるプロパティは四方の枠線のスタイルを同時に定義するのに対し、「border-bottom」は下の枠線のみに対してスタイルを定義することが出来ます。

つまり、これを応用すれば四方にそれぞれまったく違うスタイルを定義するということも可能になるわけです。枠線の定義方法は「枠線の幅、枠線のスタイル、色」の順に値を設定していきます。今回使用した二重線の他に様々な枠線スタイルがあるので、【 W3CのCSS1 Reference 】を参考にすると良いでしょう。

エントリーステータスのカスタマイズ

コメント数やリンクなどが表示されているエントリーステータス部分も少し変えてみましょう。

【デフォルト】

【カスタマイズ後】

デフォルトでは文字が左寄せになっていましたが、「text-align: right」にすることで右寄せに変えました。

さらに「background-color」プロパティを使って背景色も加えてあります。「background-color」は背景色に対してのみスタイルを定義したいときに使うプロパティですが、「background: #CCCCFF」のように「background」プロパティを使って記述することも可能です。

「background」は背景色や背景の位置をはじめ、背景関連のプロパティを一括で定義出来る便利なプロパティですが必ず使わなければならない、というわけではありません。

もし別々に定義したほうが分かりやすいという方は今回の例で使った「background-color」のような背景関連のプロパティをひとつひとつ使って良いと思います。

＞＞完成サンプルはコチラからご覧いただけます。

HTMLノータッチ

今回の例のように、まったくHTMLを触らなくても見た目を大きく変えることがスタイルシートを使って可能になりました。
覚えておきたいプロパティも数多くあるし、何よりもスタイルシートを読み解くのも大変だと思いますが、まず挑戦しなくてはなかなか覚えることが出来ません。
特に今回紹介した枠線や背景は応用すればおもしろい効果を作り出すことが出来るのでいろいろ試してみると良いでしょう。