システムメニューを常に表示する(その2)

昨日の続きで、Movable Typeの管理画面でシステムメニューを常に表示する方法を紹介します。
今日は、スタイルシートを適用して、見た目を整える手順を解説します。

1.MTAppjQueryプラグインのインストール

管理画面のテンプレートは、alt-tmplディレクトリを使って書き換えることができます。
一方、管理画面のCSSでは、alt-tmplと同じ仕組みは用意されていません。

CSSは「tmpl」→「cms」→「include」ディレクトリのheader.tmplファイルで読み込んでいます。
このファイルをalt-tmplディレクトリにコピーして、独自のCSSを読み込む記述を追加すれば、CSSをカスタマイズすることも可能です。

ただ、「MTAppjQuery」というプラグインを使えば、上で書いたのと同じことが可能です。
MTAppjQueryプラグインは、@tinybeans氏が開発しているもので、管理画面にユーザー独自のJavaScriptやCSSを組み込んで、カスタマイズを行えるようにするプラグインです。

MTAppjQueryプラグインをダウンロードし、Zipファイル内にある「plugins」と「mt-static」のフォルダを、Movable Typeのインストール先にアップロードします。
その後、サーバーの「mt-static」→「plugins」→「_MTAppjQuery」ディレクトリの先頭の「_」を削除します。

2.user.cssファイルに記述を追加

管理画面をカスタマイズするためのCSSは、「mt-static」→「plugins」→「MTAppjQuery」→「css」ディレクトリにある「user.css」ファイルに記述します。
また、CSS内で画像を使う場合は、その画像を「mt-static」→「plugins」→「MTAppjQuery」→「images」ディレクトリにアップロードします。

MT本来の管理画面のCSSを参考にしつつ、カスタマイズ用のCSSを記述します。
Google Chromeの「要素を検証」等の機能を使えば、カスタマイズしたい部分に適用されているCSSを調べることができます。

今回取り上げている例だと、user.cssに以下の記述を追加すれば良いです。

.scope.system {
    background-color: #7b7c7d;
}
.scope.website {
    padding-left: 0;
}
.scope.website:before {
    content: '\00a0';
    float: left;
    width: 20px;
    height: 28px;
    background: transparent url(../images/selector-nav-separator_website.gif) left center no-repeat;
}

また、以下の画像(システムとウェブサイトの区切りの画像)を、「mt-static」→「plugins」→「MTAppjQuery」→「images」フォルダにアップロードします。

3.動作の確認

ここまでの作業が終わると、システムメニューが常に表示され、かつMovable Type本来のデザインと同じような見た目になります。