テーマ開発ドキュメント

画像で枠を作る方法

なべ — Thu, 25 Oct 2007 11:04:56 GMT

テーマを作成していると、画像で枠を作りたいと思うことが多々あります。このような時に使用するテクニックを紹介します。

■目標

HTMLのソース（詳細はこちら）。両サイドバー表示の左側です。


	

		サイドバーの中身

表示例。

■部品の分解

まずサイドバーの枠画像を３つの部品に分解します。

side-top.gif	side-middle.png	side-bottom.png

155×28	155×1	155×23

最初の画像だけgifになっているのは、左上部を透過させるためです。透過pngはIE6がまともに扱えません。各モジュールのタイトル部画像は次を使います。

side-title.png
	137×40

■CSSの記述

横幅は 155px ですから、まずそれに合わせて全体の外枠を決めます。

div.side-a {
	width:		155px;
}

このブロックの上下に画像を貼り付けます。HTMLとよく対比してみてください。

div.side-a-top {
	background-image:	url("side-top.gif");
	height:			28px;
	width:			155px;
}
div.side-a-bottom {
	background-image:	url("side-bottom.png");
	height:			23px;
	width:			155px;
}

中間部分はリピートさせ、また内部の要素が画像をはみ出さないように適切な padding を指定します。

div.side-a2 {
	background-image:	url("side-middle.png");
	background-repeat:	repeat-y;
	padding:		1px 9px 1px 9px;  /* 155-9-9 = 137px（内側） */
}

上下の「パディング 1px」を取らないとマージンの相殺が発生しうまく表示されなくなります。

■モジュールの記述

モジュールは次のように記述しました。

div.hatena-module {  /* モジュール間の隙間 */
	margin-bottom:	1em;
}
div.hatena-moduletitle {
	background-image:	url("side-title.png");
	background-repeat:	no-repeat;  /* 文字がはみ出すとIEで領域が大きくなるため */
	color:			#444;
	min-height:		29px; /* = 40-11 */
	_height:		40px; /* IEが min-height 非対応のため */
	padding:		11px 0px 0px 0px;
	font-size:		115%;
	font-weight:		bold;
	text-align:		center;
}
/* sidebar項目本体 */
div.hatena-modulebody {
	color:			#644;
	padding:		0 0.4em 0.2em 0.4em;
	margin-top:		0;
}

テーマを作っているとIEの計り知れないバグの多さ（理解に苦しむレンダリングの挙動）に辟易するかも知れませんが、_ （アンダーバー付き）のプロパティで地道に修正するしかありません。

■コメント（0件）

■トラックバック（0件）

小技集

なべ — Thu, 25 Oct 2007 11:02:01 GMT

■IEでのみ解釈される属性値

どのブラウザでもバクや非対応のプロパティは付き物ですが、IEの非対応プロパティの多さとバグの多さは他の追従を許さず抜きんでています。IEにはアンダースコアハックと言い、IEでのみ有効になるプロパティの指定方法があります。

span.test {
	color: blue;
	_color: red;
}

としたとき、span.test は IEでは赤く、IE以外では青く表示されます。IEではすべてプロパティにおいて「_（アンダースコア）」を付けることでIEにだけ読み込ませることができます。この方法を利用する際は、アンダースコア付きの属性を後に書くことに注意してください。

人によって、本来は記述する必要はないがIEのためだけに記述しなければならないプロパティを書く際に _ を付けたりします。

■divなどの配置を確認する

テーマを開発していると、要素の配置状況かよく分からなくなることが多々あります。また厳密な境界位置が知りたいことも少なくありません。こんなときは

div.sidebar { border: 1px solid red; }

などとすることで、枠線を表示させてどこがブロック（や要素）の境界なのか簡単に知ることができます。むしろCSSをいじって配置を行うときは、border表示をさせたままの方が便利です。

完全に配置が終わり、いざborderを外すとでたらめな位置にレンダリングされることがありますが、これはマージンの相殺によるものです（またborderで使用していた1px分だけ位置がずれるます）。そのときは「border: 1px」→「padding: 1px」に書き換えると良いでしょう。

■コメント（0件）

■トラックバック（0件）

カスケーディング

なべ — Thu, 25 Oct 2007 09:41:30 GMT

CSSには複数のプロパティ指定が重複した場合、どちらが優先するかを決める厳密なルールがあります。カスケーディングというのですが、これについて簡単に説明します。*1

*1 : 必ずしも正確ではない用語を使っていますが、分かりやすさを優先させているためです。ご了承ください。

■カスケーディングの例

CSS
.color { color:red; }
span.color { color: blue; }
HTML
色付き文字

としたとき、クラスcolor には２種類の色が指定されています。どちらの色が優先されて出力されるでしょうか？*2

色付き文字

赤という色指定と青という色指定が２つあって結果的には青が表示されました。これがカスケーディングです。色付き文字という要素に対する指定は２種類ありましたが、要素名が付いているspan.colorの方が優先度が高いのです。

ではCSSを変更するとどうなるでしょう。

.color { color:red; font-weight: bold; }
span.color { color: blue; }

色付き文字

優先度の高いspan.colorで太字を指定してないにも関わらず太字になりました。これは、カスケーディングによる優先度評価が起こるのは競合する（同じ効果の）プロパティを指定したときのみ*3だからです。

*2 : HTMLを構成する都合上、本文のソースでは直接色などを指定しています

*3 : 「効果の」付くのは、例えば「margin」と「margin-left」は異なるプロパティですが重複したものを指定しているため（指定の競合がおこるため）化スケーディングが起こります。

■優先度のルール

IDによる指定
クラスによる指定
親子関係による指定
同時クラス指定
順序

IDの指定

IDによる指定はすべてに優先します。

CSS
#color { color:red; } /* IDによる指定 */
span { color: blue; }
span.green { color:green; }
HTML
色付き文字

色付き文字

クラスによる指定

CSS
span { color: blue; }
span.green { color:green; }
HTML
色付き文字

色付き文字

親子関係による指定

CSS
div.red span { color: red; }
span { color: blue; }
HTML
色付き文字

色付き文字

親子関係を指定した方が優先されます。親子関係の階層数は深ければ深いほど優先されます。すでに設定されている設定値を上書きする際に、よくクラス修飾を深くして記述するなどの方法が取られます。

クラス同時指定

CSS
span.red  { color: red; }
span.blue { color: blue; }
span.red.blue { color: magenta; } /* クラス同時指定 */
HTML
色付き文字

色付き文字

順序

CSS
span.color { color: red; }
span.color { color: blue; }
span.color2 { color: green; }
HTML
色付き文字
色付き文字
色付き文字

色付き文字

色付き文字

色付き文字

同レベルの優先度ならば（CSS中で）後から指定された方が優先されます。

■コメント（0件）

■トラックバック（0件）

absolute位置指定

なべ — Thu, 25 Oct 2007 09:11:54 GMT

デザイン上、ある要素を「この場所に表示したい」と決めうちすることも少なくありません。このときに必要になるのが absolute による位置指定です。

■absoluteの使い方

先に例を示してみましょう。


margin-left: 200px;

position: absolute;
top: 0;
width: 180px;

として表示させると*1

margin-left: 200px;

position: absolute;
top: 0;
width: 180px;

となります。これはサイドバーの表示に使っている手法です。

親要素中の、position: relative;となっているものの（なければ表示領域中の）左上座標基準として、そこからの位置を position: abosluteとした上で top や left プロパティ使って指定します。

aboslute は非常に強力であり、各要素を HTMLの出現順序に関わらず自由な位置に配置することができます。

*1 : 表示部のソースでは背景色などを表示するため class="box2" が追加されています。

■コメント（0件）

■トラックバック（0件）

paddingとmargin相殺

なべ — Thu, 25 Oct 2007 05:50:35 GMT

CSSを理解する上で欠かせない要素がマージンとパディングです。

詳しくはCSS入門講座（SUGAIさん著）の中のマージンとパディングなどを参照して頂くとして、簡単におさらいして注意点を述べておきます。

■padding と margin

各要素は、マージンとパディング、そしてwidthというプロパティを持ちます。これは要素の配置に関連するプロパティです。まずは図をみてください。

マージン（margin）は余白に相当します。他の要素と自分のブロックの隙間（マージン）をどれくらい取るべきかという指定です。

パディングは自分のブロック内の要素を表示するとき、内側に向けてどれだけ位置を詰めるか（どの部分を表示領域とするか）を指定します。

なぜ似たような指定が２つあるのかということですが、これには意味があります。

border（枠線）は margin の内側で padding の外側（２つの境界）に配置される。
padding は指定した値だけ必ず領域が確保されるが、marginは相殺される。

■marginの相殺

上の図で、div(A) の margin-bottom が "20px"、div(B)の margin-top が "10px" のとき、この２つdivブロックの空間は20pxです。10+20=30pxと思った人は間違えです。margin は２つの領域間の「空間の最低値」を指定するものだからです。

margin-bottom: 20px; → 下の要素と最低でも20pxは開けなさい

margin-top: 10px; →上の要素と最低でも10pxは開けなさい

という意味になります。

では次の図とCSSのとき、x, y の長さはそれぞれ何pxになるでしょうか？

div.C { border: 1px solid blue; margin-bottom: 15px; }
div.A { border: none;           margin-top: 10px; }
div.B { border: 1px solid blue; margin-top: 15px; }

x の長さはすぐに分かりますよね。div.C の 15px と div.A の 10px で大きい方になりますから「x=15px」です。ではyはどうなるでしょうか？　正解はy も 15px です。つまり、この場合div.Aの上辺とdiv.Bの上辺は一致してしまいます。

テーマを作成しているときに陥りやすい問題なのですが、子要素div.Cのマージンは親要素にpaddingもborderもないとき親要素のマージンを含めて他の要素と相殺します。別の言い方をすれば、中身のない要素同士は中身のある要素を見つけるまでどこまででもマージンを相殺します。

adiaryのテーマCSSをみていると、よく「padding: 1px;」という表記を見つけるのですが、これは内部の子要素がさらに外側のマージンまで相殺しないようにする工夫（細工）です。代わりに枠線（border）を付けても同じ作用を起こせますが、枠線は表示されてしまうため、（枠線を出したくないところでは）paddingを使って不用意な相殺が発生しないようにしています。

ここでは相殺を上下方向についてのみ説明しましたが、左右についても全く同じことが起こります。

■ブロックのwidthとIEのバグ

ブロック（要素）の横幅を固定したいときはCSSの「width」プロパティを使います。例えば、横幅800px固定のテーマなど、この指定は非常によく使われます。

CSSにおけるwidthは該当ブロックからborderの太さとpaddingを除いた内部の横幅として定義されています。borderとpaddingはwidthに含まれないということを理解しておいてください。

ただしIE（の後方互換モード）ではこの解釈にバグがありborderとpaddingを含んだ幅をwidthとして指定します。

ですから、ある要素をIEとそれ以外のモダンブラウザで正しく表示するためには、paddingとborder、widthの単位系をすべて統一して次のように細工しなければなりません。

div.w800 {
	padding: 1em 10px 1em 20px;  /* 上, 右, 下, 左 */
	border: 1px solid blue; 
	width: 728px; /* 800 - 20 - 10 - 1*2 = 728 */
	_width: 800px; /* IEでのみ有効な属性値 */
}

またIE6においてwidth値が瞬時に決まらないと表示されたり／消えたりするバグがあり、不必要に_widthを人間が計算して予め書いておく作業が必要になることがあります。

■コメント（0件）

■トラックバック（0件）

inline要素とblock要素

なべ — Thu, 25 Oct 2007 05:22:45 GMT

CSSとは、同名のHTML開始タグと終了タグで囲われた部分を要素とみなし、その要素に対するレンダリング（表示方法）を指示するものです。

タイトル作成講座

この例では、

の要素は「タイトルsssss」であり、の要素は「作成講座」です。このような構造が無数に入れ子状になったものがHTML、このHTMLの表示方法を指示するものがCSSとなります。*1

このような要素には大きく分けて２つの種類があります。

*1 : 昔はCSSはなく、直接HTMLを使ってデザインすることが多かったのですが、文章の意味とデザインを分離するという立場からCSSが広く使われるようになると、HTMLから徐々にデザインの要素が排除されていきました。（新しいHTMLの仕様ではデザインに関するタグや属性は非推奨や使用禁止になっています。）

■inline要素とblock要素

インライン要素とは文章の一部を太字に修飾するといった、ある文章中での装飾などに使われる要素です。代表選手はタグになります。

ブロック要素とは

タグで囲まれた段落や記事のかたまり、adiaryで言えば１つの記事、１つのサイドバー要素などはすべてブロック要素です。代表選手は

タグになります。この２つを区別することはCSSでデザインを行う上で大変重要です。

例を示します。次のようなHTMLを書いてみます。*2

タイトルはブロック要素にします
インライン要素は
このように横に連結されます。
しかし
ブロック要素は横に連結せず行を独占します
何もタグがついていない部分もインライン要素です。

外枠線を付けるため、今box1というクラスを指定しました*3。

タイトルはブロック要素にします
インライン要素はこのように横に連結されます。しかし
ブロック要素は横に連結せず行を独占します
何もタグがついていない部分もインライン要素です。

*2 : adiaryの編集画面で単純に入力する場合は、パーサーが働くので改行されてしまいます。

*3 : このクラスは、ユーザースタイルシートで指定したものですので、他の記事にコピーしても枠線はでません。

■CSSによる指定

CSSによって特定のクラスのインライン/ブロックを変更することができます。例えば通常のリスト


リスト１
リスト２
リスト３

を表示すると

リスト１

リスト２

リスト３

となりますが、CSSでliをインライン要素にしてしまうと表示ががらりと変わります。


リスト１
リスト２
リスト３

（CSS）
ul.inline li { display: inline; }

表示例

リスト１

リスト２

リスト３

このようにCSSを使うことで、リストをインラインに変えるなんてこともできてしまいます。

■コメント（0件）

■トラックバック（0件）

テーマ作成講座

なべ — Thu, 25 Oct 2007 04:52:01 GMT

テーマ開発に必要なCSSの知識について解説します。

前提知識としてとほほのスタイルシート入門（基礎知識）を一度読んでおいてください。とほほには記述の古い部分もありますが、だいたいの基礎は書かれています。

特殊なクラス

なべ — Tue, 23 Oct 2007 17:51:05 GMT

より凝った（複雑な？）テーマ作成を支援する、条件によって変わる特殊なクラス出力を解説します。

■wiki関連クラス出力

body.wikiクラス: wikiコンテンツを単一記事表示しているときに出力されます。
div.wikiクラス: 該当記事がwikiコンテンツのとき出力されます（詳細）。

■システム関連クラス出力

この項目の div.* は div.adiary-body と同時クラス指定として出力されます。

body.system: システムモードのとき出力されます。
div.daybook-owner: 日記帳（ブログ）の所有者／管理者のとき出力されます。
div.daybook-editor: 日記帳の記事編集権限があるとき（管理者含む）出力されます。
div.contents-bar-exists: コンテンツバーが存在するとき出力されます。この条件でマージン（パディング）値が指定されているので、CSSでコンテンツバーを扱う際は解除してください。

例として、ログイン時（編集権限があるとき）およびシステムモード以外では、右上のログインなどを隠すCSSを示します。

div.adminmenu { display: none; }
body.system div.adminmenu, 
div.daybook-editor div.adminmenu {
	display: none;
}

これで一般利用者にはログイン等が見えなくなります。ただ、ログインへのリンクも無くなりますので、ログインのページをブックマークしておくなどの対策が必要です。*1

*1 : もっとも URL に ?login を付加するだけですが

コンテンツバー

なべ — Tue, 23 Oct 2007 17:46:51 GMT

コンテンツ一覧をサイドバーではなくプルダウンメニューしとて表示するため機能があります。これをコンテンツバーと言います。

かなり高度であるため触らない方が無難です。テーマとしての対応は任意です（必須ではない）。

■コンテンツバーの詳細

div.page-titleのあとに出力されます。日記帳の詳細設定で「コンテンツバー」の表示をオンにしてコンテンツを作成すると表示されます。HTMLとしては単なるulです。




	あいうえお
	テスト投稿
	Hello World!
	
		C#
		C言語
		
			C
			C++
			C++/CLI
		
		Java

やってみると分かりますが、一見CSSとは思えない動作をします。

IEのためだけにJavaScriptを使っていますが、それでもIEでは３階層目以降は表示されません。

base.css に記述されていますが、よほどCSSに自信がない限り全体の幅と背景色（リンク色）と各タブの幅以外はいじらない（オーバーライドしない）方が無難です。どうしてもいじりたい人のための参考URLを書いておきますが、触らない方が無難です。あまりに複雑怪奇なため、テーマとしての対応は任意です。

カスタマイズ時はこちらも参照ください。

CSS プルダウンメニュー（SEO-Equation）
99%CSSで作るプルダウンメニュー１２３（WEB工房きくちゃん）

コンテンツ/カレンダー

なべ — Tue, 23 Oct 2007 17:02:53 GMT

■コンテンツ一覧

adiaryにはコンテンツ一覧を自動的に生成しサイドバー（等）に階層表示する機能があります。階層は任意で３階層まで指定できます。


コンテンツ


	adiaryについて
	メイン部
	
		記事タイトル
		記事ヘッダ

コンテンツはul階層の入れ子になっています。注意点は、他のモジュールはid指定で出力されるのに対し、コンテンツ一覧はクラス出力のみであることです。

これは理由があり、例えばこのテーマドキュメントのように「コンテンツがメインのサイト」としてadiaryを利用する場合、「日記帳の詳細設定」→「wiki設定」→「最上位コンテンツを項目化」をチェックすることで複数のモジュールをコンテンツのリストとして出力できるからです。この場合次のようになります。


はじめに


	テンプレートとテーマ




satsukiテンプレート


	ヘッダ部
	メイン部
	
		記事タイトル
		記事ヘッダ
	




テーマ作成Tips

コンテンツに関するモジュールが複数出力されていることが分かります。コンテンツメニューの書式は普通のサイドバーモジュールと変えた方が扱いやすいです。

■カレンダー

単純なようで、複雑なクラス構造をしているのがカレンダーです。

クラス	意味
calendar-month	月ごとのリンク表示欄のクラス。Ver1.44以降～
w0～w6	曜日の日曜日～土曜日に対応します。
calendar-*day	曜日名のみ出力されます。
holiday	祝日に出力されます。w0も出ていますがholidayでオーバーライドできます。
day-today	その日（当日）に出力されます。
day-selected	その日付の記事を単一記事表示してるとき出力されます。

カレンダーをあまり装飾しようと思わなければシンプルなのですが、同時クラス指定を駆使して多用な条件に対応しようと思い始めると非常に面倒くさくなります。*1

選択している日が当日の場合（"day-today day-selected"）
祝日を選択している場合（"holiday day-today"）
日曜や土曜日が当日の場合（"w6 day-today"）
祝日を選択していて、しかも当日の場合（"holiday day-today day-selected"）

*1 : ちなみに、かえで氏作のテーマ（初期除く）が凝って指定されています。

サイドバー

なべ — Tue, 23 Oct 2007 11:37:32 GMT

サイドバーにはサイドバーモジュールと呼ばれる単位（divブロック）でデータが出力されます。モジュールは「最近の記事」や「最近のコメント」が１つのモジュールとなっています。

■全体構造


　
　　　

　　　　　サイドバー前半
  　  

  
　
　　　

　　　　　サイドバー後半

サイドバー装飾のため複数のブロックが置かれていますが、基本的には両サイドバーへの対応を見越した次ような構成です。


  
    サイドバー前半
  
  
    サイドバー後半

■モジュール

モジュールはサイドバーのブロックの別名です。モジュールは次の構造をしています。


タイトル

（内容）

ul.hatena-section

モジュール内で使用するリスト要素は、（はてなダイアリーからの）慣例として ul.hatena-section の中にli要素として出力されます。

ulは出力されないこともあるので、ulの存在を前提とした位置調整（マージンやパディング）は推奨できません。必ず、div.hatena-module にて内部の出力域を正しく設定するための padding を設定してください。

■infomationモジュール


Infomation

日記帳の説明やRSSなどへのリンクが出力されるクラスです。タイトル部は標準で非表示に設定されています。*1

RSS以外のLIRS, hina-diのリンクを消したい場合は次のようにします。

a.side-lirs, a.side-hina { display:none; }

*1 : はてなテーマで表示が崩れるのでタイトルを出力しているだけです

■最近の記事


最近の記事


	adiary 1.43リリース情報
		：

記事が１件もなかったり、非表示に設定されているときは出力されません。

■最近のコメント


最近のコメント


	記事タイトル
	    名前

コメントが１件もなかったり、非表示に設定されているときは出力されません。

■最近のトラックバック


最近のトラックバック


	トラックバックを受信した記事タイトル
	    from
	    送信元ブログ名 送信元執筆者

トラックバックが１件もなかったり、非表示に設定されているときは出力されません。

送信元執筆者は存在しないときは出力されません。

■カテゴリ一覧


カテゴリ一覧


	adiary
	    ▼ (139)
	
		アナウンス (6)

カテゴリが１種類しか存在しないとき、非表示に設定されているときは出力されません。

サブカテゴリがあり閉じられる機構が付いているため若干複雑になっています。上位カテゴリには ul.main-category、サブカテゴリには ul.sub-category がクラス出力されます。

■過去の月別一覧


過去ログ


	2007年10月 (2)
	2007年09月 (2)

標準では出力されず、設定により出力できます。記事が１件も存在しない月は出力されません。

■検索


検索





タイトル
全文

これはulではなくフォームで出力されます。

■管理メニュー


管理メニュー


ログイン

デフォルトでは非表示になっていますが、通常右上に表示されるログインや管理、日記を書くなどのリンクをサイドバーに配置したいときに使用します。具体的には右上の表示をオフにし、サイドバーの表示をオンにします。

（cssサンプル）
div.adminmenu { display: none; }
div#side-login { display: block; }

■システム情報


System info

Apache : worker

Runtime : mod_perl2

RDBMS : PostgreSQL

システム情報は標準では常に出力されます。消去したい場合はCSSで次のようにします。

div#side-system-info { display: none; }

トラックバック欄

なべ — Tue, 23 Oct 2007 10:35:51 GMT


	～トラックバック欄ヘッダ～
	
		～トラックバックURL～
		～トラックバック表示欄～

div.tb はトラックバックがあるか、トラックバックを受信可能であるときに出力されます。
div.refererlist は、はてな互換のためのクラス出力です。使用しないでください。

■トラックバック欄ヘッダ


	▼
	トラックバック
	（10件）

コメント欄ヘッダとほとんど同じです。閉じるスイッチはこちらを参照。

■トラックバックURL

TB-URL 
 http://xxxxx.yyy.zz/085/tb/E1d

実際にはSPAM対策のため出力の一部にJavaScriptを使用していますが、HTMLとしてみれば上のとおりです。

■トラックバック表示欄

トラックバック１つは次の形式をしています。


	▼ 
	adiary 1.40 の新機能について 
	adiary開発日誌
	なまえ
	～トラックバックの概要～

最初のスイッチにより、トラックバックの概要は表示をオン／オフされます。（display: block/none）
トラックバックの仕様により、ブログ名、トラックバックの概要は存在しないことがあります。その場合span/div要素ごと出力されません。*1
トラックバック元記事を書いた人（span.author）はadiaryの拡張仕様であり、現在のところadiary以外から送信されたトラックバックでは存在しません。（span.author ごと出力されません）

*1 : タイトルが空の場合は"(no title)"として出力されます。