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] の2つのテキストエリアがあり、それぞれ 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%;
}


実際の画面には次のように反映されます。





Attachments:
requires_restart_ja.png
plugin_installed_ja.png
enter_configuration_ja.png
status_header_red.png
badge_red_font_125.png
mypage.png
dashboard_tab_label.png
config_view.png
関連記事
Article: Download2143 (permalink)
Categories: :DocJp:プラグイン, :FAQ:カスタマイズ, :FAQ:CSS, :FAQ:JavaScript
Date: 2018/05/24; 16時05分52秒 JST

Author Name: TeamPage サポート
Author ID: jpbo