TopCSS > 2006年11月
2006年11月30日

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

November 30,2006 2:20 AM
Tag:[, ]
Permalink

CSSでブログに影をつける(ドロップシャドウ)」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる(かもしれない)方のために、Photoshop 6(CSは持ってません)を利用した作成方法を紹介します。

新規ウィンドウを作成[ファイル]-[新規]で(固定レイアウトの場合は)ブログ幅のウィンドウを作成。実際の横幅はもっと広いと思いますが、説明上、ここでは 250px に設定しています。

作成した新規ウィンドウ新規作成のウィンドウはこんな感じになります。

[レイヤー]パレット[レイヤー]パレットに表示されている[背景]をダブルクリック。

新規レイヤー開いたウィンドウのレイヤー名は「レイヤー0」になっていると思いますので、そのまま[OK]をクリック。これは、[背景]から任意の名前に変更することで、レイヤーのロックを外してドロップシャドウ等の効果を設定できるようにするための操作です。

[レイヤー]パレットこれで[レイヤー]パレットに表示されているレイヤー名が「レイヤー0」に変更されました。

画像サイズ選択[イメージ]-[画像サイズ](CSの場合はカンバスサイズ)を選択。

画像サイズ設定ウィンドウドロップシャドウ分の横幅を追加します。サンプルでは左右 25px ずつ追加した合計サイズ 300px に設定しています。変更前のサイズはこのウィンドウの上部に表示されています。
アンカーはどの方向に広げるかを決めるものです。デフォルトは中央から上下左右に広げる設定になっていますので操作しないでください。

設定後のウィンドウこれで最初の画像の左右に余白が出来上がります。この状態では余白は透明ですが、背景色を設定したい場合は以降の背景色の設定を行ってください。必要でない方は、5つ下にあるドロップシャドウ設定に進んでください。

[レイヤー]パレット[レイヤー]パレットの下にあるレイヤーの新規作成をクリックして「レイヤー1」を作成。

レイヤーを背景に変更その状態で[レイヤー]-[新規]-[レイヤーから背景へ]を選択。

[レイヤー]パレットこれで「レイヤー1」が「背景」に変更されました。

設定後のウィンドウまた画像の左右余白の部分に背景色(ここでは白)が設定されます。背景色は予め設定している背景色が適用されます。

[レイヤー]パレット次にドロップシャドウを設定します。[レイヤー]パレットの「レイヤー0」をダブルクリック。

[レイヤースタイル]ウィンドウ[レイヤースタイル]ウィンドウが開きますので、光彩(外側)を選択し、[構造]-[描画モード]を「通常」、[構造]の左下のラジオボタンを選択して右側のパレットをクリックしてお好きな色を設定(これがドロップシャドウ色になります)。その他、[エレメント]や[画質]でドロップシャドウを微調整します。
ドロップシャドウの具合は、先程のウィンドウ右側にある[プレビュー]をチェックしておけばリアルタイムで表示を確認できます。
決まったら[OK]をクリック。

ドロップシャドウ完成これでドロップシャドウが出来上がりました。あとは画像の高さを短くするだけです。

[画像サイズ]選択[イメージ]-[画像サイズ](CSの場合はカンバスサイズ)を選択。

画像サイズ設定ウィンドウ開いたウィンドウで高さを変更します。ここでは 3px にしてみました。これで[OK}をクリック。

警告ダイアログ「画像の一部が切り抜かれます」という警告のダイアログが表示されますが、そのまま[OK]をクリック。

完成画面これでドロップシャドウ画像の完成です。

2006.12.02
記事を全面変更しました。

Comments [10] | Trackbacks [1]
2006年11月29日

CSSでブログに影をつける(ドロップシャドウ)

November 29,2006 1:55 AM
Tag:[, , ]
Permalink

CSSでブログに影をつける(ドロップシャドウ)ブログのサイドバー部分に影(ドロップシャドウ)を作成するカスタマイズを紹介します。

ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず(そのテクニックが紹介されている記事もなく)、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。
最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。

このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。

2008.09.11 追記
Movable Type 4.x 配布テンプレートご利用の方は「CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)」をご覧ください。

1.ドロップシャドウの仕組み

1.1 固定レイアウト

固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、CSS を利用して表示します。ドロップシャドウとはいっても、要するにブログ幅に合わせた、単なる背景画像です。

下のスクリーンショットはその一部分です。固定レイアウトの場合、下の画像と、これを 180℃反転させた画像を、幅900px ほどの GIF 画像の両端に配しています。

背景画像

基本的には、body 要素の背景画像(CSS で言えば body 要素セレクタの background プロパティ)に背景画像を指定すれば良いのですが、IE6 の場合、ブラウザのリサイズでタイトルバナー右端と背景画像の間に空白が時々発生するという問題があります *1 ので、ここでは div 要素に背景画像を与えています。*2

また、div 要素に設定する場合でも、width プロパティを指定した親の div 要素がないと、body 要素に背景画像を設定した場合と同様の事象になるようです。
かなりおおざっぱですが下記にHTMLマークアップのイメージを記します。*3

<body>
  <div> ← ブログの幅を指定
    <div> ← 背景画像を指定
   :
 [ブログ本体のマークアップ]
   :
    </div>
  </div>
</body>

設定内容については、後述する公開テンプレートによるカスタマイズ(2項)をご覧ください。

下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。

1.2 リキッドレイアウト

基本は固定レイアウトと同じですが、左寄せの背景画像と右寄せの背景画像を2つ作って表示させることで実現します。背景画像は異なる要素に与えます。例えば、html 要素と body 要素、あるいは body 要素の次に与えた 2つの div 要素等です。*3
下記にHTMLマークアップのイメージを記します。

<body>
  <div> ← 背景画像(左用)を指定
    <div> ← 背景画像(右用)を指定
   :
 [ブログ本体のマークアップ]
   :
    </div>
  </div>
</body>

こちらもサンプルを用意していますのでご覧ください。

2.公開テンプレートによるカスタマイズ

2.1 共通事項 - テンプレートの修正

固定レイアウト・リキッドレイアウトともに、テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
   :
   (中略)
   :
</div>
</div>
</body>

2.2 固定レイアウトの場合

2.2.1 画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に合わせています。

2.2.2 スタイルシート修正

スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。

/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #8fabbe;
}
     :
    (略)
     :
.layout-three-column #box {
    width: 850px;
    width: 870px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner {
    height:100%;
}

これでドロップシャドウが表示されればOKです。なお上記のサンプルは、背景画像(back_fixed.gif)がスタイルシートと同じディレクトリにあることを想定しています。

#inner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

2.3 リキッドレイアウトの場合

2.3.1 画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

2.3.2 スタイルシート修正

スタイルシートにある、下記の部分の赤色を削除し、青色を追加してください。(略)と書いてある部分は、表示を省略しているだけで、「その部分を全て削除する」という意味ではありません。

/* タイトルバナー */
#banner {
    margin:0 15px;
    _height: 100%;
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}
*:first-child+html #banner {
    height: 100%;
}
      :
     (略)
      :
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    margin: 0 200px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    left: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    right: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #inner {
    background: url("back_liquid_left.gif") repeat-y top left;
}
.layout-three-column-liquid #box {
    background: url("back_liquid_right.gif") repeat-y top right;
    width:100%;
}

#banner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

2007.05.09 追記
CSS に IE7 対応のセレクタを追加しました。


*1:これは当サイトのテンプレートだけかもしれませんので、表示はご利用のテンプレートによって異なる可能性があります。

*2:背景画像の高さは、他のサイトを拝見すると、3px?5pxと、非常に薄いものが多いです。CSS によって繰り返し表示するということはブラウザのレンダリング性能に依存する訳ですが、どの程度の高さが妥当であるかは不明です。個人的にはサンプルで示している高さでも特に問題ないと思ってます。言い換えると、繰り返し表示することでブラウザ下の部分が「はみだす」とか「帳尻が合わない」ということにはならないようです。

*3:div 要素を背景画像表示のために用いるのはXHTMLとして適正な文書構造ではありません(本来はブログ全体を括る要素に与えるのが妥当)が、クロスブラウザ対応のためのテクニックとして記しています。

Comments [46] | Trackbacks [1]
2006年11月17日

IE7 の CSS ハック

November 17,2006 1:50 AM
Tag:[, ]
Permalink

「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する(=他のブラウザと表示を合わせる)場合、該当のセレクタの前に

*:first-child+html

を付与します。例えば、IDセレクタ #banner に適用させる場合、

*:first-child+html #banner {
      :
  [IE7用のスタイルを記述]
      :
}

となります。

なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します(下記)。この順番を間違えると期待する表示にならないのでご注意ください。

#banner {
      :
  [IE7以外のスタイルを記述]
      :
}
*:first-child+html #banner {
      :
  [IE7用のスタイルを記述]
      :
}

以下で紹介する CSS ハックは、以前、Lucke bag::blog さんが CSS hacks から引用された記事(下記)から内容が変更されているようですので、下手な訳をつけて再掲しておきます。
IE7 およびモダンブラウザ、Opera9 に対応しています。

Lucky bag::blogIE7 を含むモダンブラウザ向けの CSS ハックまとめ

以下、CSS hacks より抜粋・和訳

ほとんどのCSSハックはセレクタのバグを扱ったものです。以下は、ブラウザバージョンと、要素を選択するためのセレクタの開始部分を示したものです。これらのハックはブラウザのバグや欠けている機能を利用しているので、あまり知られていない、または将来登場するブラウザでは結果が異なるかもしれません。ご注意ください。
セレクタのすべては有効なCSSを使用します。

IE 6 and below (IE6以下)

* html {} 

IE 7 and below (IE7以下)

*:first-child+html {} * html {} 

IE 7 only (IE7のみ)

*:first-child+html {} 

IE 7 and modern browsers only (IE7 とモダンブラウザ)

html>body {} 

Modern browsers only (not IE 7) (IE7 以外のモダンブラウザ)

html>/**/body {} 

Recent Opera versions 9 and below (最近の Opera9 以下)

html:first-child {} 

「IE7 and below」のハックが、「IE6 and below」と「IE7 onle」の、2個の別々のセレクタであることに注意してください。両方のセレクタに、必要とするセレクタの残りを加えなければなりません。また、「IE6 and below」がセレクタを正しく解析することができなくなるので、2つのセレクタをカンマで結合することはできません。

上のセレクタはhtml要素、または body要素を選択します。これは完全なセレクタの始まりとして使用されるべきです。

例えば、あなたが必要とするセレクタが

#foo .bar

であり、それをIE7だけに適用したいのであれば、セレクタは

*:first-child+html #foo .bar

になるでしょう。

以上です。
訳が間違ってましたらご指摘ください。適宜差し替えます。

Comments [3] | Trackbacks [10]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3