Title: HTML の body タグに特別なクラスを追加 プラグイン

Proteus スキンのページ HTML の <body> タグに特別なクラスを追加できます。これにより、リクエストを行ったユーザーが特定のグループに所属しているかどうかや、特定のスペースにいるかどうかを判定できます。

目次


インストール



下のリンクをクリックしてプラグインの .zip ファイルをダウンロードします。



サーバーセットアップ > プラグインのページの「新規プラグインのインストール」で .zip ファイルを選択してアップロードします。

アップロードが完了すると、「インストール済みプラグイン」の一覧に「I18N ERROR」が表示されますが、これはプラグイン中の日本語ファイルがまだ動作に反映されていないために表示されるエラーです。

サーバーセットアップ > 一般 > サーバー管理 の [TeamPage の再起動] ボタンをクリックして TeamPage を再起動してください。TeamPage の再起動が完了すると、このエラーは表示されなくなります。TeamPage クラウドでは再起動が2回必要です。

サーバーセットアップ > プラグイン のページを開き、[HTML の body タグに特別な class を追加] が表示されていることを確認します。

インストール完了

以上でインストールは完了です。

設定



プラグイン設定



プラグインの [設定] をクリックします。



下図のプラグイン設定画面が表示されます。

プラグイン設定

グループ



このグループに所属しているユーザーがページを表示すると、次の [グループのクラス] に記入した内容が、ページの <body> タグの class= 属性追加されます。

グループのクラス



ここに記入された内容は、上の [グループ] 設定で選択されたグループに所属するユーザーがページを表示するとき、ページの <body> タグの class= 属性の値として追加されます。

スペース ID のクラスを挿入



ここで [はい] を選択すると、ページの <body> タグの class= 属性にスペースの ID が "is-project-ID" として挿入されます。(スペースの ID が "5" の場合は "is-project-5" が挿入されます。)

動作確認



ブラウザーで [F12] キーを押して開発者ツールを表示し、ページの <body> タグの class= 属性を確認します。

動作例

例えば、「ユーザーがグループに所属していたら画面右上のロゴを隠す(非表示にする)」というカスタマイズを行うには、スキンのカスタマイズ設定または Download2143: Proteus カスタム JavaScript & CSS プラグイン で次のスタイルシート (CSS) を設定します。

.is-internal-member #logo-banner-top {
  display: none;
}




Attachments:
plugin1.png
plugin2.png
plugin_settings.png
example_page.png
関連記事
Article: Download2227 (permalink)
Categories: :DocJp:プラグイン
Date: 2018/11/15; 10時48分26秒 JST
Author Name: TeamPage サポート
Author ID: jpbo