オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンター(pleasanter)のブログです

オープンソースWebDB「プリザンター」のブログです。 機能の紹介や実例を交え、わかりやすく解説していきます。

サイトメニューへのスクリプトとスタイルの設定ができるようになりました!

こんにちは。
リーデックス小川です。

今回は、サイトメニューへのスクリプトとスタイルの追加と、一覧と編集画面の説明が書けるようになりました。特にサイトメニューへのスクリプトとスタイルの追加は念願だった機能でもあるので、かなりテンションが上がりました(笑)。

 サイトメニューへのスクリプトとスタイルの追加

それでは、さっそく使ってみましょう。任意のフォルダに移動します。ちなみに、この機能はトップメニューでは利用できないようです。

f:id:h-ogawa-reedex-co-jp:20190402092257p:plain

 

この画面で、画面右上のメニュー「管理」→「フォルダの管理」をクリックします。すると、以前のバージョンではなかった「スクリプト」と「スタイル」のタブが増えていることがわかります。

f:id:h-ogawa-reedex-co-jp:20190402092746p:plain

 

使い方は、以前ご紹介した「新機能のスタイル・スクリプトなどを試してみる」に記載がありますので、詳細は下記をご覧ください。 

pleasanter.hatenablog.jp

 

少しだけカスタマイズ

では、少しだけカスタマイズしてみたいと思います。まずは、スクリプト追加をしてみます。下記のようにスクリプトを追加してみてください。

f:id:h-ogawa-reedex-co-jp:20190402201322p:plain

$("#SiteMenu").after('<div>これがコメントになります。</div>');

タイトルは任意、スクリプトに上記を記載、変更ボタンをクリックしてください。


2019/4/4追記:

上記プログラムは、一覧が表示されたときに呼び出されるイベント「$p.events.on_grid_load」で実行するようにしてください。具体的には下記となります。

$p.events.on_grid_load = function(args) {
    $("#SiteMenu").after('<div>これがコメントになります。</div>');
}

 

次に、スタイルを追加してみます。

f:id:h-ogawa-reedex-co-jp:20190402201617p:plain

#SiteMenu .nav-site{
border:0;
background-color:silver;
}

こちらもタイトルは任意、スタイルに上記を記載、変更ボタンをクリックしてください。すべて記述した後に元の画面で更新ボタンをクリックしてください。

 

それでは元のフォルダを見てみましょう。

f:id:h-ogawa-reedex-co-jp:20190402202004p:plain

設定したとおりに、各サイトへのリンクの背景色とコメントが追加されました。

 

まとめ

今回は、サイトメニューにスクリプト、スタイルを組み込んでみました。トップ以外はJavaScriptCSSでカスタマイズできることになります。個別にAPIなどと組み合わせて画面を変更できるようになりますので応用範囲が広がりますね!

それでは今回はこの辺で。
最後までご覧頂きありがとうございました。

 

■参考URL

https://imageinformationsystem.hatenablog.com/entry/2019/04/01/160000