レス表示スタイル の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• レス表示スタイル へ行く。
  • 1 (2014-03-21 (金) 18:29:09)
  • 2 (2014-03-21 (金) 18:29:09)
  • 3 (2014-03-21 (金) 18:29:09)

---

目次†

レス表示スタイルについて†

レス表示スタイルとは、レス表示欄の見た目をカスタマイズできるものであり、Jane系ブラウザ等、他のブラウザでスキンと呼ばれているものに相当します。
書式はCSSに似ており、柔軟なカスタマイズをすることができます。

また、レス表示スタイルを適用する範囲を、BBS、板、スレッド単位、またはスレタイに特定のキーワードを含むスレッド単位で変更することができ、
複数のレス表示スタイルをスレッド毎に割り当てることができます。

TwitterにはTweet表示スタイルとして対応しています。

• レス表示スタイル＠V2C掲示板
  レス表示スタイルについての質問等はこちらへ。
  「こういうレス表示スタイルを作ってもらえませんか？」も、ＯＫ。
• スクリーンショットスレ＠V2C掲示板
  V2Cのスクリーンショットを貼るスレ。
  レス表示スタイル配布の場としても機能しています。

設定方法†

参照: V2C 使用法 レス表示スタイル設定

「メニュー」→「設定」→「レス表示スタイル」
レス表示スタイルは、レス表示スタイルギャラリー等から入手し、下の項目の方法に沿って導入してください。
「Rectangle」については標準実装されおり、いつでも変更することができます。

入手したレス表示スタイルを適用する方法†

1. レス表示スタイルギャラリー等から入手したファイルを仮に skin.zip とする。
2. V2C保存用フォルダ（場所: 「ヘルプ」→「V2Cについて…」の2行目）に"style"フォルダ作成。
3. "style"フォルダに skin.zip を移動。
4. 「設定」メニューの「レス表示スタイル…」を開く。
5. 「全体」枠内の「選択したスタイルを使用する」でダウンロードしたレス表示スタイルを選択。
6. 「OK」をクリック。

※内容を変更しない場合はZIPファイルを解凍する必要はありません。
※色々なレス表示スタイルを切り替えて試す場合、「キーバインド」→「全体」にある「最後に使用した設定ダイアログを開く」を使うと、一発で表示スタイル設定ダイアログを開けるので楽です。

レス表示スタイルの編集†

参照: V2C 使用法 レス表示スタイル

レス表示スタイルの書式はCSSに似ています。CSSについては外部サイト等を参考にしてください。

参考: CSSレイアウト実践講座 CSSリファレンス
参考: とほほのスタイルシート入門

デフォルトレス表示スタイル†

参照: V2C 使用法 レス表示スタイルの「出発点」より

以下は、出発点のデフォルトのレス表示スタイルを導入する手順です。

1. V2C保存用フォルダに"style"フォルダが存在しなければ作成する。
2. "style"フォルダに"defult_style"フォルダを作成する。
3. 下の枠内の記述をメモ帳等のテキストエディタで"defult_style"フォルダの"style.txt"に文字コードUTF-8で保存する。（"V2C\style\defult_style\style.txt"）
4. 「設定」メニューの「レス表示スタイル…」を開く。
5. 「全体」枠内の「選択したスタイルを使用する」で「出発点」を選択。
6. 「OK」をクリック。

<PROPERTY> 
Name=出発点（レス表示スタイル）
</PROPERTY> 

<STYLE>
.inf,.ng { padding: .5em .5em .2em .5em;}
.msg { padding: .2em .5em .5em 2em;}
</STYLE>

<RES>
  <DIV class="inf"><NUMBER> : <NAME> [<MAIL>] : <TIME><IDSET><AUXSET></DIV>
  <DIV class="msg"><MESSAGE></DIV>
</RES>

<NGRES>
  <DIV class="ng"><NUMBER> 非表示: <NGREASON></DIV>
</NGRES>

Rectangle風レス表示スタイルの一例†

デフォルトで内蔵されているRectangleスキンをスキンを使って適用する例。（一部デフォルトと異なります）
手始めとしてこれを元に、配置、背景色、フォント、文字色等変えて好みのスキンを作成してみては。。。

1. V2C保存用フォルダに"style"フォルダが存在しなければ作成する。
2. "style"フォルダに"skin"フォルダを作成する。
3. 下の枠内の記述をメモ帳等のテキストエディタで"skin"フォルダの"style.txt"に文字コードUTF-8で保存する。（"V2C\style\skin\style.txt"）
4. 「設定」メニューの「レス表示スタイル…」を開く。
5. 「全体」枠内の「選択したスタイルを使用する」で「Rectangle風スキン」を選択。
6. 「OK」をクリック。

<PROPERTY> 
Name=Rectangle風レス表示スタイル
</PROPERTY> 
<STYLE> 
.res { margin: .25em .5em; border-width: 1px; border-color: #B8CFE5; border-radius: .5em;}
.inf { margin: .1em; padding: .4em .5em .2em; 
background-color: #DCE8F3; /* 名前他の欄の背景色 */ 
border-radius: .5em;}
.msg,.newmsg { padding: .5em .5em .4em 2em; border-style: solid; border-width: 1px; border-color: #B8CFE5; border-radius: .5em;}
.aux { font-size: x-small;}
.newmsg { background-color: #EEF4E8;} /* 新規レスの背景色 */
.msg { background-color: #EEF4FA;} /* 既得レスの背景色 */
.footer{ color: #CA8888; font-size: x-small; text-align: left; margin: .3em 3em;}
</STYLE> 
<RES class="res"> 
<DIV class="inf"><NUMBER> : <NAME> [<MAIL>] : <TIME><IDSET><AUXSET></DIV> 
  <DIV class="msg"><MESSAGE></DIV> 
  </RES> 
<NGRES class="res"> 
  <DIV class="inf"><NUMBER> 非表示: <NGREASON></DIV> 
</NGRES> 
<NEWRES class="res"> 
  <DIV class="inf"><NUMBER> : <NAME> [<MAIL>] : <TIME><IDSET><AUXSET></DIV> 
  <DIV class="newmsg"><MESSAGE></DIV> 
</NEWRES> 
<FOOTER class="footer"> 
  <DIV>-- <THREADNAME> --</DIV> 
</FOOTER>

Janeのスキンを流用する†

Janeのスキンをインポート†

参照: V2C 使用法 メインメニュー の「Janeのスキンをインポート…」

V2Cは、Janeのスキンをインポートし、V2Cのレス表示スタイルに変換することができます。
以下はその手順です。

1. Janeのスキンを入手し、解凍する。
2. V2Cの「メニュー」→「ファイル」→「インポート」→「Janeのスキンをインポート」から、解凍したフォルダを指定する。
3. レス表示スタイル名と、それを格納するフォルダ名をつける。
4. 以上でインポート完了。
5. 通常のレス表示スタイル設定からインポートしたスタイルを適用する。
   (上記設定方法をご覧ください。)

※必ずしもインポートが成功するとは限りません。上手くいかなかった場合は、レス表示スタイル＠V2C掲示板で質問してみましょう。

参考: “Jane”シリーズ用のスキンをインポート可能になった「V2C」v2.4.3

Janeのスキンを手動で流用する例†

例1†

Jane Skin Uploader のJane用らき☆すたスキンをV2Cで使用する　2008/07/09版

1. http://janeplus.s32.xrea.com/file/src/janeskin0019.zip.html からjaneskin0019.zipをダウンロードする。
2. V2Cの保存用フォルダに"style"という名前のフォルダを作成する。
3. さらに"style"の中に"LuckyStar"という名前のフォルダを作成する。
4. さらに"LuckyStar"の中に"original"という名前のフォルダを作成する。
5. "original"の中に移動し、1でダウンロードしたjaneskin0019.zipを解凍する。
6. 解凍されたファイル中の"icon1.png"の名前を"iconN.png"に、"icon2.png"の名前を"iconO.png"に変更する。
7. 下の枠内の記述をUTF-8で"LuckyStar"フォルダの"style.txt"に保存する。
8. 「設定」メニューの「レス表示スタイルの設定…」で「全体」のコンボボックスから"らき☆すた [LuckyStar]"を選択する。

※フォントによってはstyle.txtのmarginやpaddingを調節する必要があるかもしれません。

<PROPERTY>
Name=らき☆すた
</PROPERTY>
<STYLE>
.root { background-color: #EFEFEF; background-image: url(original/bg2.png); background-position: right bottom;
 background-repeat: no-repeat; background-attachment: fixed;}
.inf,.ng { padding: 36px .5em 10px 68px; background-repeat: no-repeat;}
.inf { background-image: url(original/bar.png),url(original/icon[N].png);
 background-position: 10px top, 10px 32px; background-overflow: visible;}
.ng { background-image: url(original/bar.png); background-position: 10px top;}
.msg { padding: 0 .5em .5em 80px;}
.aux { font-size: x-small;}
.bkmk { margin: 1em 2em;}
</STYLE>
<RES>
  <DIV class="inf"><NUMBER> : <NAME> [<MAIL>] : <TIME><IDSET><AUXSET></DIV>
  <DIV class="msg"><MESSAGE></DIV>
</RES>
<NGRES><DIV class="ng"><NUMBER> 非表示: <NGREASON></DIV></NGRES>
<BOOKMARK><DIV class="bkmk"><IMG src="original/bg.png"></DIV></BOOKMARK>

例２†

Janeskinできたのおいとく のJane用真田純勇士霧隠才蔵スキンをV2Cで使用する

1. http://janeskin503.blog118.fc2.com/blog-entry-21.htmlのファイルをダウンロード・解凍する。
2. V2Cの保存用フォルダに"style"という名前のフォルダを作成する。
3. さらに"style"の中に"saizo"という名前のフォルダを作成する。
4. さらに"saizo"の中に"image"という名前のフォルダを作成する。
5. "image"の中に 1. で解凍された"bg.png","res.png","newres.png"を移動する。
6. "res.png"の名前を"resO.png"に、"newres.png"の名前を"resN.png"に変更する。
7. この下の枠内の記述をUTF-8で"saizo"フォルダの"style.txt"に保存する。
8. レス表示スタイル設定で"saizo"を選択する。

<STYLE>
.root {background-image: url(image/bg.png); background-position: left top;
 background-repeat: repeat-y; background-attachment: fixed;}
.res { width: 660px;}
.inf { padding: 12px 70px 10px 80px; background-repeat: no-repeat;
 background-image: url(image/res[N].png);
 background-position: 39px top; background-overflow: visible;}
.msg { padding: 5px 10px 30px 75px;}
</STYLE>
<RES class="res">
  <DIV class="inf"><NUMBER> : <NAME> [<MAIL>] : <TIME><IDSET><AUXSET></DIV>
  <DIV class="msg"><MESSAGE></DIV>
</RES>
<NGRES class="res"><DIV class="inf"><NUMBER> 非表示: <NGREASON></DIV></NGRES>
<FOOTER></FOOTER>

レス表示スタイルFAQ†

Q.スレの最後にスレタイが表示されるんだけどこいつを消す方法は？†

<FOOTER>を使えば可能。

上記のRectangle風レス表示スタイルの場合、最後から2行目の”-- <THREADNAME> --”を削除しstyle.txt保存→V2Cを起動。

Q.レス表示部分に常時、スレタイ・板名・datファイルサイズなどを表示したい。†

<TOPBAR>か<BOTTOMBAR>を使えば可能。

レス表示スタイルの「例２: <TOPBAR>、<BOTTOMBAR>、～」を参考にstyle.txtを変更してみて下さい。

Q.スレッドリンクのポップアップ表示でトップにあるスレタイを編集したい。†

<HEADEREX>を使えば可能。

105 : n|a : 2008/06/28(土) 22:09:47 ID:aMd43GyR
そのスレタイはスレ立てプレビューと他スレポップアップでのみ表示される

<HEADEREX>～</HEADEREX>で設定されています。
今のところ<HEADEREX>はタグ名を含めてあまりよく考えて仕様を决めていないので、
使用法にはまだ書いていません。

ちなみにポップアップではレスと全体の背景・境界以外に描画されるのは<HEADEREX>だけです。

レス表示スタイル
http://yy61.60.kg/test/read.cgi/v2cj/1208956560/105 より