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列になります。

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

  • このエントリーをはてなブックマークに追加
Just a second...