Movable Type の管理画面で Font Awesome を使おう
目次
Movable Type の管理画面をカスタマイズするとき、アイコンを使いたくなることってありませんか？
そういうときは MT 本体で使っているアイコンを使うというのがデザインの統一性を考えるとベストかも知れません。でも mt-static/images ディレクトリから探すは結構手間がかかります。また、フリーのアイコンを持ってきて使うという方法もありますが、それも少々面倒です。
そこで、今回は手軽に多数のアイコンを使える「Font Awesome」を MT の管理画面で使ってみようと思います。
Font Awesome を使う方法はいくつかありますが、今回は CDN を使うという最も手軽な方法にします。もちろん、MTAppjQuery がインストールされていることが前提となります。
さて、MTAppjQuery は、プラグインの設定に「自由テキストエリア」というのがあり、管理画面のソースコードの複数の箇所にそのテキストエリアに入れた値を埋め込むことができます。これを利用すれば、CDN を利用しているものなども簡単に管理画面に取り込むことができます。
Font Awesome の CDN を利用する場合は、以下のコードを head 要素内に挿入します。
MTAppjQuery の設定で head 要素内に挿入できるのは3箇所ありますが、今回は上記コードを「変数 js_include に追加（の直前）」に入れようと思います。これでプラグインの設定を保存すれば準備完了です。
あとは Font Awesome のルールに従って、 のようなコードを HTML に挿入すればOKです。
今回は、サンプルとしてウェブサイト名のところにアイコンを挿入してみます。
例えば、「書籍」というウェブサイトがあったとしたら、
というアイコンがいい感じになります。そこで、user.js に下記のコードを書いて書籍アイコンを挿入してみます。
if (mtappVars.blog_id == 1) {
$('#current-website a').prepend('');
}
このカスタマイズの例だとウェブサイトを特定する必要があるので、 mtappVars.blog_id で条件分岐して特定しています。
これでウェブサイト名が下図のようになりました。これだけでも少し印象違いますね。
bit part の MT では、下図のように MT の管理画面から Slack に投稿できたり、投稿した内容を見られるようにしたりしているのですが、ここでも Font Awesome のアイコンを使っています。なんというか、ちょっと新しいモノを使いたくてしょうがない子どものような感じですね（笑
Font Awesome だと MT の管理画面のデザインに割としっくり来るので、機会があれば試してみてはいかがでしょうか。
以上です。
