Movable Typeでカテゴリの選択欄を本文欄の下に表示させたい

MTを使っていてカテゴリ欄を本文欄の下に持ってきたいと思う場合があるかと思います。
カテゴリの数が増えるとそもそも高さが足りないのでそのあたりのカスタマイズをしたり、デフォルトのウィジェットの位置だと幅が狭すぎる場合もあります。

編集する方法は色々ありますが、MTAppjQueryを使って表示させる場所を本文の下に持ってきて、幅・高さをカスタマイズする方法を紹介します。

まず、$.MTAppFieldSort()をつかって場所を並び替えします。
user.jsに下記の様に記述します。

if($('body#edit-entry').length){
  $.MTAppFieldSort({
    sort: 'title,permalink,text,category,tags,excerpt'
  });

  $('#category-selector-list').addClass('wide');
}

あとでCSSの編集もするので、classを追加してあります。

$('#category-selector-list').addClass('wide');

ここまでで表示場所を本文の下に持ってくることが可能です。

続いてuser.cssに下記を追加します。

#category-selector {
  max-width: none !important;
}
#category-selector-list.wide div div div {/* wide クラスは user.js で付与 */
  width: auto !important;
}

これで幅が広がり扱いやすくなります。

高さを広げたい場合は下記のような記述を追加すればいいですね。

.category-selector-list{
  height: 300px !important;
}

Comments

comments powered by Disqus