Title: スタイルシートを使った装飾例

スタイルシート (CSS) を使って、TeamPedia のインデックス画面に表示される項目を装飾できます。

ここでは、(1) よみがなの色を変更する方法と (2) サブタイトルを括弧記号で囲む方法を紹介します。



スタイルシート (CSS) の設定するには



Proteus スキンの色テーマに記述する方法と、「Proteus カスタム JavaScript & CSS プラグイン」をインストールして同プラグインの設定画面の [CSS] 欄に記入する方法があります。

参考記事



ここでは、後者の「Proteus カスタム JavaScript & CSS プラグイン」を使う方法を紹介します。

よみがなの色を変更する



インデックス画面の body 要素には「view-teampedia-index」、各記事には「entry」、よみがなには「yomigana」というクラスが付けられています。そこで、次のように、よみがなの色（ここでは水色）を指定します。

.view-teampedia-index .entry .yomigana {
  color: #0099cc;
}


インデックス画面を再読み込みして、よみがなが水色で表示されることを確認します。



サブタイトルを括弧記号で囲む



CSS の content プロパティを使ってサブタイトル要素の前後に括弧記号を挿入します。

/* subtitle の前に開き括弧記号を挿入 */
.view-teampedia-index .entry .subtitle:before {
  content: "(";
}
/* subtitle の後ろに閉じ括弧記号を挿入 */
.view-teampedia-index .entry .subtitle:after {
  content: ")";
}


インデックス画面を再読み込みし、サブタイトルが括弧記号で囲まれていることを確認します。





Attachments:
text_color.png
subtitle1.png
関連記事
参照されている (3)
TeamPedia104: TeamPedia の設定TeamPedia73: その他のプラグイン設定TeamPedia1: TeamPedia マニュアル
参照している (2)
Download2143: Proteus カスタム JavaScript & CSS プラグインFAQ1784: スタイルシートでスキンのデザインを変更するには
Article: TeamPedia125 (permalink)
Date: 2022/01/31; 11時16分38秒 JST

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