Movable Type の記事投稿画面で複数のフィールドをグループ化し2列にする

Movable Typep の記事投稿画面で、複数のフィールドをグループ化し、そのグループ化した中身のフィールドを2列で表示する方法を紹介します。

完成した見た目は下図のようになります。

このカスタマイズは、MTAppjQuery の user.js と user.css にちょっとしたコードを書けば完成です。

user.js

user.js に書くのは以下のコードです。

(function($){

/* ==================================================
 Inline-block fields into a container
================================================== */
$('#sortable').sortable({
 disabled: true
});
var containerHTML = '<div id="mtapp-column-container"></div>';
var columnList = ['keywords','customfield_text01','customfield_top_webpage','tags'];
$('#text-field').after(containerHTML);
var $container = $('#mtapp-column-container');
for (var i = 0, l = columnList.length; i < l; i++) {
 $('#' + columnList[i] + '-field').removeClass('sort-enabled').appendTo($container);
}
/* Inline-block fields into a container [end] */

})(jQuery);

簡単に解説すると、まずドラッグ&ドロップのソートを無効にします。

$('#sortable').sortable({
 disabled: true
});

コンテナとなる div 要素と、その div 要素の中に入れるフィールドのベースネームを配列で定義します。

var containerHTML = '<div id="mtapp-column-container"></div>';
var columnList = ['keywords','customfield_text01','customfield_top_webpage','tags'];

コンテナ div を DOM に挿入します。ここでは、本文欄の後に入れています。

$('#text-field').after(containerHTML);

DOM に入れた div 要素を取得して変数に入れておきます。

var $container = $('#mtapp-column-container');

div 要素の中に入れるフィールドのベースネームの配列ループで回して、コンテナ div の中に入れていきます。

for (var i = 0, l = columnList.length; i < l; i++) {
 $('#' + columnList[i] + '-field').removeClass('sort-enabled').appendTo($container);
}

user.css

user.css に書くのは以下のコードです。

/* ==================================================
 Inline-block fields into a container
================================================== */
#mtapp-column-container {
 margin-bottom: 15px;
 border: 1px solid #c0c6c9;
 border-radius: 3px;
}
#mtapp-column-container .field {
 display: inline-block !important;
 width: 50%;
 vertical-align: top;
 border: none;
}
#mtapp-column-container .field .field-header{
 height: 1.2em;
 padding: 10px 10px 0;
}
#mtapp-column-container .field .field-content {
 padding: 0 10px 10px;
}
/* Inline-block fields into a container [end] */

CSS の解説は省略しますが、ポイントはコンテナ div の中に入れた .field を inline-block !important にすることと、width を設定することでしょうか。

今は、width: 50% にしているので2列になりますが、25% にすれば4列になります。

以上です。意外と使えそう?

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

MTAppjQuery