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

サイト名の両側に画像を配置する

サイト名が入るヘッダー部分の両脇には装飾となる画像が配置されています。画像はCSSに格納されているので、必要に応じて画像は変更出来るようになっています。タイトル　文字数に捕われることなく画像を両脇に設置したいので、サイト名が記述されているH1タグに対して背景画像を貼付けるという方法では不十分です。そこでH1タグの中に右側の装飾、左側の装飾が入ることになるspanタグを導入します。HTMLコードは以下のようになります。

このようにspanタグでタイトル名を囲い込みます。あとは「h1_right」のほうは左側に背景が設置されるようにし、「h1_left」では左側に背景が設置されるように設定します。それぞれのspanタグが重なりあうことになるので、背景色は設定しないで「transparent（透明）」と記述しておくと良いでしょう。また、画像の大きさにあわせて「padding_left」「padding_right」プロパティにそれぞれ適当な数値を設定します。今回使った画像は横幅「60px」だったので、その数値をプロパティの値として使いました。もう少し文字と装飾に感覚を空けたかったり、重なるような演出がしたい場合は必要に応じて値を変えて行くと良いでしょう。なお、このテクニックはWindows版IE5.xとMacintosh版IE5.xでは上手く表示されないので、『mid west』で使われている実際のCSSではハックを使って古いブラウザでは装飾が映らないようにしてあります。

リストにカスタムマークを使う

ブログは文章を書くのがメインなので文字の大きさや行間に着目して「font-size」や「line-height」を設定しておくと良いですが、文字といってもいろいろな表現の仕方がありますし、画像を加えることも可能です。例えば何かを箇条書きしたいときはリスト(ulタグ)、順序のあるリストを作りたいときは(olタグ)、そして他のソースから引用したいときは(blockquoteタグ)などがあります。こういったタグをディフォルトで使用すると見た目が平凡なものが多いので、ここでもCSSを使って見た目をカスタマイズして行きます。

例えば、コンテンツエリア内のリストに対してスタイルを定義したい場合、エントリーが記述されている「entry_des」クラスに対して条件構文を設定します。こうすることにより、他の箇所でulタグが使われていてもお互い影響されることなく独自のスタイルを継承させることが出来ます。今回の例ではディフォルトで表示される黒丸マークを「list-style:none」で削除して、カスタムマークを背景画像として設定しています。CSSには「list-style-image」と呼ばれる黒丸マークの代わりとなる画像を直接設定出来るプロパティがありますが、

スクリーンショットのようにブラウザによってはズレが大きい場合があるので、今回はズレが比較的少ない「background」でのテクニックを使いました。片方が正解で別のやり方が間違っているというわけではないですので、自分にあったやり方でCSSを組み上げて行くと良いでしょう。

手軽に画像の見た目を変える

文字だけでなく、エントリーに貼付ける画像も同様にCSSでカスタマイズしてみましょう。エントリーするときに余分にタグを書き込むのは面倒なので、画像タグ（img）だけで出来るCSSのカスタマイズ方法をここでは紹介します。枠線(border)と写真に余白(padding)を作るだけでお手軽写真ルックが完成します。ここで注意しておきたいのが、背景色を必ず設定しておくことです。『mid west』のように背景色が白以外の場合、画像のCSSに背景色が設定していないとサイトの背景色がそのまま継承され白色の余白を作ることが出来ません。今回、少しでも立体感を出したかったので、上左、下右でそれぞれ異なる色の枠線を設定しました。もちろん、「border: 1px solid #666」というふうに四方に同じ枠線の色を設定することも可能ですが、こういった細かい設定がぱっと見のインパクトが増すときがありますよ。

ここからは任意の設定になりますが、もしサイトに設置する画像を常に左詰めにしたいのであれば、「float: left」とします。こうした場合スクリーンショットのように画像と文字の間隔がまったくなく、文章が読み難くなります。そこで「margin」プロパティを使って余白を作ります。今回の場合は写真の右と下に余白を作りましたが、左詰めにする場合や中央揃えにする場合とで余白の空ける方は異なると思うので自分にあうレイアウトを見つけてください。

このような細かい設定がサイトに統一感をもたらし、見た目だけでなく読みやすさも向上させてくれるときもあります。

どこまでCSSで制御するのかもカギ

前回の講座にある『mid west』テンプレートのスクリーンショットをご覧になると分かりますが、CSSを外した状態だとエントリー内にある写真以外、画像はすべて非表示されます。これはレイアウトに使われている画像がすべてCSSで制御されているためです。JUGEMのようにHTMLファイルとCSSファイルがひとつずつだけでカスタマイズが可能な場合、ここまでする必要はないかもしれません。しかし同じHTMLファイルでレイアウトのパターンを増やしたいとき、またはひとつのサイトでもHTMLファイルが複数存在するとき、CSSで一括管理するというクセをつけておくと後々非常に楽になります。

ネットを巡回しているとCSSで作られた魅力的なサイトがたくさん見つかると思います。そういったサイトもこの講座で紹介したテクニックの応用にすぎません。使えるCSSの『武器』はみんな一緒です。筆者も毎回みなさんのようにどのように使ったら良いのか頭をひねりますし、ハックで悩まされています。あとは、その武器をいかに使うかによります。今回の講座でたくさんのことを紹介しましたが、参考書やCSS関連のサイトを参考にしていろいろ実験してみてください。まずはCSSでカスタマイズするのっておもしろいね・・・と感じてもらわないと先に進めませんからね。今回の講座でもその楽しさが少しでも伝わっていたのであれば幸いです。

グッドラック。

※ 今回、この講座で紹介しましたオリジナルテンプレート『mid west』は、JUGEM管理者ページ内「テンプレートダウンロード」からダウンロードすることができます。みなさんぜひご使用ください！
サンプルはコチラから！