V2C Style

feed-icon
V2C
「V2C」はJava+Swingによる2chブラウザ
http://v2c.s50.xrea.com/
V2C Style
「V2C」はスタイルシートに似た形式でレス表示の表面的なカスタマイズが可能
このページにあるのはカスタマイズのためのstyle.txt、壁紙、ボーダーイメージその他
「V2C」のマニュアル(V2C 使用法)は以下のアドレス
(レス表示のカスタマイズに関しては「レス表示」の[レス表示スタイル(現在は暫定仕様)]を参照のこと)
V2C 使用法
http://v2c.s50.xrea.com/manual/
掲示板参考:レス表示スタイル
http://yy61.60.kg/test/read.cgi/v2cj/1208956560/
ギャラリ005

gradation_laughingman_


gradation_laughingman_th.jpg 【作成】2009-03-09 (Mon)

背景に笑い男

曜日の表示などはmachigaisagashi_のまま、横幅を指定せず、サムネイル画像をメッセージ欄の下に配置

例によって各所にわかりにくいグラデーションを使っている。メッセージ欄は色を透過させ、文字を邪魔しない程度に背景画像を見せている




machigaisagashi_


machigaisagashi_th.jpg 【作成】2009-03-07 (Sat)

新仕様に対応その3、時間を分割して配置

一見すると、どうということの無いデザイン、ネタバラシすると書き込まれた日付の後にあるはずの曜日が無い

新仕様では、時間を分割して配置することが出来る。年月日曜日時間にそれぞれ<YEAR> <MONTH> <DAY> <DAYOFWEEK> <TIMEOFDAY>というタグ名を小文字にしたクラスが設定されている

現状では上手い使い方が思いつかないが、日めくりカレンダー的なものも表示できるだろうと考える(良いか悪いかは別として)

ちなみに曜日が知りたいときはレスポップアップを表示させると曜日がわかる仕組みになっている、そちらのほうは正常に表示するようにしてある(テンキー等でレス番を入力、もしくはレス番をドラッグで指定して、Winなら右クリック)




gradation_c3d4c3_


gradation_c3d4c3_th.jpg 【作成】2009-03-06 (Fri)

新仕様に対応その2の色違い他、横幅がブラウザの幅(ユーザの利用状況)に依存

そのほか、これといって目立つ違いなし




gradation_e6dfd6_


gradation_e6dfd6_th.jpg 【作成】2009-03-06 (Fri)

新仕様に対応その2の色違い他、横幅がブラウザの幅(ユーザの利用状況)に依存

そのほか、これといって目立つ違いなし




dfdfd8_gradation_


dfdfd8_gradation_th.jpg 【作成】2009-03-05 (Thu)

新仕様に対応その2、ヘッダやフッタの固定

そもそも、スレタイとかBBS名とか、あちこち見れば書いてあるわけです。だから新着の数とdatだけ固定で表示させる

ヘッダやフッタを新仕様に対応させるのは面倒ではない。<HEADER><FOOTER>を<TOPBAR><BOTTOMBAR>に書き換えてきちんと閉じる。(オプションとかあるので注意:http://v2c.s50.xrea.com/manual/resstyle.html)

そのほかに<HEADER><FOOTER>を表記して閉じれば(<HEADER></HEADER>のような感じ)、デフォルトで表示されるスレタイも消えてすっきり




new_gradation_


new_gradation_th.jpg 【作成】2009-03-05 (Thu)

新仕様に対応してみた、コンテナ要素に限ってグラデーションをスタイルスキンで表現できるようになった(background-gradation)

background-gradationを使った箇所は、メッセージ欄に上下のグラデーション、1レスごとの全容に左右のグラデーション、共に透過色

結果としてメッセージ欄には、上下左右のグラデーションが交差しているが、コレが不思議な効果をもたらしている。よく考えれば当たり前だが、対角同士が対照的な明度になった

box-shadowはコンテナ要素にドロップシャドウを付けることができる。どこまで出来るかは、まだわからない。今まではボーダーイメージを用意しなければならなかった。影をぼかしたり拡大したり、1レスごとの四辺に使用している

text-shadowは文字を二重に見せる仕様、ぼかし等は今のところ出来ない。newmark、preview、bookmarkに適用した

このスキンでは、ボーダーイメージを廃した結果、使用した画像はbackground-image2種類、新着を示す「NEW」画像2種類

ヘッダ、フッタのスレタイ等の箇所で、今まで使っていたジェルバー(中心から上下に同系色のグラデーション画像)をbackground-gradationで表現してみた。




skin_shimamurakun_


skin_shimamurakun_t.jpg 【作成】2009-03-04 (Wed)

掲示板でリクエストあったやつ、作ったけどリリースし損ねてたぁ、昨年末から今まで周囲や自分が波乱万丈で…

しまむらくんのAAを見るたび、甥っ子を思い出して気持ちほっこり

でもその甥っ子から年末にウィルスもらって、けたたましい下痢嘔吐…




traceshadow_guitargirl_


traceshadow_guitargirl_.jpg 【作成】2009-03-04 (Wed)

画像拾ったさ…

昨年末から今まで周囲や自分が波乱万丈で…

ずいぶん前に作ったものだけど、今までリリースする機会なく、しかも仕様変更…




black_window_


black_window_t.jpg 【作成】2008-12-22 (Mon)

直前に作ったlarse02_window_の改造版。デコレーションをこまごまと、付けたり削ったりした

フォントに、SkipO.otfというのを.ttfにしたモノを使用してみた(スクショ)

.otfを.ttfにし、V2Cの設定でフォント表示をアンチエイリアス(手元の環境WindowsXPの場合、プルダウンメニュー「設定」/「レス表示フォントの変更」の[Font Parameters]のアンチエイリアスの箇所、オン)にすると、けっこうイイ感じになる




larse02_window_


larse02_window_p.jpg larse02_window_t.jpg 【作成】2008-12-15 (Mon)

情報を横に並べるデザイン、過去に作った同様のものを眺めていたら、近頃ハマっている水滴の壁紙を用いることでイイ感じになりそうな気がしてきた

Gimpで作るジェルバーのバリエーションを増やして細かいところに用いてみた

ポップアップのデザインはいつも頭痛の種、レス欄のほうで燃え尽きる感あり、でも今回は比較的好きなほう

自作のスタイルスキンの、レス表示に関する不具合を長らく悩んでいたが、n|aさんに吐露したら早速対応してくださった、現在は問題なく表示される、本当にありがたい

壁紙素材
このスタイルスキン"thumbnail_illusion_"に使用している画像"larse02.jpg"は上記サイト、写真素材★Abundant Shine★からのものであり、著作権等はAbundant Shineさんにあります。


thumbnail_illusion_


thumbnail_illusion_t2.png thumbnail_illusion_t1.png 【作成】2008-11-26 (Wed)

サムネイル画像の表示箇所と方法に凝ってみた

用意した左側のスクショにあるとおり、サムネイル画像を表示しないときは四辺をボーダーで囲うタイプに見えるが、サムネイルを表示したときは右側のスクショのとおり、レス番、名前等の横、右下隅にまとめて表示するようにした

画像貼り付けスレに特化したスタイルスキンにする予定で、テキストの視認性と言うか、読みやすさなどをあまり考慮せずに作っていたが、それもなんだかあなぁと思い立ち、申し訳程度に、メッセージが表示される欄の右側からグラデーションで、白から透過する画像を背景にしてみた

それにしても、雨粒の写真をネットでいろいろあさってみたが、この度も利用させてもらっているAbundant Shineさんの当該画像が非常に美しい、自分の好み

雨だれもさることながら、その下の金属的なプレートが好きで、なるべくそれが見えるようにメッセージ欄の背景色の透過割合を低くしたのだが、それがテキストの読みやすさを悪くしていた

壁紙素材
このスタイルスキン"thumbnail_illusion_"に使用している画像"larse02.jpg"は上記サイト、写真素材★Abundant Shine★からのものであり、著作権等はAbundant Shineさんにあります。


style_gelbar123d66_


style_gelbar123d66_t.png 【作成】2008-11-22 (Sat)

GIMPのスクリプトにgelbarを自動で作ってくれるものがあるが、それにちなんだスタイルスキン

レス表示欄は下からのライトアップ風のgelbar素材、これはgelbarを作った後のレイヤーの組み合わせによって出来たものをコピー保存したもの

そのうえ、ボーダーイメージを施し、お盆のようなトレイのような雰囲気になった。蛇足だが、サムネイルイメージを表示させる箇所も同じくトレイ風

スクショのフォントは例によってIPAP明朝(font-family:IPAPMincho !important;と設定してある)

IPAフォント
情報処理推進機構:
http://www.ipa.go.jp/



traceshadow_skysquare_


traceshadow_skysquare_t.png traceshadow_skysquare_p.png 【作成】2008-11-15 (Sat)
【改編】2008-11-29 (Sat)
  • DL (jpgファイルをこのリンクから保存してください。単純分割してあるので何らかのソフトで結合し、出来たファイルに拡張子がない場合.zipとして解凍してください)
  • 都合により配布ファイル形式変更 2008-11-29 (Sat)

traceshadow_square_IPAPMincho_の壁紙アレンジバージョン。

レス表示欄は青い海と空の2枚の画像を使用、ポップアップの背景にもヒツジ雲みたいな画像使用。(font-family:"IPAPMincho" !important;と設定してあるのでこのフォントがないとうまく表示されない可能性が高いです)

IPAフォント
情報処理推進機構:
http://www.ipa.go.jp/

WindowsXPしか手元にないのでそれ前提になってしまうが、明朝体のフォントはおそらく、V2Cの設定がデフォルトのままでは綺麗に表示されない、アンチエイリアスをオンにしなければならない(もしかしたらOSによって設定違う?手元の環境WindowsXPの場合、プルダウンメニュー「設定」/「レス表示フォントの変更」の[Font Parameters]のアンチエイリアスの箇所

しかしながらその設定は、全てのレス表示に関する設定なので、そこを変えるとほかのスタイルスキンの表示もアンチエイリアスになってしまう

というわけで、このスタイルスキンのために新しくフォント入れたりアンチエイリアスをオンにするのはいやだし、オフ、もしくはデフォルトのまま明朝体のフォントを表示させるのは見苦しいという人は、フォント設定を変える等してください

壁紙素材
このスタイルスキン"traceshadow_skysquare_"に使用している画像"sky49.jpg"と"scenery53.jpg"および"sky46.jpg"は上記サイト『M+J』からのものであり、このスタイルスキンからの再配布が禁止されています。また、著作権等は当該サイト管理者「うい」さんにあります。


traceshadow_square_IPAPMincho_


traceshadow_square_IPAPMincho_t.png traceshadow_square_IPAPMincho_p.png 【作成】2008-11-10 (Mon)

最近、WebでもV2Cでも、明朝体フォントにハマっている、フリーのIPA P明朝(font-family:"IPAPMincho" !important;と設定してあるのでこのフォントがないとうまく表示されない可能性が高いです)

IPAフォント
情報処理推進機構:
http://www.ipa.go.jp/

WindowsXPしか手元にないのでそれ前提になってしまうが、明朝体のフォントはおそらく、V2Cの設定がデフォルトのままでは綺麗に表示されない、アンチエイリアスをオンにしなければならない(もしかしたらOSによって設定違う?手元の環境WindowsXPの場合、プルダウンメニュー「設定」/「レス表示フォントの変更」の[Font Parameters]のアンチエイリアスの箇所

しかしながらその設定は、全てのレス表示に関する設定なので、そこを変えるとほかのスタイルスキンの表示もアンチエイリアスになってしまう

というわけで、このスタイルスキンのために新しくフォント入れたりアンチエイリアスをオンにするのはいやだし、オフ、もしくはデフォルトのまま明朝体のフォントを表示させるのは見苦しいという人は、フォント設定を変える等してください

壁紙素材
このスタイルスキン"traceshadow_square_IPAPMincho_"に使用している画像"larse02.jpg"と"larse17.jpg"は上記サイト、写真素材★Abundant Shine★からのものであり、著作権等はAbundant Shineさんにあります。


style_greyblack3DV_


style_greyblack3DV_t.png 【作成】2008-10-29 (Wed)

レス欄の背景全面と全体の背景にグラデーション画像を使用した

レス欄は、ひとレスごとにグラデーション画像が適用される

全体の背景はbottomを基準に底辺をあわせて(つまりbackground-position:center bottom;)、その上でスクロールさせているが、リピートはbackground-repeat: repeat-x;にとどめてある

そうなると当然、背景画像は途中で途切れるが、途切れる際(きわ)の色を背景色に設定(background-color:b5bdc8;)して、継ぎ目がないように見せかけた、一応

レス番、名前、日付、IDの文字が背景と同系色で見づらいような感じがするけれど、そこらへんは記号なので、声に出して読む必要がないから!・・・デザイン優先と言うことであしからず

それから、今ごろになってスレタイが長いスレ(ニュー速のような板にありがちな)をこのスタイルスキンで訪れてみたが(普段興味ないので見ない)、ヘッタとフッタが5行に表示されたりして著しくカッコ悪いことになった、見なかったとにした




style41_msggradation_


style41_msggradation_t.png 【作成】2008-10-25 (Sat)

Sun MicrosystemsのJava SE 6 Update 10のリリースがあって、関係したページを見ていたら影響された感じ?

レス欄(メッセージ欄)の背景全面にグラデーション画像を使用した、初

それに伴い、メッセージ欄の四隅のみに、角が丸まったボーダーイメージ使用

ヘッダとフッタの、スレッドネームや新旧全体のレスカウント等々を表示している箇所にも、四隅のみに、角が丸まったボーダーイメージを使用したが、さらにその欄の上下左右に1pxのボーダーラインを設定した

ヘッダとフッタをよーく見ると四隅だけボーダーラインが行きわたっていない、これはV2Cの仕様で、角を丸める効果のあるborder-radiusにborder-colorが適用されないため




style_Lji_b8860b_


style_Lji_b8860b_t.png 【作成】2008-10-18 (Sat)

ちょっと眩しい

過去に作ったstyle_Lji_enclose_の色違いだが、何があってもボーダーラインで囲むようなことはなくなった




Indexギャラリ001ギャラリ002ギャラリ003ギャラリ004/ギャラリ005/
inserted by FC2 system