MTAppjQueryをインストールしてカテゴリーを選択しやすくする

このエントリーをはてなブックマークに追加

MTAppjQueryをインストールします。MTAppjQueryは一言で言うとMovable Typeの管理画面をカスタマイズするためのプラグインです。

まずはGitHubからダウンロード。ダウンロードはこちら->mt-plugin-MTAppjQuery

[2014,08,28:追記]
下記の2エントリーに分離しました。

[2014,08,28:追記ここまで]

ダウンロードしたmt-plugin-MTAppjQuery-master.zipを解凍して出来る2つのフォルダをそれぞれアップロードします。

[2014,08,28:追記]
アップロードする際に「mt-static > plugins > _MTAppjQuery」の「_MTAppjQuery」のアンダースコアは削除して「MTAppjQuery」としてアップロードしてくださいとのことでした。
[2014,08,28:追記ここまで]

20140827180526_blogpix.png

20140827180547_blogpix.png

インストールはこれで完了です。

[2014,08,28:追記]
MTAppjQueryに必要なuser.cssのインデックス・テンプレートの作成手順を下記で書きましたが、MTAppjQueryをインストールした時点でサイドバーウィジェットからuser.cssとuser.jsを簡単にテンプレートに追加することが出来るようになります。

左サイドバーから「デザイン > テンプレート」と進みます。そうすると右サイドバーに「MTAppjQueryアクション」という項目が表示されます。

20140828131003_blogpix.png

「user.jsとuser.cssをインストール」をクリックするとインデックステンプレートに「user.css」と「user.js」が作られます。

20140828131052_blogpix.png

あとは必要に応じて「user.css」と「user.js」を編集して行きます。

また、この方法で「user.css」と「user.js」を作成した場合、MTAppjQueryのプラグイン設定画面でのURLの変更は必要ありません。
[2014,08,28:追記ここまで]

上記方法で「user.css」と「user.js」を作成した場合、下記のインデックス・テンプレート作成は必要ありません。また、「user.cssの設定」も必要ありません。

続いて、インデックス・テンプレートにuser.cssと言うファイルを作ります。

20140827201156_blogpix.png

user.cssを一旦再構築してサーバー上にファイルを生成し、生成されたファイルのURLを取得します。

そして、左メニューの「ツール > プラグイン」からMTAppjQueryの設定画面を開いて「user.cssの設定」の横にある「URLを変更する」をクリックして現れるフォームにuser.cssのURLを入力して「変更を保存」で設定を完了します。とりあえず、他の部分はデフォルトのままです。

20140827200433_blogpix.png

ここから実際にMTAppjQueryを使って行く手順です。

準備が完了したので、とりあえず、カテゴリー一覧の高さを高くして、カテゴリーを選びやすくします。

下の画像はuser.cssを適用前のカテゴリー一覧です。

20140827195033_blogpix.png

user.cssには普通にCSSを書いて行きます。まずは手始めに下記のURLからサンプルを拝借して、高さが自動的に広がるようにします。

MTAppjQuery で大量のカテゴリがあっても選択しやすくしてみよう!Popup Category Selecter がいい感じ!

「スクロールはなくしてしまおう」というところの3行のサンプルをコピー、user.cssにペーストして再構築します。

20140828135155_blogpix.png
[2014,08,28:画像差し替え済み]

user.cssが適用後は下の画像のようにカテゴリー一覧はスクロールせずにすべてのカテゴリーが表示されます。(画像をすべてを表示すると長いので途中で切ってます。)

20140827195247_blogpix.png

user.cssで指定する高さを300ピクセルにしたい場合は下記のように書き換えます。

20140828135429_blogpix.png
[2014,08,28:画像差し替え済み]

下の画像が高さを300ピクセルにしたカテゴリー一覧です。

20140827195751_blogpix.png

このように簡単に高さの設定が出来ます。このほかにも、管理画面の各要素のIDが分かればCSSを調整することで画面のカスタマイズが出来るようになります。