半端じゃない華麗なテンプレート
いや〜とうとう完成しました。♪ d(⌒o⌒)b♪ウェビンブログの洵さんとコラボでやりましょうよ〜♪と、イラストだけ描いた私でしたが、洵さんがテンプレート用に描いた「さららシリーズ」を使い凄いのを作ってしまいま
- Glim.
- 2007-07-13(Fri) 21:14
- △
No.476
website003（collaboration with Glim.）
FC2共有に「website003」を登録しました。
ホームページのようなブログテンプレート、第三弾。美人絵師・Glim.の有希之武さんとのコラボレーション作品です。
グリーティングカード風で、文字領域は少なめ。詩・小説が映えるデザインとなっています。
機能を制限した無料版と、ショップで販売している有料版があります。詳しくは下記をご参照ください。
website[カフェ・ショップ・個人事業者向けテンプレート]：WebbingStudio
このテンプレートは、有希之武さんの世界観をほとんど間借りして作成しています。なので「綺麗」「素敵」といったお言葉はぜひぜひ、有希之武さん宛にお寄せください（＾＾
More
有希之武さんは、テンプレートの左いっぱいを占める女性（さららさん、というらしい）のような、魅了する美人画を多く書かれています。
今回は有希之武さんとの初コラボということで、イラスト負けしない「魅了するCSSデザイン」を心がけました。
透過画像を駆使した三重レイヤー、高解像度でも中央に表示される擬似フレーム、アクセシビリティを損なわない程度の画像置換など、かなり技術的に派手なことをしていますが、意外にもInternetExplorer6にはほとんど悩まされませんでした。
IE7の方はどうなっているかわかりませんけど（´Д｀；
何はともあれ、どうにかイラストに耐える作品をリリースすることができてよかったです。
Photoshopの元データまでご提供くださった有希之武さんには、改めて御礼申し上げます。
Trackback
- trackback URL
- http://webbingstudio.blog10.fc2.com/tb.php/476-368b7a87
引用して記事を書く（FC2ブログ用）
テンプレ紹介12“website”シリーズ
今回のテンプレート紹介シリーズのもう一つの「目玉」は、『WebbingStudio』様の３作。“website_003”……Glim様の美女画とWebbingStudio様の豪華コラボレーションTOP / 個別記事 / プロフィール、リンク / カテゴリー /
- ブログで小説！
- 2007-07-23(Mon) 00:48
- △
Comment
Re:website003（collaboration with Glim.）
何というか、お世辞抜きで凄い出来映えですよね。
画像をここまで駆使して、トータルバランスの素晴らしさがものすごいですよ。
登録されたら早速使わせていただきます。(^ー^)
あっ！それから私はIE7何ですが、コメントフォーム部分がちょっと記事の下（TOP BACKあたりが二重で出てます）で重なっているため、名前とタイトル、メアドの入力が出来ないですね。
多分、フォームをもう少し下げてやれば大丈夫だと想像（笑）
後は全然違和感なく、デザインに魅了されてます。(^ー^)
それから、イラスト販売ですが、初めての売買手続きが分かりましたので、ファイルを送ってみました。
ちゃんと届いているかな？
実のところ、ダウンロード販売と言うのがどういう工程で行うのかFC2の場合、実感が持てず、テスト的にも助かりました。
なので入金しなくても良いです。（テンプレートで儲けた時にでもドッとお願いします（笑））
まだまだ寒い札幌ですが、体調には十分気を付けて仕事と夢に向かってファイトして下さい。
あれ？IE7では送信ボタンが無い（FOXでは大丈夫なのでこちらから送ります）
ず、頭痛が…（´Д｀；
もう送金してしまいましたので、美味しいケーキでも食べてください〜
共有に配布しているものはプラグイン非対応ですので、有希之武さんにはフルバージョンを後日お送りしますね。
＞IE7
とりあえずネットでForm関連のバグが報告されてないか調べたんですが…
ないみたい（泣）
特に送信ボタンに関しては、何も変わったことをしていないので、非表示になる理由がわかりません（あ…FC2側でブロックしてるとか？＾＾；）。
今日の時点で、このサイトを閲覧している人のバージョン7保有率は、IE全体の18%です。
そろそろ対応が必要そうです。
いちばんいいのはIE7betaのスタンドアローン版を使用することなのですが、不具合が出ることがあるらしく、現状では本体を7betaにバージョンアップして6のスタンドアローン版を使うという対応になると思います。
まだまだvista版との差異の問題なんかも出てくるのですが、空いている時間を使って順次対応してみます。
それでは、有希之武さんも夏バテしないよう、ご自愛くださいませ。
XP版IE7に対応しました
コメントとトラックバックに「height: 1%;」を指定していたのが原因だったようです。
height: n%;のテクニックはIEでの背景欠けを回避するのに便利だったんですけど、7ではまともに解釈してしまうんですね。
アンダースコアハックで対処しました。
それにしても、IE7はボタンの位置が大幅に変わってて使いづらい…
Re:website003（collaboration with Glim.）
ウェビンブログにアクセスしてみて、あまりの変わり映えに驚きました。別のサイトにアクセスしたのかと（笑）。
こうも画像を駆使して、うるさくならずに“華やか”に出来るのですね。
右擬似フレームのスクロールバー上部に花の画像が被っていたり、下部はフッターの下に隠れるようになっている…「CSSと透過画像でこんなことまで」と感心してしまいました。
今後も新作を楽しみにしております。
透過画像テクは楽しいですよ
Twitterではいつも駄文を散らかしておりすみません。
＞別のサイトにアクセスしたのかと
自分のサイトを立ち上げた頃からカスタマイズが好きで、改装するたびに「サイト間違えたのかと思いました」などと言われています（笑）
透過画像を使ったCSSテクは何度か挑戦しているのですが、今回のような大掛かりなものは初めてですね。
透過png非対応のIE6にはgifをあてがうか、DirectXを併用するかで悩みました。
（後者ではきちんと表示できないことがあるので、結局gifを別途用意しました）
本文枠の上に、シールのように何かを飾り付けるだけでも、面白い効果が得られるものですね。
Re:website003（collaboration with Glim.）
ちょっと気になったのですが、ウェビンブログにwebsite003を適用して閲覧しておりますと、時として擬似フレームの方ではなく、ページ自体のスクロールバーが表示されてしまいます。そして、下にスクロールすると、コンテンツと同じぐらいの空白が出来ていました。
どのような状況でスクロールバーが表示されるのかは、よく分かりません。
もしかすると、仕様でしょうか。
閲覧環境は、OS: Windows XP、ブラウザ: Opera 9.21、画面サイズ: 1024×768 です。
Twitterでの書き込みは楽しみにしてますよ。新作「website003」もTwitterで知りました。
現象確認しました
情報ありがとうございます。
Opera8.5で確認してみたところ、「ズーム機能」で大きさを変更すると、それ以降ページを移動するまでは、ご指摘の「画面下に大きな空白ができる」状態になります。
同様にズーム機能があるIE7ではこの現象は発生しないので、どうもOpera独自の不具合であるようです。
ちょっと解決策は今のところ分かりません…すみません（´−｀)
website3はセリフ体を適用しているためか、Operaだと英語交じりの文章に乱れが見られます。
positionプロパティを多用しているので、IE6では文章の選択が上手くいきません。
（簡単にコピーされないので小説向けと言えるかもしれませんが 笑）
各ブラウザの性能が向上したとはいえ、全ての閲覧環境に対応するのは難しいものですね。
Re:website003（collaboration with Glim.）
FireFoxでは正常です。ばっちぐーです。
えっと…なんでしたっけ
position:absolute;とoverflow:auto;を一緒に指定するとなるんでしたっけ？
回答お願いしますー
これからもデザインがんばってください。
応援しております。
IE7でもバグ？
InternetExplorer6の場合、position: absolute;を指定した要素はきちんと文章を選択できなくなります。
website003は枠を画面中央に寄せるために絶対配置を使っているので、この現象は避けられません（；_；）
（普段は絶対配置を避けているのですが、今回は見栄えを優先しました）
私の環境下でのIE7（XP版）でテストしたときは普通に選択ができたので、てっきりあのバグは直っているものと思ったのですが…
hiroさんのIE7は、vista版ですか？違いますよね…謎が謎を呼ぶ…
応援嬉しいです（-人-）ありがとうございます
これからも宜しくお願いいたします。
Re:website003（collaboration with Glim.）
左右だけなら簡単なんですけど、なにか良い方法はないんですかねぇ、中央配置は見栄えがよくて好きなんですが…orz
Sleipnirを使ってるもので、ぱっと見ではIE6か7かわからなかったのですが、もしかしたらまだIE6なのかもしれません。xpなので、きっとそうです、すみません。。
IE7だと直ってるんですか、IEも進歩しましたね（笑
こんばんは。
阿壇さんこんばんは
あちらでレスしますね〜