2006/09/11(月)このみ Rev0.90リリース

adiary::テーマ

桜舞う季節、物語はまわりだす─

ってリリースされた季節は秋ですが（笑）

[album:adiary/theme:konomi090.jpg]
adiary用テーマ「このみ」Rev0.90をリリースしました。
ダウンロードはこちら

特徴/仕様

  • 何かの特設ページみたいなテーマ
  • adiary default skelton system(Satsuki Skelton)専用テーマ
    • システムモード対応
    • テーブルのストライプに対応
    • テーブル拡張仕様(table.crub, table.no-stripe)に対応
    • adiary Ver1.00β9 snapshot060901 で開発
  • SVGA以上の解像度を想定して作成
  • GPLライセンス
  • 表示確認環境
    • Firefox 1.5.0.6
    • lolifox 0.2.1
    • Opera 9.01
    • Internet Explorer 6 SP1
  • Firefoxに最適化してあります
  • 一部、IEで使用できないプロパティを使用しているのでIE非推奨
  • Operaで一部表示が崩れる部分があることを確認しています
  • サイドバーが本文より高い場合の対策
    ユーザースタイルシートで以下のように追加して下さい
    ちなみにデフォルトでは1600pxを指定しています 
    div.hatena-body { min-height: xxxpx; }
/*xxxにはサイドバーの高さを指定して下さい*/

謝辞

同人サークルEasyNoiseのGLANSHE様に素材画像の一部(桜の画像)を提供して頂きました。
この場を借りて深く感謝致します。

最後に

システムモード関連でIEの場合いろいろ微妙なところがある為(使用には問題ありません)、それが修正できるまでの暫定リリースです。

不具合とか感想や(このテーマに関する)要望はこの記事にコメントなりトラックバックなりして下さい。
できる限り対応させて頂きます。

コメント（2件）

2006/09/10(日)[Tips] スイッチやセクションアンカーを画像にしたい場合

adiary::テーマ開発用ドキュメント

色々勘違いしていた部分がありましたので書き直し(06/12/10)。

a.switchやspan.sanchorが対象です。
adiaryβ15においてFirefox, IE6で正しく表示できることを確認、Opera9で一部問題があるがそれなりに意図した表示ができることを確認しています。

CSSソース

div.body h3 span.sanchor {
	font-size:		0;
	padding:		16px 23px 0 0;
	width:			0;
	line-height:		0;
	background-image:	url("petal-large.gif");
	background-position:	bottom right;
	background-repeat:	no-repeat;
}

解説

font-size

スイッチとかセクションアンカーは▼だったり■のような記号で通常表示されますので、まずこの文字を表示しないようにします。
font-size: 0とすることでブラウザで使用可能な最小サイズになります。

注：Operaでは9pxがブラウザで規定されている最小フォントサイズ(デフォルト値)のようで、これ以下にはなりません。

padding

この部分でセクションアンカー部の最小ブロックのサイズを指定するため利用する背景画像よりも大きい値とします。

width/line-height

width/line-heightでセクションアンカー部で文字部分（■）の幅と高さを指定します。

ただし、Operaではブラウザの設定により規定されている文字サイズ分取られてしまいます。(Opera 9.02で確認)

background-image関連

background-imageの値に表示したい画像のパスを与えます。

background-positionではbottom rightとして下さい。rightとする理由はOpera等で消しきれなかった文字が画像にかかるのを防ぐ為です。

background-repeatで、繰り返さないようにno-repeatを与えておきます。

表示例

ここまでで以下のように表示できます。
(わかりやすくする為以下を追加
color: blue;
border: 1px solid blue;)

  • Firefox 1.5.0.8
    [album:adiary/theme:sanchor_fx.jpg:large]
  • IE6SP1
    [album:adiary/theme:sanchor_ie6.jpg:large]
  • Opera9.02
    [album:adiary/theme:sanchor_op9.jpg:large]

Opera9のための修正

Operaでは文字を完全に消すことができない使用の為、文字の背景となる部分の色を指定・マージンの調整が必要となります。

color: #fef; #文字部分の背景と同じに
margin-left: -1em; #マージンの調整
_margin-left: 0; #IEのマージンの調整

ここまでやるとOperaで以下のように表示できます。
(わかりやすくする為にborder: 1px solid blue;を追加)

[album:adiary/theme:sanchor2_op9.jpg:large]

コメント（0件）

2006/09/06(水)[カスタマイズ] 記事上部にメッセージを表示する

adiary

メッセージを入力する

日記帳の説明にて以下のようにspanで適当なクラスを定義して入力します

<span class="cheer">リトルバスターズ 激しく応援ちぅ～</span>

ユーザースタイルシートの編集

記事上部の位置に上記のメッセージを配置します。

div.main { margin-top: 1.2em; }
span.cheer {
	display:	block;
	position:	absolute;
	top:		0px;
	left:		245px;
	width:		480px;
}

やり方としては記事上部に大きいバナーを貼り付けるとほぼ同じですが、ポイントはdisplay: block;とwidth: xxxpx;とすることです。
widthは記事部の幅より小さくすることに注意して下さい。

コメント（0件）

2006/09/06(水)うみテーマとぅどぅ

adiary::テーマ

Rev1.00RC2 -> 1.00に向けて

  • span.sanchor a:hover対応
  • カレンダーの土曜・日曜・祝日のリンクをa:hover対応
  • カレンダーの選択した日をborderで囲う
  • table a:linkを修正
    • a:hover対応
    • th aの色を見やすく
  • tableのborder-bottomを外す

後は、実際に使っていて問題なさそうなのでこれだけ修正したら正式版にしようと思う。
何か要望などがあればここにコメントなりTBなりして下さい。

コメント（0件）