背景に笑い男
曜日の表示などはmachigaisagashi_のまま、横幅を指定せず、サムネイル画像をメッセージ欄の下に配置
例によって各所にわかりにくいグラデーションを使っている。メッセージ欄は色を透過させ、文字を邪魔しない程度に背景画像を見せている
新仕様に対応その3、時間を分割して配置
一見すると、どうということの無いデザイン、ネタバラシすると書き込まれた日付の後にあるはずの曜日が無い
新仕様では、時間を分割して配置することが出来る。年月日曜日時間にそれぞれ<YEAR> <MONTH> <DAY> <DAYOFWEEK> <TIMEOFDAY>というタグ名を小文字にしたクラスが設定されている
現状では上手い使い方が思いつかないが、日めくりカレンダー的なものも表示できるだろうと考える(良いか悪いかは別として)
ちなみに曜日が知りたいときはレスポップアップを表示させると曜日がわかる仕組みになっている、そちらのほうは正常に表示するようにしてある(テンキー等でレス番を入力、もしくはレス番をドラッグで指定して、Winなら右クリック)
新仕様に対応その2、ヘッダやフッタの固定
そもそも、スレタイとかBBS名とか、あちこち見れば書いてあるわけです。だから新着の数とdatだけ固定で表示させる
ヘッダやフッタを新仕様に対応させるのは面倒ではない。<HEADER><FOOTER>を<TOPBAR><BOTTOMBAR>に書き換えてきちんと閉じる。(オプションとかあるので注意:http://v2c.s50.xrea.com/manual/resstyle.html)
そのほかに<HEADER><FOOTER>を表記して閉じれば(<HEADER></HEADER>のような感じ)、デフォルトで表示されるスレタイも消えてすっきり
新仕様に対応してみた、コンテナ要素に限ってグラデーションをスタイルスキンで表現できるようになった(background-gradation)
background-gradationを使った箇所は、メッセージ欄に上下のグラデーション、1レスごとの全容に左右のグラデーション、共に透過色
結果としてメッセージ欄には、上下左右のグラデーションが交差しているが、コレが不思議な効果をもたらしている。よく考えれば当たり前だが、対角同士が対照的な明度になった
box-shadowはコンテナ要素にドロップシャドウを付けることができる。どこまで出来るかは、まだわからない。今まではボーダーイメージを用意しなければならなかった。影をぼかしたり拡大したり、1レスごとの四辺に使用している
text-shadowは文字を二重に見せる仕様、ぼかし等は今のところ出来ない。newmark、preview、bookmarkに適用した
このスキンでは、ボーダーイメージを廃した結果、使用した画像はbackground-image2種類、新着を示す「NEW」画像2種類
ヘッダ、フッタのスレタイ等の箇所で、今まで使っていたジェルバー(中心から上下に同系色のグラデーション画像)をbackground-gradationで表現してみた。
掲示板でリクエストあったやつ、作ったけどリリースし損ねてたぁ、昨年末から今まで周囲や自分が波乱万丈で…
しまむらくんのAAを見るたび、甥っ子を思い出して気持ちほっこり
でもその甥っ子から年末にウィルスもらって、けたたましい下痢嘔吐…
直前に作ったlarse02_window_の改造版。デコレーションをこまごまと、付けたり削ったりした
フォントに、SkipO.otfというのを.ttfにしたモノを使用してみた(スクショ)
.otfを.ttfにし、V2Cの設定でフォント表示をアンチエイリアス(手元の環境WindowsXPの場合、プルダウンメニュー「設定」/「レス表示フォントの変更」の[Font Parameters]のアンチエイリアスの箇所、オン)にすると、けっこうイイ感じになる
情報を横に並べるデザイン、過去に作った同様のものを眺めていたら、近頃ハマっている水滴の壁紙を用いることでイイ感じになりそうな気がしてきた
Gimpで作るジェルバーのバリエーションを増やして細かいところに用いてみた
ポップアップのデザインはいつも頭痛の種、レス欄のほうで燃え尽きる感あり、でも今回は比較的好きなほう
自作のスタイルスキンの、レス表示に関する不具合を長らく悩んでいたが、n|aさんに吐露したら早速対応してくださった、現在は問題なく表示される、本当にありがたい
サムネイル画像の表示箇所と方法に凝ってみた
用意した左側のスクショにあるとおり、サムネイル画像を表示しないときは四辺をボーダーで囲うタイプに見えるが、サムネイルを表示したときは右側のスクショのとおり、レス番、名前等の横、右下隅にまとめて表示するようにした
画像貼り付けスレに特化したスタイルスキンにする予定で、テキストの視認性と言うか、読みやすさなどをあまり考慮せずに作っていたが、それもなんだかあなぁと思い立ち、申し訳程度に、メッセージが表示される欄の右側からグラデーションで、白から透過する画像を背景にしてみた
それにしても、雨粒の写真をネットでいろいろあさってみたが、この度も利用させてもらっているAbundant Shineさんの当該画像が非常に美しい、自分の好み
雨だれもさることながら、その下の金属的なプレートが好きで、なるべくそれが見えるようにメッセージ欄の背景色の透過割合を低くしたのだが、それがテキストの読みやすさを悪くしていた
GIMPのスクリプトにgelbarを自動で作ってくれるものがあるが、それにちなんだスタイルスキン
レス表示欄は下からのライトアップ風のgelbar素材、これはgelbarを作った後のレイヤーの組み合わせによって出来たものをコピー保存したもの
そのうえ、ボーダーイメージを施し、お盆のようなトレイのような雰囲気になった。蛇足だが、サムネイルイメージを表示させる箇所も同じくトレイ風
スクショのフォントは例によってIPAP明朝(font-family:IPAPMincho !important;と設定してある)
traceshadow_square_IPAPMincho_の壁紙アレンジバージョン。
レス表示欄は青い海と空の2枚の画像を使用、ポップアップの背景にもヒツジ雲みたいな画像使用。(font-family:"IPAPMincho" !important;と設定してあるのでこのフォントがないとうまく表示されない可能性が高いです)
WindowsXPしか手元にないのでそれ前提になってしまうが、明朝体のフォントはおそらく、V2Cの設定がデフォルトのままでは綺麗に表示されない、アンチエイリアスをオンにしなければならない(もしかしたらOSによって設定違う?手元の環境WindowsXPの場合、プルダウンメニュー「設定」/「レス表示フォントの変更」の[Font Parameters]のアンチエイリアスの箇所)
しかしながらその設定は、全てのレス表示に関する設定なので、そこを変えるとほかのスタイルスキンの表示もアンチエイリアスになってしまう
というわけで、このスタイルスキンのために新しくフォント入れたりアンチエイリアスをオンにするのはいやだし、オフ、もしくはデフォルトのまま明朝体のフォントを表示させるのは見苦しいという人は、フォント設定を変える等してください
最近、WebでもV2Cでも、明朝体フォントにハマっている、フリーのIPA P明朝(font-family:"IPAPMincho" !important;と設定してあるのでこのフォントがないとうまく表示されない可能性が高いです)
WindowsXPしか手元にないのでそれ前提になってしまうが、明朝体のフォントはおそらく、V2Cの設定がデフォルトのままでは綺麗に表示されない、アンチエイリアスをオンにしなければならない(もしかしたらOSによって設定違う?手元の環境WindowsXPの場合、プルダウンメニュー「設定」/「レス表示フォントの変更」の[Font Parameters]のアンチエイリアスの箇所)
しかしながらその設定は、全てのレス表示に関する設定なので、そこを変えるとほかのスタイルスキンの表示もアンチエイリアスになってしまう
というわけで、このスタイルスキンのために新しくフォント入れたりアンチエイリアスをオンにするのはいやだし、オフ、もしくはデフォルトのまま明朝体のフォントを表示させるのは見苦しいという人は、フォント設定を変える等してください
レス欄の背景全面と全体の背景にグラデーション画像を使用した
レス欄は、ひとレスごとにグラデーション画像が適用される
全体の背景はbottomを基準に底辺をあわせて(つまりbackground-position:center bottom;)、その上でスクロールさせているが、リピートはbackground-repeat: repeat-x;にとどめてある
そうなると当然、背景画像は途中で途切れるが、途切れる際(きわ)の色を背景色に設定(background-color:b5bdc8;)して、継ぎ目がないように見せかけた、一応
レス番、名前、日付、IDの文字が背景と同系色で見づらいような感じがするけれど、そこらへんは記号なので、声に出して読む必要がないから!・・・デザイン優先と言うことであしからず
それから、今ごろになってスレタイが長いスレ(ニュー速のような板にありがちな)をこのスタイルスキンで訪れてみたが(普段興味ないので見ない)、ヘッタとフッタが5行に表示されたりして著しくカッコ悪いことになった、見なかったとにした
Sun MicrosystemsのJava SE 6 Update 10のリリースがあって、関係したページを見ていたら影響された感じ?
レス欄(メッセージ欄)の背景全面にグラデーション画像を使用した、初
それに伴い、メッセージ欄の四隅のみに、角が丸まったボーダーイメージ使用
ヘッダとフッタの、スレッドネームや新旧全体のレスカウント等々を表示している箇所にも、四隅のみに、角が丸まったボーダーイメージを使用したが、さらにその欄の上下左右に1pxのボーダーラインを設定した
ヘッダとフッタをよーく見ると四隅だけボーダーラインが行きわたっていない、これはV2Cの仕様で、角を丸める効果のあるborder-radiusにborder-colorが適用されないため