freoの管理画面が小さくて使い難いからCSSを編集してみたら、カスタマイズし易い設計になっていることが改めてわかった。

国産CMS「freo」は使いやすく、管理も容易だ。DBはSQLiteファイルひとつですので引越し・移転も簡単。しかし、管理画面が小さくて(横幅が狭い)使い難いのです。

テンプレートのHTMLを編集すれば、幾らでも好みのレイアウトに編集可能ですが、何かしらアップデートする際、不具合が起こるとも限らないので、テンプレートの編集は避けたいところ。

ということで、HTMLとCSSを改めて確認しますと、CSSの編集(それも必要最小限の編集)だけで、下記画像のような、そこそこいいものができましたので公開いたします。

ディスプレイの横幅100%にしましたので、広々としてとっても使いやすくなりました。

freoの管理画面

freoの記事投稿画面

下記のCSSソースをコピーして、「freo/css/admin.css」に上書きすればOKです。

@charset "utf-8";

/********* HTML再定義 ***********************************************/

body{
font-size:14px;
padding:0;
background-color:#f9f9f9;
}
h2, h3, h4, h5, h6{
font-size:120%;
}
h2{
margin:0 -30px;
padding:1em 0 1em 30px;
line-height:normal;
border:0;
background:#3399ff;
color:#fff;
}
h3{
margin:10px 0;
padding:10px 0;
border:0;
border-top:5px #ccc solid;
border-bottom:5px #ccc solid;
}
form h3{
margin-top:30px;
}

/********* 全体 *****************************************************/

div#container{
width:100%;
margin:0;
padding:0;
}

/********* ヘッダー *************************************************/

div#header{
clear:both;
padding:20px;
background:#222;
color:#fff;
}
div#header h1{
font-size:200%;
line-height:1.0;
margin:0;
}
div#header h1 a:link,
div#header h1 a:visited{
color:#fff;
text-decoration:none;
}
div#header h1 a:active,
div#header h1 a:hover{
color:#eee;
text-decoration:none;
}

/********* フッター *************************************************/

div#footer{
clear:both;
padding:20px;
background:#222;
color:#fff;
}
div#footer address{
/*padding-top: 10px;
border-top: 1px solid #999999;*/
}

/********* メニュー *************************************************/

div#menu{
float:left;
width:200px;
background:#666;
color:#fff;
}
div#menu h2{
border:0;
padding-left:50px;
}
div#menu h3{
font-size:110%;
margin:0;
padding-left:20px;
background:#333;
border:0;
}
div#menu a{
display:block;
overflow:hidden;
text-decoration:none;
text-align:right;
line-height:1.0;
margin:-1px 0 0 0;
padding:10px 0;
border-top:1px #999 dotted;
border-bottom:1px #999 dotted;
background:#555;
color:#fff;
}
div#menu a:after{
/*content:"▸";*/
content:"≫";
margin:0 10px;
color:#3399ff;
}
div#menu a:hover{
background:#3399ff;
color:#fff;
}
div#menu a:hover:after{
color:#fff;
}
div#menu ul{
list-style:none;
margin:0;
padding:0;
}
div#menu li{
list-style:none;
margin:0;
padding:0;
}
div#menu ul li ul{
margin-top:0;
margin-bottom:0;
}

/********* 内容 *****************************************************/

div#content{
float:right;
padding:0 30px;
width:calc(100% - 200px);
}

/********* 検索 *****************************************************/

div#search form {
margin-top: 20px;
}
div#search form dl {
margin: 0;
}
div#search form dl dt {
margin: 0;
}
div#search form dl dd {
margin: 0 0 5px 0;
}
div#search form p {
margin: 0;
}

/********* ページ移動 ***********************************************/

div#page h2 {
display: none;
}
div#page ul.order {
margin: 10px 0;
}
div#page ul.order li {
display: inline;
list-style: none;
margin-right: 10px;
}
div#page ul.direct {
margin: 10px 0;
text-align: right;
}
div#page ul.direct li {
display: inline;
list-style: none;
margin-left: 10px;
}

/********* 設定編集 *************************************************/

div#config form h3 {
margin: 10px 0;
padding: 5px;
background-color: #EEEEEE;
}
div#config form dl {
margin-bottom: 20px;
}

/********* 個別指定 *************************************************/
#content ul{
margin:1em 0 1em 1.2em;
}
#content li{
margin:0.5em 0;
}
/*
dl dd.list ul {
margin-top: 0;
margin-bottom: 0;
}
*/
dl dd.list ul{
margin:10px 0 0 0;
}
dl dd.list li{
margin:0;
}

form dl dd.list {
padding: 5px;
border: 1px solid #CCCCCC;
}
form dl dd.list ul {
margin: 0;
}
form dl dd.list ul li ul {
margin-left:1em;
}

table.tablesorter {
width: 100%;
}
table.tablesorter thead tr .header {
background-image: url("../images/tablesorter/bg.gif");
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
background-image: url("../images/tablesorter/asc.gif");
}
table.tablesorter thead tr .headerSortDown {
background-image: url("../images/tablesorter/desc.gif");
}

tbody tr:hover{
background-color:#FFFF99;
}
/********* IE6用設定 ************************************************/

* html body {
text-align: center;
}
* html div#container {
width: 800px;
text-align: left;
}
* html pre {
width: 100%;
}
* html table tr th, * html table tr td {
font-size: 80%;
}

初期状態のadmin.cssと見比べると分かると思いますが、大幅な編集はしておりません。freoは、利用者がカスタマイズし易い設計になっているシステムということが、改めてよくわかりました。

ピックアップ