特殊画面

システムモードには特殊な作りをした画面がいくつかあります。忘れず対応してください。

画像管理(アルバム画面)

メインビュー。

<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テーマ固定」ですので気にする必要はありません。

OK キャンセル 確認 その他