TopCSS > 2006年7月
2006年7月27日

リキッドレイアウトのサイドバー表示位置を補正する

July 27,2006 12:30 AM
Tag:[, ]
Permalink

公開テンプレートのリキッドレイアウトでサイドバーの表示開始位置を補正するカスタマイズです。

1.概要

リキッドレイアウト左のスクリーンショットは当サイトで公開しているリキッドレイアウトの一部分です。
このリキッドレイアウトでタイトルバナーの縦幅を広げると、

リキッドレイアウトのタイトルバナー縦幅を広げた後このようにタイトルバナー下部とサイドバーの距離が近づくか、重なってしまいます。これはリキッドレイアウトのサイドバーを絶対値指定で配置しているためです。

「絶対値指定」というのは、例えば「ブラウザの左端からxピクセルの位置から表示」という指定のことを指し、CSSの「position: absolute;」というプロパティ値で指定します。リキッドレイアウトではこのプロパティを利用して、左サイドバーは左端から、右サイドバーは右端からの表示開始位置を指定しているので、常にブラウザの両端に表示される仕組みになっています。
しかしながら上端からの表示開始位置も併せて指定する必要があるため、サイドバーの上に表示しているタイトルバナーの幅を広げると先の事象が発生します。本エントリーではサイドバー垂直方向の表示開始位置を補正して、この事象を解消します。

なおスクリーンショットでお分かりの通り、縦幅を広げても中央カラムの開始位置がタイトルバナーに追従して表示されているのは、中央カラムは絶対値指定を行っていないためです。

参考までに、上記タイトルバナーの縦幅は、スタイルシートの

/* タイトルバナー */
#banner {
    padding: 15px;
     :

の赤色部分を

/* タイトルバナー */
#banner {
    padding: 27px 15px;
     :

に変更しています。デフォルトより縦幅の広い画像を表示する場合等はこの部分を変更してください。画像の設定方法は「CSSでタイトルバナーに画像を表示する」を参照ください。

2.補正方法

サイドバーの垂直方向の開始位置を補正するには、スタイルシートの下記の赤色部分を修正(値を大きくする)してください。なお利用しているレイアウトによって変更箇所が異なりますのでご注意ください。

3カラムの場合

       :
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 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;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
       :

2カラム(左サイドバー)の場合

       :
/* 2カラム(リキッドレイアウト:左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
       :

2カラム(右サイドバー)の場合

       :
/* 2カラム(リキッドレイアウト:右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
       :

リキッドレイアウトのサイドバーを補正これでスクリーンショットのように開始位置が補正されます。
このサンプルのスタイルシートは下記のように変更しています。

       :
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 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: 119px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 119px;
    right: 15px;
    color: #ffffff;
}
       :
Comments [4] | Trackbacks [1]
2006年7月24日

CSS のフォントサイズ指定が table に反映されない問題

July 24,2006 2:12 AM
Tag:[]
Permalink

CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table(th/td)にフォントサイズが反映されないという問題があります。

この不具合を回避するには2通りの方法があります。

1.ページ先頭のXML宣言を削除する

ひとつめの方法は、テンプレート1行目にあるXML宣言

<?xml version="1.0" encoding="utf-8"?>

を削除します。
XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします(「後方互換モード」と「標準準拠モード」については後述)。

2.th 要素、td 要素に直接プロパティを設定する

後方互換モードのままでも、例えば

th, td {
  font-size: 10px;
}

と設定することで、プロパティの値を反映させることができると思います。

標準準拠モードと後方互換モード・DOCTYPE宣言について

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言(文書型宣言)に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。

今すぐ調べる!ホームページ作成リファレンス標準モードと互換モードについて
カスタムチャンス! 雑記帖文書型宣言とブラウザの表示モード

XML宣言が記述されている場合に「後方互換モード」になる

IE5.5/6.0 では DOCTYPE 宣言を1行目(先頭)に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。

Lucky bag::blogxml宣言について

IE5.5/6.0 の後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されない

IE5.5/6.0 の後方互換モード(および5.5以前)の場合、親要素に設定した下記のプロパティが子要素の table に反映されないというバグがあります。標準準拠モードでは問題なく表示されます。

CSSバグリスト@CSSバグ辞典スレッドフォントサイズの指定が表要素に継承されない

上記サイトからの引用で、 IE5.5/6.0 後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されないようです。

color font-size font-style font-variant font-weight letter-spacing line-height text-decoration text-transform

Comments [8] | Trackbacks [4]
2006年7月21日

CSSでタイトルバナーに画像を表示する

July 21,2006 1:31 AM
Tag:[, ]
Permalink

デフォルトテンプレート変更後ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショットのように画像を表示することができます(季節に合わない画像ですいません)。
なお画像は Link Style 様より利用させて頂きました。ありがとうございました。

1.基本的な設定方法

バナー部分のHTMLと画像を表示するCSSの基本的な構造は次の通りです。

HTML

HTMLは h1 タグと a タグでブログのタイトルをリンク表示しているだけです。

<h1><a href="http://~/">タイトル</a></h1>

CSS

この h1 タグに対し、下記のような CSS を設定すれば背景画像(リストの「画像ファイル名」)が表示されます。リストは画像以外のプロパティを省略しています。

h1 {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

プロパティの説明

CSS で設定する各プロパティの内容は次の通りです。

background-image
画像ファイル名を指定します。画像ファイル名の部分にはURL指定(例:http://domain/images/hogehoge.gif)・ドキュメントルートからの絶対パス(例:/blog/image/hogehoge.gif)・スタイルシートからの相対パス(例:../images/hogehoge.gif)が指定できます。
background-position
画像の表示開始位置を指定します。ここではleft(水平位置が左端)と top(垂直位置が上端)を指定しています。右下端から開始する場合は「right bottom」とします。記述順序は基本的に1番目が水平位置、2番目が垂直位置です。% や px 指定による設定も可能ですので、表示位置を細かく決めたい場合はこちらの方が良いでしょう。ご自身で調べていろいろお試しください。
background-repeat
画像の繰り返しを指定します。バナーのサイズに等しい画像を表示する場合はサンプルのように「no-repeat(繰り返しなし)」とします。バナーからはみ出した部分は表示されません。
バナーより小さい画像で繰り返し表示をするには、水平方向に繰り返す場合は「repeat-x」、垂直方向に繰り返す場合は「repeat-y」、水平・垂直方向に繰り返す場合は「repeat」とします。

プロパティをまとめる

各プロパティを background プロパティで次のようにまとめて記述することも可能です。

h1 {
    background: url("画像ファイル名") no-repeat left top;
}

サブタイトルがある場合

また、タイトルバナーにはタイトルの下にサブタイトルを表示している場合が少なくないと思います。

<div id="banner">
<h1><a href="http://~/">タイトル</a></h1>
<h2>サブタイトル</h2>
</div>

このような場合は h1 タグではなく、タイトルおよびサブタイトルを括っている div タグがあると思いますので、この div タグ(の id 属性)に対してスタイルを設定します。

#banner {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

2.公開テンプレートの設定方法

公開テンプレート変更前デフォルトの状態では左のスクリーンショットのように青色の背景色を設定しています。
参考までに、テンプレートのHTMLは1項の最後で説明したようにタイトルとサブタイトルを div タグで括った構造になっています。

<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>

タイトルバナー部分のCSSは下記のようになっていますので、赤色の背景色設定用の background プロパティを削除します。
そして、そのすぐ下に記述しているコメントアウトマーク(「/*」と「*/」)も削除してください。

/* タイトルバナー */
#banner {
    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;
}

このコメントアウトされていたプロパティを利用して画像表示の設定をします。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

公開テンプレート変更後これで左のように画像が表示されます。

3.Movable Type デフォルトテンプレートの設定方法

デフォルトテンプレート変更前Movable Type のデフォルトテンプレートも左のスクリーンショットのように青色の背景色を設定しています。参考までにデフォルトテンプレートのHTMLは下記のようになっています。
<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>

先程よりやや複雑な構造ですが、スタイルは一番外側の div タグの id 属性(banner)に設定します。スタイルシート(styles-site.css)のタイトルバナーのCSSに対して赤色を削除します。

#banner {
    width: 710px; /* necessary for ie win */
    background: #a3b8cc;
}

そして2項と同様、画像表示の関連プロパティを追加します。

#banner {
    width: 710px; /* necessary for ie win */
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
}

デフォルトテンプレート変更後これで左のように画像が表示されます。

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

上記は固定レイアウトをサンプルに説明しました。リキッドレイアウトの場合はディスプレイの解像度によって横幅がかなり長くなる可能性があるので、横長の画像を用意するか、水平方向の繰り返し表示を指定するようにしましょう。

5.画像が垂直方向に収まらない場合

苦労して作成した画像がタイトルバナーの縦方向に収まらない可能性もあります。このような場合、タイトルバナーの縦幅を広げます。公開テンプレートであれば、

/* タイトルバナー */
#banner {
    padding: 30px 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

と、padding プロパティの上下方向の値を増加させることでタイトルバナー全体の縦幅が広がります。

6.タイトルを任意の位置に表示する

5項の設定ではタイトルは左中央に配置されます。タイトルを左上や右上等に表示する場合は、5項の padding プロパティを修正します。ここでは左上に表示する例で説明します。

まず、5項で修正した padding プロパティ

padding: 30px 15px;

の値は下記の意味になります。

  • 30px:上下のパディング
  • 15px:左右のパディング

なお、これは上下パディングと左右パディングを一括設定する場合の省略形で、

padding: 30px 15px 30px 15px;

と書いても同様の効果があります。指定する順番は、左から時計回りに「上・右・下・左」です。
ちなみにパディングを個別に指定する場合は、

padding-top: 30px;
padding-bottom: 30px;
padding-left: 15px;

とします。なお右のパディングについては

text-align: left;

と、テキストを左寄せにしていることと、テキストの右側は他のプロパティでブログ全体の幅を指定しているため、省略しても問題ありません(テキストを右寄せにする場合は必要になります)。

さて、タイトルを左上寄せに配置するには、左パディング・上パディングを少なくし、下パディングを増やせばよい訳です。

padding: 15px 15px 45px 15px;

下パディングの値が少ないと画像の表示範囲が少なくなりますのでご注意ください。
左右のパディングは一括して設定できるので、

padding: 15px 15px 45px

としても良いです(2番目の値が左右パディング)。

なおテキストを右寄せにする場合は、

text-align: right;

とします。

Comments [57] | Trackbacks [2]
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