a-blog cmsの「投稿画面用CSS」の改良版を配布します

WebbingStudio＠メインサイト改修中です。

a-blog cmsの最大の魅力は、投稿画面を公開ページに併せて変更できることです。
その投稿画面のカスタマイズをやりやすくした、改良版CSSを配布します。
「これまでデフォルトのまま使っていた」「投稿画面が既存サイトのCSSと相性が悪かった…」という方はぜひぜひ。

※バージョン1.4時点のacms.cssをベースにしています。今後のバージョンアップで、追加スタイルが必要になるかもしれません。
※Internet Explorer 6での表示確認はしていません。

acms.cssについて

a-blog cmsは、作成したテーマのhead要素内に「acms.css」へのリンクを貼ると、自動的に「system」テーマから投稿画面用のCSSを読み込んでくれます。

<link rel="stylesheet" type="text/css" href="/css/acms.css" media="all" />

だいたいの場合はこれで問題なく利用できますが、以下のような状況ではacms.cssを調整する必要があり、かなり工数が増えてしまいます。

• サイトがパステル系などでカラーリング変更が必要なとき（デフォルトはグレーです）
• dl要素、table要素にボーダーや背景色を指定しているとき

acms.cssの改良版

こちらから、改良版CSSをダウンロードしてください。

• acms_css_ex_14.zip

解凍して出てきた「acms.css」を、作成中のテーマの「css」ディレクトリに入れると、「system」テーマのCSSではなく、こちらを参照するようになります。

改良版は、主に以下のような変更を加えています。

1. 「背景色」「ボーダー」などの外観に関するCSSを、ファイル先頭へ移動
2. dl・table要素にCSSを定義していた場合の衝突を回避
3. 投稿画面のline-heightを「1.3」にリセット
4. 各パーツの左右marginを、外枠のpaddingに統一
5. カテゴリー名が長いときにカテゴリー作成ポップアップが崩れる現象を回避

「acms.css」にはinput要素関連のスタイルは含まれていないので、ご自分のサイトデザインに併せて、別途CSSを定義してください。
WebbingStudioでは、フラット・モノクロなサイトデザインに併せて、以下のようなCSSを書いています。

/* Form
--------------------------------------------- */

input[type=text],
input[type=keyword],
input[type=button],
input[type=submit],
textarea {
	padding: 3px;
}

input[type=text],
input[type=keyword],
textarea {
	background: #FFFFFF;
	border: 1px solid #777777;
	color: #777777;
}

textarea {
	line-height: 1.307; /* 13 -> 17px */
}

input[type=text]:focus,
input[type=keyword]:focus,
select:focus,
textarea:focus {
	background-color: #EEFAFF;
	border-color: #4D4D4D;
	color: #333333;
}

input[type=button],
input[type=submit] {
	padding: 2px 5px;
	background: #1A1C1C;
	border: 0 none;
	color: #EEEEEE;
	text-align: center;
	cursor: pointer;
	line-height: 1.1;
}
input[type=button]:hover,
input[type=submit]:hover {
	background: #4D4D4D;
	color: #FFFFFF;
}

input[type=text],
input[type=keyword],
input[type=button],
input[type=submit],
select,
textarea {
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
}

CSS3追加でもっと親切な管理画面に

改良版のacms.cssを使うと、全体のカラーリングを変更しやすくなります。
単純なカラーリングだけでなく、フォームのHTMLを編集したり、CSS3の「box-shadow」や「gradient」プロパティを併用することで、もっとわかりやすい・見やすい投稿画面にすることもできます。

下の画像は、a-blog cmsの基本テーマ「company3」をCSS3でちょろっとカスタマイズしてみた例です。ボタンがちょっと派手すぎた…

更新のモチベーションがあがる、気くばり投稿画面を作りましょう＾＾