特殊画面
システムモードには特殊な作りをした画面がいくつかあります。忘れず対応してください。
画像管理（アルバム画面）
メインビュー。
<article class="system" id="album"> <h2 class="dynatree-ico-ef"><span id="folder-icon"></span><span id="current-folder">/</span></h2> <div class="body"> <div id="album-header"> <div> 操作方法<span class="help" data-help="">?</span> <input type="checkbox" id="all-select"><label>全選択</label> </div> <div class="view-option"> <span class="option-item">最大サイズ <select id="thumb-maxsize" class="r js-save"></select> </span> <span class="option-item"> <select id="view-type"></select> <span class="option-item">ソート <select id="sort-type"></select> <select id="sort-rev"></select> </span> </div> </div> <div id="album-folder-view"></div> <!-- アイコン等が表示されるフォルダビュー --> <!-- 略。sectionタグで区切ってあります。 --> </div> </article>
メインビュー下部の項目は、secitonタグで区分けされています。適当にマージンを設定するとよいでしょう。
フォルダツリー
<div class="hatena-module system-module side-folder-tree"> <div class="hatena-moduletitle">フォルダ一覧</div> <div class="hatena-modulebody"> <div id="album-folder-tree" class="treebox"></div> <button type="button" id="album-new-folder">フォルダ作成</button> <button type="button" id="album-reload">リロード</button> <button type="button" id="album-clear-trashbox">ゴミ箱を空に</button> </div> <!-- hatena-modulebody --> </div> <!-- hatena-module -->
ツリー本体は #album-folder-tree ですが、タグ一覧画面、コンテンツ一覧画面に使っているツリーと同じ素材になっています。（dynatreeというJavaScriptライブラリです）
これらのツリー全部に同じ設定をするのならば「div.treebox」「ul.dynatree-container」に対して設定してあげてください。
タグ一覧のツリー、コンテンツ一覧のツリー
「div.treebox」の中に「ul.dynatree-container」が展開されています。
ダイアログ
結構あちこちで使われいてます。
- 基本設定で「コードから設定」を押した時の画面。
- アルバムで「ゴミ箱を空に」を押した時のダイアログ表示。
- アルバムで「同じファイル名」が存在してファイルを移動できなかった時のダイアログ。
通常のダイアログは「ui-dialog」クラス、エラーダイアログは「ui-dialog error-dialog」を持っています。
satsuki2の実装
.ui-dialog {
background-color: #eeeeff;
border: 2px solid #6b75b8;
border-radius: 10px;
box-shadow: 8px 8px 4px 4px rgba(60,60,100,0.75);
font-size: 10.5pt;
line-height: 130%;
}
.ui-dialog .ui-widget-header {
background-color: #adb8ff;
font-weight: bold;
font-size: 12pt;
border: none;
border-radius: 10px 10px 0 0;
}
.ui-dialog span.ui-dialog-title {
height: 1em;
padding-bottom: 2px;
}
.ui-dialog button.ui-button {
border-radius: 4px;
}
/* エラーダイアログ */
.ui-dialog.error-dialog {
background-color: #fff8f8;
border: 2px solid #c33;
}
.ui-dialog.error-dialog .ui-widget-header {
background-color: #f69;
}
.ui-dialog.error-dialog button {
border-color: #632;
background-image: linear-gradient(to bottom, #fdd, #faa);
}
- 背景色をつけている。
- ボタンや「×」ボタンに丸みをつけている。
- エラーの時は、ボタンも背景も赤くしている。
何も設定しなくても最低限表示される程度には base.css で設定されています。
インポート、エクスポート画面
accordion
選択項目以外を折りたたむ accordion というものを使用しています。最低限 h3 に背景色だけ付けておいてください。（元から付いている場合は大丈夫です）
article h3.ui-accordion-header {
background-color: #ccc;
}
プログレスバー
モダンブラウザでimport処理を実行したとき、インポートの進行具合を示すプログレスバーが表示されます。
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"> <span class="label">50%</span> <div style="display: block; width: 50%;" class="ui-progressbar-value ui-widget-header ui-corner-left ui-corner-right"></div> </div>
何も設定しなくても最低限見られるように base.css で設定されています。
satsuki2の実装
.ui-progressbar {
margin: 0.5em 0;
max-width: 400px;
border-color: #6b75b8;
background-color: #fff;
}
.ui-progressbar .label {
color: #000;
font-weight: bold;
text-shadow: 1px -1px 2px #fff,
1px -1px 2px #fff,
-1px 1px 2px #fff,
1px 1px 2px #fff; /* 文字を縁取り */
}
.ui-progressbar,
.ui-corner-left {
height: 20px;
}
.ui-corner-left {
background-color: #aac;
}
ブログ一覧画面
タブ表示で2つの画面を切り替えられるようになっています。下記を参考に、背景色と枠線の色を設定してください。
.jqueryui-tabs .body {
border-radius: 8px;
border: 2px solid #6b75b8; /* 枠線 */
background-color: #eeeeff; /* 背景色 */
}
.ui-tabs .ui-tabs-nav li {
border-radius: 8px;
border: 2px solid #6b75b8; /* 枠線 */
background-color: #ccf; /* 非選択背景色 */
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
border-bottom: 2px solid #eeeeff; /* 背景色 */
background-color: #eeeeff; /* 背景色 */
}
.ui-tabs .ui-tabs-nav {
margin-bottom: -2px; /* 線の太さに合わせる */
}
.ui-tabs .ui-tabs-nav li:not(.ui-tabs-active):hover {
background-color: #ddf; /* hover時の背景色 */
}
何も設定しなくても最低限見られるように base.css で設定されています。
テーマ選択画面。デザイン編集画面
これらの画面（フレームの外側）は「satsuki2テーマ固定」ですので気にする必要はありません。