Title: Proteus カスタム JavaScript & CSS プラグイン
このプラグインをインストールすると、サーバー管理者は、Proteus スキンの動作に反映される JavaScript や CSS (スタイルシート) を簡単に追加・設定できるようになります。
例えば、jQuery を使ってページの要素を置き換えたり追加したり、CSS を使って特定の部分のフォントサイズを変更したり…などなど、様々なカスタマイズが実現可能になります。
インストール
注意: バージョン 1.0.0 からバージョン 1.0.1 以降へアップデートする場合、まずプラグイン設定画面を開き、[JavaScript] と [CSS] 欄に記入された内容をコピー（バックアップ）してください。バージョン 1.0.0 と 1.0.1 以降とでは設定テキストエリアの形式が異なり互換性がないため、バージョン 1.0.0 での設定内容は 1.0.1 以降へアップデートすると消失します。
下のリンクをクリックしてプラグインの .zip ファイルをダウンロードします。
サーバーセットアップ > プラグインのページの「新規プラグインのインストール」で .zip ファイルを選択してアップロードします。
アップロードが完了すると、「インストール済みプラグイン」の一覧に「I18N ERROR」が表示されますが、これはプラグイン中の日本語ファイルがまだ動作に反映されていないために表示されるエラーです。
サーバーセットアップ > 一般 > サーバー管理 の [TeamPage の再起動] ボタンをクリックして TeamPage を再起動してください。TeamPage の再起動が完了すると、このエラーは表示されなくなります。TeamPage クラウドでは再起動が2回必要です。
サーバーセットアップ > プラグイン のページを開き、[Proteus カスタム JavaScript & CSS] が表示されていることを確認します。
以上でインストールは完了です。
設定
設定画面の表示
プラグインの [設定] リンクをクリックします。
下図のようなプラグイン設定画面が表示されます。
設定画面には [JavaScript] と [CSS] の２つのテキストエリアがあり、それぞれ JavaScript と CSS を設定できます。
JavaScript
Proteus スキンは「外側」と「内側」の二重構造になっており、外側が読み込まれた後、実際の記事データなどが Ajax で内側に読み込まれます。
そのため、Proteus 上で動作する JavaScript は、通常、Proteus.addHandler("load", function(){ DO SOMETHING }); のスコープ内に記述します。
例 (1) - プロフィール メニューの [プロフィール] を [マイ ページ] に変更
[JavaScript] に次のコードを記入します。
Proteus.addHandler("load", function(){
$('.profile-menu .menuitem-profile').html('<i></i>マイ ページ');
});
実際の画面には次のように反映されます。
例 (2) - [ダッシュボード] タブの表記を [まとめページ] に変更
[JavaScript] 欄に次のコードを記入します。
Proteus.addHandler("load", function(){
$('#primary-tabs .tab-dashboard a span').text('まとめページ');
});
実際の画面には次のように反映されます。
CSS
例 (1) - [近況] タブの [いまなにしてる？] の色を赤くする
[CSS] 欄に次のコードを記入します。
.view-status #body .liveblog-post h2 {
color: #cc0000;
}
実際の画面は次のようになります。
例 (2) - 通知の未読件数（バッジ）を赤くして、文字サイズを25%大きくする
[CSS] 欄に次のコードを記入します。
#menu .notifications-count {
background-color: #c00;
font-size: 125%;
}
実際の画面には次のように反映されます。
