Movable Type でカテゴリが大量にあるとき、選択するのが面倒だったりしませんか？例えば都道府県すべてがカテゴリになっている場合などが考えられますね。
今回はそういったときでもカテゴリを選択しやすくするためのカスタマイズを紹介します。
今日の動画はこちら。
※音声ありです。
スクロールをなくしてしまおう
最初に考えられる解決策は、カテゴリ選択欄の高さを伸ばして、あの小さい四角の中でスクロールしなくてもいいようにしてしまう方法です。
それを実現したい場合は、user.css に以下の3行を追加すればOKです。
#category-selector-list {
height: auto !important;
}
これでカテゴリセレクタの高さが伸びてスクロールがなくなります。
検索付きポップアップ・カテゴリセレクタを実装しよう
次のカスタマイズは、カテゴリ選択欄をポップアップウィンドウのように表示させ、インクリメンタルサーチも付けてしまおうというカスタマイズです。
まず、user.css に以下のコードをコピペします。
/* ==================================================
Pop over Category Selector v0.0.2 - 2014/08/21
================================================== */
#mtapp-popup-category {
margin-left: 5px;
text-decoration: none;
}
#category-selector-list.popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
width: 400px;
height: 80%;
margin: auto;
padding: 10px;
box-shadow: rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
-webkit-box-shadow: rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
-moz-box-shadow: rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
border-radius: 5px;
}
#category-selector-list-filter {
display: none;
width: 10em;
}
#category-selector-list.popup #category-selector-list-filter {
display: inline;
}
#mtapp-popup-category-close {
display: none;
position: absolute;
top: 5px;
right: 2px;
}
#category-selector-list.popup #mtapp-popup-category-close {
display: block;
}
#category-selector-list.popup .not-match {
display: none;
}
/* Pop over Category Selector [end] */
これらのコードで、ポップアップじのスタイルを定義しています。
次に、user.js に以下のコードをコピペします。
/* ==================================================
Pop over Category Selector v0.0.2 - 2014/08/21
================================================== */
(function($){
var popupBtn = '<a href="#" id="mtapp-popup-category" class="button">Popup</a>';
var closeBtn = '<a id="mtapp-popup-category-close" class="button" href="#">CLOSE</a>';
var filter = true;
var filterInput = '<input type="text" id="category-selector-list-filter">';
/* Insert Popup Category Selecter */
$('#entry-category-widget .widget-label h2').append(popupBtn);
var $categorySelector = $('#category-selector-list').append(closeBtn);
$('#mtapp-popup-category').on('click', function(){
$categorySelector.toggleClass('popup');
return false;
});
$('#mtapp-popup-category-close').on('click', function(){
$categorySelector.removeClass('popup');
return false;
});
/* Incremental filter */
if (filter) {
$categorySelector.prepend(filterInput);
$('#category-selector-list-filter')
.on('keyup', function(){
var reg = new RegExp(this.value, 'gi');
console.log(reg);
$(this).nextAll('div').each(function(){
var catName = $(this).children().children('div').text();
if (reg.test(catName)) {
$(this).removeClass('not-match');
}
else {
$(this).addClass('not-match');
}
});
});
}
})(jQuery);
/* Pop over Category Selector [end] */
これらのコードで、ポップアップを起動したり、インクリメンタルサーチを実装したりしています。
以上です。カテゴリが多い方はお試しください！
