とてつもなく目が痛い。
ウェブデザインの仕事が一気に3本ほど入り、昨日から家に缶詰でデザインの作業を続けているけれど・・全く終わる気配が無い。
すでに14時間ほどパソコンとお見合いを続けてます。
自分はこう、気持ちの切り替えというのが遅い人間なので、たとえば人間関係で言えば女の子にフラれたら２〜３ヶ月はヘコんだままボケーッとしているようなタイプです。
これが嫌なことにデザインにも通じてしまうようで、デザインも1本おわったら、ハイ次！っていうワケにはいかず、どうしても前にやっていたデザインの名残というか、影響が出てしまったりするんですよね。
おかげで明日までに2つ、ラフデザインをあげなければならない状況だというのに、まだ1本しかできてない・・。
明日の提出期限は朝9時、とりあえずもう・・久しぶりの徹夜かなぁ・・。
ウェブデザインの仕事が一気に3本ほど入り、昨日から家に缶詰でデザインの作業を続けているけれど・・全く終わる気配が無い。
すでに14時間ほどパソコンとお見合いを続けてます。
自分はこう、気持ちの切り替えというのが遅い人間なので、たとえば人間関係で言えば女の子にフラれたら２〜３ヶ月はヘコんだままボケーッとしているようなタイプです。
これが嫌なことにデザインにも通じてしまうようで、デザインも1本おわったら、ハイ次！っていうワケにはいかず、どうしても前にやっていたデザインの名残というか、影響が出てしまったりするんですよね。
おかげで明日までに2つ、ラフデザインをあげなければならない状況だというのに、まだ1本しかできてない・・。
明日の提出期限は朝9時、とりあえずもう・・久しぶりの徹夜かなぁ・・。
長々と休んでしまっているこのブログ。
この2ヶ月いろいろとあって更新できずじまいでまたダラダラとのばしてしまいましたよ。
まずこのブログを移設しようか考え中。
なんかレンタルブログっていうのもいいんだけれど、それ以上にいま魅力を感じているのが設置型のブログ。
やっぱり自分の独自ドメインでブログ運営してみてー！ってのもあるし、なにより機能や見た目をホントに自由にカスタマイズできるっていうのが一番の利点だと思うんすよねー。
FC2は本当に良くできてるし、カスタマイズも簡単で便利なんだけれど・・なんというか、やっぱりレンタルしているっていう感じが否めない！！
ドメインもやっぱりblog58とか尽くし、FTPでデータいじれないからアップロードしたファイルの管理ってのも難しい。
そこら辺がだんだん我慢できなくなってきて、移行という考えがじわりじわりと浮かんできた次第です（笑
ただ移行するにしても候補が多すぎてそこも悩みどころ。
大流行のmovable typeはなかなか良いと思ったんだけれど、PERL言語で書かれてて、なにより再構築とかいう手間のかかる作業があるっていう辞典で却下＾＾；
いま移行の候補に考えているのは、海外じゃmovable typeをブチ抜いて流行しているというwordpress。
こっちはオレの大好きなPHPで作られていて、中身を見てもなんかなじみやすくて好き・・・なんだけれど、いかんせん日本語の情報が少なすぎて、情報収集だけで疲れるという（´；ω；｀）
ほかにもnucleusというCMSも見つけたのだけれど、こちらは日本語のコミュニティが本当に充実していて、PHPのソースもwordpressよりもきれいで見やすくてカスタマイズもしやすそうなんだけれど、スキンのカスタマイズが非常に面倒くさいという欠点があるようで・・・。
なんか肌に合わなそうなのでちょっと引き気味。
なんかそんなので悩んでいると1日PCの前でだらだらしてても答えがでませ〜ん。
さぁ、どうしたものか。
この2ヶ月いろいろとあって更新できずじまいでまたダラダラとのばしてしまいましたよ。
まずこのブログを移設しようか考え中。
なんかレンタルブログっていうのもいいんだけれど、それ以上にいま魅力を感じているのが設置型のブログ。
やっぱり自分の独自ドメインでブログ運営してみてー！ってのもあるし、なにより機能や見た目をホントに自由にカスタマイズできるっていうのが一番の利点だと思うんすよねー。
FC2は本当に良くできてるし、カスタマイズも簡単で便利なんだけれど・・なんというか、やっぱりレンタルしているっていう感じが否めない！！
ドメインもやっぱりblog58とか尽くし、FTPでデータいじれないからアップロードしたファイルの管理ってのも難しい。
そこら辺がだんだん我慢できなくなってきて、移行という考えがじわりじわりと浮かんできた次第です（笑
ただ移行するにしても候補が多すぎてそこも悩みどころ。
大流行のmovable typeはなかなか良いと思ったんだけれど、PERL言語で書かれてて、なにより再構築とかいう手間のかかる作業があるっていう辞典で却下＾＾；
いま移行の候補に考えているのは、海外じゃmovable typeをブチ抜いて流行しているというwordpress。
こっちはオレの大好きなPHPで作られていて、中身を見てもなんかなじみやすくて好き・・・なんだけれど、いかんせん日本語の情報が少なすぎて、情報収集だけで疲れるという（´；ω；｀）
ほかにもnucleusというCMSも見つけたのだけれど、こちらは日本語のコミュニティが本当に充実していて、PHPのソースもwordpressよりもきれいで見やすくてカスタマイズもしやすそうなんだけれど、スキンのカスタマイズが非常に面倒くさいという欠点があるようで・・・。
なんか肌に合わなそうなのでちょっと引き気味。
なんかそんなので悩んでいると1日PCの前でだらだらしてても答えがでませ〜ん。
さぁ、どうしたものか。
こないだテンプレートを作った勢いで、このブログのスキンも改造して、バージョン2に変更しました。前に使っていたスキン（バージョン1）も残っているので、ちょっと手直しして、これもテンプレート登録しようかなぁ・・と思ってたりします。
ただ、なんかデザイナーの性分というか、ただのこだわりかもしれないんですが、特にWEBの世界だと「他人が作った物」っていうのはどうも気に食わないんですよねぇ。自分が作った「世界に1つしかない」デザインっていうのがやっぱり一番です。
というわけなので、似たようなデザインになってしまう過去のテンプレート、どうしようか少し悩んでいたり〜。どーするかなぁ＾＾；
閑話休題−−−−−。
今回使っているスキン、初めてCSSハックってのを利用しました。CSSハックっていうのは、各ブラウザ（IE、Firefox、Opera、Netscape等々）でのデザインの差を埋めるために考案された、いわゆるCSSの裏技みたいなものです。
使えば非常に便利で、たとえばバージョン5.0〜6.0のIEにだけ有効なCSSを設定したり、逆にIE以外のモダンブラウザ（Firefox、Opera等）だけに有効なCSSを設定したりというのが簡単に行えます。
たぶん、昨今のCSSデザインに移行した大規模なサイトでは必ず使われているテクニックなんじゃないでしょうかね(･ω･)
つーわけで以前からCSSハックっていうのは知っていたんですが、どうしても「裏技」っていうのが気にくわなくて使う気になれなかったんですよね。ハックの種類にはいろいろとあるんですが、たとえばその中の1つであるホーリーハックなんていうのを使ったりすると、構文エラーでW3CのCSS Validaterに通らなくなったりもします。
ただ、今回のスキンを作るに当たってどうしても回避できない問題があって、初めてCSSハックを使いました。使ったのはハックとして使っても構文エラーにならない、比較的シンプルな子孫要素ハックというもの。
これはIE以外のモダンブラウザのみに対応するハックで、構文的にも問題無いので、W3CのCSS Validaterにも問題無く通ります。具体的には、
これで、IEでは設定したタグの下部に5pxのマージンが空き、IE以外のモダンブラウザでは、上部に5pxのマージンが空くような感じになります。
一応日付表示の箇所にこんなハックを使って、今回のスキンは作ってみました。
最初は毛嫌いして使ってなかったんですが、よくよく考えたらW3CのCSS Validaterに通る通らないが大事なのではなく、一番大事なのはお客さんの環境すべてで同等に表示されるっていうことなんですよね。
極論で言えば、見る人（エンドユーザ）からしたら構文なんかどうでもよく、要は意図したとおりに表示されているかされていないかだけであって。その部分を、どうに妥協するかがある意味ウェブデザイナーの柔軟性のような気がします。
ValidなHTMLも確かに良いとは思いますが、まずは見る人が何を求めているか、を考えるべきですね。たぶんそれは、未だにtableタグがレイアウトに使われ続けているという話にもつながる気がします。
まずは、見る人の立場を。
・・これからのウェブデザイン、CSSハックは使いまくりでいく予感(･∀･)
CSSハックの詳細は以下のサイトが詳しいです。
BLOG WORLD ENDING
CSS Dancitie
CodeWeb:ブラウザ別CSSハック一覧表
ただ、なんかデザイナーの性分というか、ただのこだわりかもしれないんですが、特にWEBの世界だと「他人が作った物」っていうのはどうも気に食わないんですよねぇ。自分が作った「世界に1つしかない」デザインっていうのがやっぱり一番です。
というわけなので、似たようなデザインになってしまう過去のテンプレート、どうしようか少し悩んでいたり〜。どーするかなぁ＾＾；
閑話休題−−−−−。
今回使っているスキン、初めてCSSハックってのを利用しました。CSSハックっていうのは、各ブラウザ（IE、Firefox、Opera、Netscape等々）でのデザインの差を埋めるために考案された、いわゆるCSSの裏技みたいなものです。
使えば非常に便利で、たとえばバージョン5.0〜6.0のIEにだけ有効なCSSを設定したり、逆にIE以外のモダンブラウザ（Firefox、Opera等）だけに有効なCSSを設定したりというのが簡単に行えます。
たぶん、昨今のCSSデザインに移行した大規模なサイトでは必ず使われているテクニックなんじゃないでしょうかね(･ω･)
つーわけで以前からCSSハックっていうのは知っていたんですが、どうしても「裏技」っていうのが気にくわなくて使う気になれなかったんですよね。ハックの種類にはいろいろとあるんですが、たとえばその中の1つであるホーリーハックなんていうのを使ったりすると、構文エラーでW3CのCSS Validaterに通らなくなったりもします。
ただ、今回のスキンを作るに当たってどうしても回避できない問題があって、初めてCSSハックを使いました。使ったのはハックとして使っても構文エラーにならない、比較的シンプルな子孫要素ハックというもの。
これはIE以外のモダンブラウザのみに対応するハックで、構文的にも問題無いので、W3CのCSS Validaterにも問題無く通ります。具体的には、
.sample {
margin: 0 0 5px;
}
html>.sample {
margin: 5px 0 0;
}
というような感じですかね。margin: 0 0 5px;
}
html>.sample {
margin: 5px 0 0;
}
これで、IEでは設定したタグの下部に5pxのマージンが空き、IE以外のモダンブラウザでは、上部に5pxのマージンが空くような感じになります。
一応日付表示の箇所にこんなハックを使って、今回のスキンは作ってみました。
最初は毛嫌いして使ってなかったんですが、よくよく考えたらW3CのCSS Validaterに通る通らないが大事なのではなく、一番大事なのはお客さんの環境すべてで同等に表示されるっていうことなんですよね。
極論で言えば、見る人（エンドユーザ）からしたら構文なんかどうでもよく、要は意図したとおりに表示されているかされていないかだけであって。その部分を、どうに妥協するかがある意味ウェブデザイナーの柔軟性のような気がします。
ValidなHTMLも確かに良いとは思いますが、まずは見る人が何を求めているか、を考えるべきですね。たぶんそれは、未だにtableタグがレイアウトに使われ続けているという話にもつながる気がします。
まずは、見る人の立場を。
・・これからのウェブデザイン、CSSハックは使いまくりでいく予感(･∀･)
CSSハックの詳細は以下のサイトが詳しいです。
BLOG WORLD ENDING
CSS Dancitie
CodeWeb:ブラウザ別CSSハック一覧表
えー、ついにブログテンプレート第一弾となる、「METAL HEARTS」を公開しました。（8/8日現在では、まだ共有テンプレートには登録されていないですが・・）
思い立ってから制作に2日、途中でIE6の表示が崩れまくってデザインにハマり、趣味なのになぜか半分徹夜みたいな感じで作ってました＾＾；
テンプレートの制作は、今使っているテンプレートに続いて2本目ですが、1回作るとハマりますねこれ。テンプレート職人さんの気持ちがわかる気がします・・。
適用プレビュー
以下、こちらで公開しているテンプレートに関するルールと、簡単な仕様を明記しておきます。
まだまだいろいろと量産しますよ(｀・ω・´)
2006/08/11 追記
たった2日で400件以上もダウンロードがあったようで、非常に嬉しい限りです。週間ランキングにも入ったようで＾＾；
今後ともいろいろと作っていきますので、よろしくお願い致します。
CSSにいろいろと不具合があったので、それを修正しました。HTMLも併せて修正していますので、8/11日のam0:30以前にダウンロードされた方は、再度テンプレートをダウンロードしてください。致命的な不具合はないですが、表示がおかしい・ユーザービリティが低いなどありますので、よろしくお願いします。
修正箇所は以下です。
1. カレンダーから記事に飛んだ際、空枠が記事下部に表示されていた問題の修正
2. 公式プラグインであるカレンダーが正しく表示されない(画面からはみ出る）問題の修正
3. ページトップへ戻るボタンを、トラックバック表記の下にも追加
4. トラックバックとコメントを受け付けない設定の際、トップへ戻るボタンが左にズレる問題の修正
2006/08/12 追記
imgタグ周りのCSSを修正しました。文章中に顔文字などを使った場合も、画像の周りにボーダーが出てしまう現象をなおしました。
2006/10/04 追記
インデックスページ以外のカテゴリ・日付表示の際に、次ページへのリンクが表示されない不具合を解消しました。また、コメントのタイトルや内容が編集できない不具合についても同時に修正をしています。
思い立ってから制作に2日、途中でIE6の表示が崩れまくってデザインにハマり、趣味なのになぜか半分徹夜みたいな感じで作ってました＾＾；
テンプレートの制作は、今使っているテンプレートに続いて2本目ですが、1回作るとハマりますねこれ。テンプレート職人さんの気持ちがわかる気がします・・。
適用プレビュー
以下、こちらで公開しているテンプレートに関するルールと、簡単な仕様を明記しておきます。
- テンプレートの概要
- テンプレートデビュー作です。夏とゆーことで、セクシーでクールっぽいのが良いなぁ・・と思って作ってみました。
とりあえずデザイン的には、綺麗にまとまったかな〜・・なんて思ってます。 - 対応している機能
- プラグインに対応しています。公式からダウンロードできるプラグインに関しては、ほぼ問題なく使用可能です。共有プラグインからダウンロードしたものは、class指定、id指定が専用の物を記述している場合があるようなので、そちらは適当にCSSを改造して使ってください。
また、以下のタグをデフォルトで変更しています。- <ul><li>〜</ul><ul>タグ
- <dl><dt>〜</dt><dd>〜</dd></dl>タグ
上記タグを記事中に使う事で、見栄えの良いリスト構造で表示できます。
また、imgタグに関してIE以外のブラウザで、画像外枠のhover疑似クラスを対応させています。IE対応が非常に面倒だったので、IEの方の対応はしていません。申し訳ないです・・。 - 改造・再配布について
- テンプレートの改造は特に問題ありません。好きなように改造してもらって全然OKですが、著作権表示の削除は厳禁です。
また改造したテンプレートの再配布は原則として認めていません。改造した物は、そのままダウンロードしたユーザー様個人でのみご利用下さい。
また、私が公開しているテンプレートに関して、不具合や不明な点があれば、コメント欄等にお気軽に書き込みをお願いします。ただ、改造に関するHTMLやCSSの初歩的な質問には一切お答えできません。
「リンクにアンダーラインをつけたいんですが、どうすればいいですか？」等の簡単な質問はHTML、CSSの参考書をご覧ください。
まだまだいろいろと量産しますよ(｀・ω・´)
2006/08/11 追記
たった2日で400件以上もダウンロードがあったようで、非常に嬉しい限りです。週間ランキングにも入ったようで＾＾；
今後ともいろいろと作っていきますので、よろしくお願い致します。
CSSにいろいろと不具合があったので、それを修正しました。HTMLも併せて修正していますので、8/11日のam0:30以前にダウンロードされた方は、再度テンプレートをダウンロードしてください。致命的な不具合はないですが、表示がおかしい・ユーザービリティが低いなどありますので、よろしくお願いします。
修正箇所は以下です。
1. カレンダーから記事に飛んだ際、空枠が記事下部に表示されていた問題の修正
2. 公式プラグインであるカレンダーが正しく表示されない(画面からはみ出る）問題の修正
3. ページトップへ戻るボタンを、トラックバック表記の下にも追加
4. トラックバックとコメントを受け付けない設定の際、トップへ戻るボタンが左にズレる問題の修正
2006/08/12 追記
imgタグ周りのCSSを修正しました。文章中に顔文字などを使った場合も、画像の周りにボーダーが出てしまう現象をなおしました。
2006/10/04 追記
インデックスページ以外のカテゴリ・日付表示の際に、次ページへのリンクが表示されない不具合を解消しました。また、コメントのタイトルや内容が編集できない不具合についても同時に修正をしています。
ブログテンプレートをちまちまといじり、とりあえず暫定ながらXHTML1.0 Transitional＋CSSのデザインに移行完了。本当はXHTML1.1にしたかったんですがブログだと制約が厳しすぎて断念。
FC2ブログが勝手に入れる広告のタグの部分がどうしようもなくて、W3CのCSS Validaterは通ったんですが、Markup Validaterには通らなかったのがちょっと悔しい。
XHTML化で気になった点を、忘れないうちにメモメモφ(｀д´)
いろいろと変更点が多くて最初は結構とまどった・・＾＾；
一度XHTMLで作った後はもう、覚えるしかないんだろうなぁと割り切って納得できましたが。
とりあえず作ってなれるしかなさそうなので、FC2ブログのスキンを2個ほど作成中。なんかガビョウとか紙の切れ端をスキャナで読んで遊んでて出来ちゃったのが1つと、アメーバブログにあってかっこいいな〜と思ったスキンを「インスパイア」したものが1つ。
とりあえずコレも全部、XHTML＋CSSで完璧にやるぞー！と意気込んでやってます。
ちなみにFirefoxの拡張で超便利な物を発見。
以下引用 by Valid！なXHTMLを学ぶ
こういうかゆいところに手が届く拡張が多いから、やっぱりWEBデザインをするときはFirefoxが良いっすね！
ちなみに・・FC2ブログの自動挿入タグはなんとかならないんだろうか・・。<br>タグはちゃんとXHTML風に<br />になるのに、imgタグとかはなぜか<img src="〜" border="0">になるという。
統一しろよ！！
XHTMLの書き方と留意点
XHTMLでマークアップする際の簡単な留意点をまとめてあります。こちらも見ておくとXHTMLにするときに役立つかも。
XHTML仕様書
XHTMLの仕様書原文（英語）
いくつかの覚え書き
XHTML1.0や1.1、また1.0〜4.01までのHTMLの仕様などを参照できる。
FC2ブログが勝手に入れる広告のタグの部分がどうしようもなくて、W3CのCSS Validaterは通ったんですが、Markup Validaterには通らなかったのがちょっと悔しい。
XHTML化で気になった点を、忘れないうちにメモメモφ(｀д´)
- target属性が非推奨（禁止）属性に
- <a>タグのプロパティで、リンクをクリックする際に新しくウィンドウを開くなどの指定をしていたtarget="〜"プロパティが、XHTML1.0 Transitionalでは非推奨に（ホントはHTML4.01から非推奨？）、XHTML1.1では使用禁止に。
- name属性が非推奨（禁止）属性に
- <a>、<img>、<form>、<map>タグのプロパティで、ページ内リンクを張る際に使っていたname="〜"属性が非推奨要素に。XHTML 1.1では使用禁止に。ただ、<input>タグや<textarea>タグなど、<form>要素の部品になるタグでは使用可能。今後ページ内リンクを張る場合は、id属性を使用して張る。ただ、XHTML1.0の場合はid属性によるページ内リンクに対応していない場合もあるので、idとname属性を同じ値にして設定することが多い・・らしい。
- タグやタグの属性名、属性値などは全て小文字
- タグ名やタグの属性名、属性値は全て小文字で表記する。<A HREF="〜">というのはダメで、<a href="〜">という表記が正しい。また、CSSなどの色指定部分も小文字にする必要があるらしい。よく#FF33EEというのがあるけれど、これも#ff33eeにする必要があるとのこと。
- 全てのタグには閉じタグを使用する
- <p>タグや<li>タグなど、閉じタグ（</p>とか</li>とか）が有っても無くてもOKだったタグも、全て閉じタグを使用する。ここら辺はいつも使ってたからそんなに違和感は・・無いかも。
- 空タグも閉じる
- XHTMLのソースで一番特徴的なんじゃないだろうか。<img>タグや<br>タグも、全てスラッシュを付けて閉じなくてはならない。<img src="〜" alt="〜" />とか<br />みたいな。コレが結構面倒だった・・。
- 属性値はかならずダブルクォートで囲む
- タグの属性値は、HTMLだとダブルクォートで囲もうが囲むまいがOKだったのが、必ず囲まないとダメになった。<img width=430 height=200>とかはダメで、<img width="430" height="200">とかが正しい。
- 非推奨タグや要素がいろいろと
- これはXHTMLの前にも、HTMLでも非推奨だと言われていたタグ。とりあえずリストアップ。たぶん網羅しきれてない＾＾；
- <b>タグ
- <i>タグ
- <u>タグ
- <s>タグ
- <center>タグ
- <applet>タグ
- <frame>タグ
- <frameset>タグ
- <iframe>タグ
- align要素（<div align="center">とか)
- bgcolor要素(<body bgcolor="〜">とか)
- border要素(<img border="1">とか)
いろいろと変更点が多くて最初は結構とまどった・・＾＾；
一度XHTMLで作った後はもう、覚えるしかないんだろうなぁと割り切って納得できましたが。
とりあえず作ってなれるしかなさそうなので、FC2ブログのスキンを2個ほど作成中。なんかガビョウとか紙の切れ端をスキャナで読んで遊んでて出来ちゃったのが1つと、アメーバブログにあってかっこいいな〜と思ったスキンを「インスパイア」したものが1つ。
とりあえずコレも全部、XHTML＋CSSで完璧にやるぞー！と意気込んでやってます。
ちなみにFirefoxの拡張で超便利な物を発見。
以下引用 by Valid！なXHTMLを学ぶ
Firefox 拡張であるHTML Validatorをダウンロードし、My Computer に取り込みました！
ページを観覧すると同時に（Ｘ）ＨＴＭＬ構文チェックをしてくれるという優れものです。
ＸＭＬ表示と同様にタスクバー（トレイ）右下に収まります。
ページを観覧すると同時に（Ｘ）ＨＴＭＬ構文チェックをしてくれるという優れものです。
ＸＭＬ表示と同様にタスクバー（トレイ）右下に収まります。
こういうかゆいところに手が届く拡張が多いから、やっぱりWEBデザインをするときはFirefoxが良いっすね！
ちなみに・・FC2ブログの自動挿入タグはなんとかならないんだろうか・・。<br>タグはちゃんとXHTML風に<br />になるのに、imgタグとかはなぜか<img src="〜" border="0">になるという。
統一しろよ！！
XHTMLの書き方と留意点
XHTMLでマークアップする際の簡単な留意点をまとめてあります。こちらも見ておくとXHTMLにするときに役立つかも。
XHTML仕様書
XHTMLの仕様書原文（英語）
いくつかの覚え書き
XHTML1.0や1.1、また1.0〜4.01までのHTMLの仕様などを参照できる。