デザイン情報ファイル

テーマのデザインに関する情報を納めるためのファイルです。テーマと同じディレクトリの desgin.info というファイルに納められています。

いずれは、詳細デザイン機能と連動することを視野に入れていますが、今のところベースカラーを自動設定するためだけに使われています。

ベースカラーの自動設定

はてなブックーマークアイコンの色や、mp3プレイヤーの基準色は「日記帳の詳細設定 → アイコンカラー選択」にあります。テーマ変更時、テーマにあったアイコン色に自動で設定するためには次の２行を記述します。

base_color=lb
base_color_rgb=5587E7

１行目が色の略称で、２行目がRGB値です。これらは選べる色が決まってます。

base_color base_color_rgb 表示色
de1841CD■青
dg6B6D7B■グレー
gr4296A5■緑
pr6B3CA5■紫
br9C5D31■茶
rdCE2418■赤
spB58135■セピア
pkE98383■ピンク
te8DA475■抹茶
lgB9B8B4■ライトグレー
wh999999■白
blB3B3B3■黒
li43BA83■ライム
orFC7819■オレンジ
lb5587E7■ライトブルー

各adiary配布物の theme/satsuki/color_sample.html に簡単なスクリプトがあるので使用してみてください。

テーマの共通ルール

ここでは、自分だけの新たなテーマを開発したいときの、各テンプレート共通のルールを説明します。

テンプレートの構成

テンプレートやテーマは標準ではtheme/ ディレクトリ以下に納められています。

theme/
  +_phone/
  +_print/
  +_static/
  +hatena/
  +satsuki/
  +satsuki-mobile/

これらのディレクトリ１つが、それぞれテンプレートを示します。この下に、各テンプレート別にテーマが収録されています。各テンプレートは必ず自分と同名のテーマを持つ必要があります。

テンプレートの中身は次のようになっています。

theme/
  +satsuki/
     +_skelton/
     +aqua/
     +aqua-multiside/
     +arisa/
         :
         :
     +umi/
     +base.css
     +README.txt

_skelton にはテンプレート本体を置きます。これらは diary.skel/ の中身を上書き（オーバーライド）するものです*1。詳しくは別のところで述べます（現時点では未筆）。

それ以外のディレクトリ１つ１つがテーマになります。オリジナルテーマを作る際は、このディレクトリに好きなディレクトリをつくってファイルを置きます。

base.css はSatsukiテンプレート共通のCSSです。テーマ以外のテンプレート固有のファイルはこのディレクトリ内に単なるファイルとして置かれます。

*1 : テンプレートによってなかったりします。satsukiテンプレートには本来はありませんが説明のためめ書いています

テーマファイルの構成

テーマファイルは、CSSと付属画像によって構成されます。例えば、aquaテーマの中身を覗いてみましょう。

aqua/
  -aqua.css
  -design.info
  -README
  -system_mode_yes
  -pom.gif
  -tablebottom.gif
  -tabletop.gif
  -title.gif

::

aqua.css
テーマファイル本体です。CSSファイル名は「ディレクトリ名.css」にします。
*.gif
テーマで使用する画像ファイルです。画像の形式はブラウザで表示できればpngでも何でも構いません。テーマと同じディレクトリに納め、テーマファイルからは相対パスで参照してください。
README
テーマのマニュアル（付属ドキュメント）です。テーマ名、どのテンプレートに対するテーマか、作者、ライセンスなどの情報を納めてください。このファイルは必須です。*2
system_mode_yes
日記の執筆画面や管理画面にもテーマを適用する場合にのみこのファイルを置いてください。*3
design.info
詳細デザイン機能のための情報です。現在はブックマークアイコンの色のみが定義されています（デザイン情報を参照）。なくても構いません。

*2 : 適当なテーマからコピーして書き換えてください。

*3 : 必ずしもシステムモード対応にする必要はありません。

satsukiテンプレート

デフォルトのテンプレートである、satsukiテンプレートのHTML構造とルールについて解説します。

  • はてなテーマも利用可能なように作成してあるため、クラス構造がやや煩雑になっています。
  • IEでのデザイン自由度を増やすため、通常は無用な空<div>がいくつも配置されています（汗）*1
  <div class="side-a">
    <div class="side-a-top"></div>
    <div class="side-a2">
  　 　（サイドバー前半）
    </div>
    <div class="side-a-bottom"></div>
  </div> <!-- End of side-a2/side-a -->

  <div class="side-b">
    <div class="side-b-top"></div>
    <div class="side-b2">
  　 　（サイドバー後半）
    </div>
    <div class="side-b-bottom"></div>
  </div> <!-- End of side-b2/side-b -->

*1 : IE以外ではbefore, after擬似要素で対応可能。

テンプレートとテーマ

テーマとは？

adiaryにおけるテーマとは、はてなダイアリーやtDiaryのテーマと同様に、見た目を記述するCSS（スタイルシート）一式のことを示します。adiaryでは、HTMLとCSSを明確に区別して考えています。

  • HTML → 文章構造を定義するもの
  • CSS → 見た目を定義するもの

「テーマを切り替えること＝見た目を切り替えること」*1という考えのもと、HTML構造を変更することなく見た目をカスタマイズできるようにしています。

*1 : しかしながら、IEを初めとした様々な互換性の問題などからHTML部分でもある程度デザインを意識した記述になっています。

テンプレートとは？

CSSは大変強力な方法で、XML と組み合わせれば意味構造とデザインを完全に分離した状態で自由にデザインを行うことができます。ですが、切っても切り捨てられない互換性という問題があり、adiaryではHTML自体にある程度の構造を持たせています。つまり、使用するHTMLによってデザインの自由度が制限されるということを意味します。

打開策として「テンプレート」という仕組みが adiary には実装されています。テンプレートとはHTML構造を示します。テンプレートは複数のテーマを持つことができます。複数のテンプレートを切り替えることで、HTML構造自体も切り替えることが可能になっています。この画面や、デフォルトでみなさんが使用しているテンプレートは「satsukiテンプレート」と呼ばれるものです。

テーマ選択画面で例えば「satsuki/arisa」と表示されていれば、それは「satsukiテンプレート」＋「arisaテーマ」を表示に使用するということになります。また、adiaryは携帯電話からも利用出来ますが、このときは自動的に「携帯電話用テンプレート」に切り替えるように作られています。*2

*2 : theme/_phone/ に置かれています。"_" で始まるため、テーマ選択画面では表示されませんが、電話からのアクセス時は自動的に切り替わるようになっています。この設定はadiary.conf.cgiに書かれています。

はじめに

adiary向けテーマ開発者のための解説ページです。

Ver3向けはこちらです。

テーマを理解してオリジナルテーマを作成するためにはCSSの知識が不可欠です。テーマについて深く知ろうとお考えならば、同時にCSSについても調べてください。

≪マニュアルに戻る