Webデザ素人の自己鍛錬、自己啓発＆自己満足
まだまだひよっこです。
このページは「2007年06月」のエントリ一覧です。
2007/06/29 23:38
印刷用CSSでバグ連発
ブログリニューアル-その11
今日はトップページの印刷用CSSだけ制作。
そしてIE6，fx2，Opera9，NN7で問題が無い事を確認。
ただ制作中にはプレビュー画面においていくつか問題が出てこられたので、全てを書きとめさせてたも。
1．IE6で背景画像が表示されない
2．fx2で1ページしかプレビューできない
3．NN7でページ全体が左側に移動していて、右半分しか表示されない
まず1から。
参考：AIRE-PROJECT BLOGさんのIE6で背景を印刷するより
これは背景画像にrepeat以外を指定して、尚且つwidthやheightを指定しないと起こるIE6でのバグとのこと。相変わらずIE6は厄介だ
まぁ印刷用だから極力画像を減らしたほうがいいだろうし、背景画像は全部 display: none; で消しちゃったい。
続いて2。
参考：もじら組さんのトピックより
position:absolute; を使ってると起こるfirefoxのバグ、ということで position を static に変えたら無事に全ページプレビューできた。
Ver1時代からあるバグみたいだから早く直して欲しいねぇ。
最後は3。
これは結局原因が分からず。
ただページ全体のマージンを左にいくらか取ったら解決できた（他のブラウザでも問題なし）から、まぁいいやーってそんな感じ。
いつも一番厄介な存在だったOperaが今回は大人しかったなぁー。
これからもこのままでいて欲しいｗ
今日はトップページの印刷用CSSだけ制作。
そしてIE6，fx2，Opera9，NN7で問題が無い事を確認。
ただ制作中にはプレビュー画面においていくつか問題が出てこられたので、全てを書きとめさせてたも。
1．IE6で背景画像が表示されない
2．fx2で1ページしかプレビューできない
3．NN7でページ全体が左側に移動していて、右半分しか表示されない
まず1から。
参考：AIRE-PROJECT BLOGさんのIE6で背景を印刷するより
これは背景画像にrepeat以外を指定して、尚且つwidthやheightを指定しないと起こるIE6でのバグとのこと。相変わらずIE6は厄介だ
まぁ印刷用だから極力画像を減らしたほうがいいだろうし、背景画像は全部 display: none; で消しちゃったい。
続いて2。
参考：もじら組さんのトピックより
position:absolute; を使ってると起こるfirefoxのバグ、ということで position を static に変えたら無事に全ページプレビューできた。
Ver1時代からあるバグみたいだから早く直して欲しいねぇ。
最後は3。
これは結局原因が分からず。
ただページ全体のマージンを左にいくらか取ったら解決できた（他のブラウザでも問題なし）から、まぁいいやーってそんな感じ。
いつも一番厄介な存在だったOperaが今回は大人しかったなぁー。
これからもこのままでいて欲しいｗ
2007/06/28 21:33
マルチディスプレイっっ
無事に！
無事にマルチディスプレイになれたー！
片方でdreamweaverやfireworks、もう片方でブラウザでの確認、って便利だなぁ。
これはもう元の環境には戻れないかもしれん。
そいでこっちはビデオカード。
今までオンボードの865Gだったから、そこら辺で売ってるのならどれを買っても性能Upって感じだったんだけど、350Wっていう電源が心許ないのと、ゲームとか殆どやらないから3Dとか別にいいし、なにより安く済ませたいってことで条件を絞っていったら最後に残ったのがこの6200A。
ただ立ち上げ時に若干不安定な感じがあるんだよなぁ、やっぱ電源が足らないのかな
ブログリニューアル-その10
さて、さりげなく↑でアイコンを使ってるように、エントリーのほうでもアイコンを使えるようにテンプレを修正。
さぁ、残すは印刷用のページを作るだけっラストスパートいきまっせ！
無事にマルチディスプレイになれたー！
片方でdreamweaverやfireworks、もう片方でブラウザでの確認、って便利だなぁ。
これはもう元の環境には戻れないかもしれん。
そいでこっちはビデオカード。
今までオンボードの865Gだったから、そこら辺で売ってるのならどれを買っても性能Upって感じだったんだけど、350Wっていう電源が心許ないのと、ゲームとか殆どやらないから3Dとか別にいいし、なにより安く済ませたいってことで条件を絞っていったら最後に残ったのがこの6200A。
ただ立ち上げ時に若干不安定な感じがあるんだよなぁ、やっぱ電源が足らないのかな
ブログリニューアル-その10
さて、さりげなく↑でアイコンを使ってるように、エントリーのほうでもアイコンを使えるようにテンプレを修正。
さぁ、残すは印刷用のページを作るだけっラストスパートいきまっせ！
2007/06/27 21:07
ブログリニューアル-その9
今日もヒヨコのアイコンをいくつか追加。
エントリーページでのバグはちょっとやる気が出なかったから後回しｗ
っていうかそんなこたーどうでも言いのだ今日は。
待ちに待った液晶モニタ到着～！しかも2台！アーンドVGA！
マルチディスプレイに挑戦でぃ！
ただ電源が足りるか微妙だから、もしかしたら電源ユニットも買わんといけないかなぁという不安もありつつ、これからPCケースご開帳～！
エントリーページでのバグはちょっとやる気が出なかったから後回しｗ
っていうかそんなこたーどうでも言いのだ今日は。
待ちに待った液晶モニタ到着～！しかも2台！アーンドVGA！
マルチディスプレイに挑戦でぃ！
ただ電源が足りるか微妙だから、もしかしたら電源ユニットも買わんといけないかなぁという不安もありつつ、これからPCケースご開帳～！
2007/06/26 21:10
ブログリニューアル-その8
モニタが見づらいから長い事画面を見続けるのもキツイんで、今日は細かいところを少しだけ。
まずはコメントフォームにアイコンの追加。
ちょっと前からコツコツ書いていたヒヨコの画像がやっと日の目を見ることに！
細かいやり方は忘れたけど、このブログを始めるずっと前にムーバブルタイプを弄り倒してたときがあって、その時のプラグインがそのまま残ってたからあとは画像へのアドレスを変えるぐらいの簡単な作業。
とりあえずリンクを載っけとこ。
本家
MT Smileys
参考：21世紀のアフィリエイト通販生活さん
コメントとエントリー投稿で画像（絵文字）を使う
このMT Smileysはエントリー投稿画面（いわゆる管理画面）でも使うことができるんだけど、いや、できてたんだけど、何故かバグってるからそのまま放置中ｗ
これは明日のお仕事にしようかしら。
今日の弄りどころもう一つは検索フォームの追加。
場所はどこにしようか～って迷ったけど、やっぱりこういうのって上に置くのが基本だろうし、ってことで空白ありまくりの真ん中・・を避けて敢えて右上に。
このムーバブルタイプ3.xデフォの検索テンプレって内容がさっぱり分かんないから、削りに削ってたらかなりシンプルなものになってしまた。
さーて明日か明後日にモニタが届くらしい～楽しみ！
まずはコメントフォームにアイコンの追加。
ちょっと前からコツコツ書いていたヒヨコの画像がやっと日の目を見ることに！
細かいやり方は忘れたけど、このブログを始めるずっと前にムーバブルタイプを弄り倒してたときがあって、その時のプラグインがそのまま残ってたからあとは画像へのアドレスを変えるぐらいの簡単な作業。
とりあえずリンクを載っけとこ。
本家
MT Smileys
参考：21世紀のアフィリエイト通販生活さん
コメントとエントリー投稿で画像（絵文字）を使う
このMT Smileysはエントリー投稿画面（いわゆる管理画面）でも使うことができるんだけど、いや、できてたんだけど、何故かバグってるからそのまま放置中ｗ
これは明日のお仕事にしようかしら。
今日の弄りどころもう一つは検索フォームの追加。
場所はどこにしようか～って迷ったけど、やっぱりこういうのって上に置くのが基本だろうし、ってことで空白ありまくりの真ん中・・を避けて敢えて右上に。
このムーバブルタイプ3.xデフォの検索テンプレって内容がさっぱり分かんないから、削りに削ってたらかなりシンプルなものになってしまた。
さーて明日か明後日にモニタが届くらしい～楽しみ！
2007/06/25 21:26
モニタのスペックを意識したサイト作り
液晶モニタがお亡くなりになりました。
代わりに今はむかーし使ってたCRTを引っ張り出してなんとかやってるけど、解像度が1024＊768（液晶は1280*1024）だったりサイズが2インチ小さかったりで全く別の世界を見ているよう・・。
特に何このブログ。
黒バックに白文字って。
見にくいったらありゃしない！作った人出てきなさい！
へぃ。
そっかー。見る人みんな環境が違うわけで、そういうこと考えるとホント大変な世界だね。正解ってモンがない。
今までブラウザの違いだけ意識してたけど、解像度とかコントラストとかも意識していくべきなんかなぁ。
サイトの横幅は800px辺りが適当、ってなんかの本に書いてあったけど確かにそうかもしんない。
いままで900～1000を目安に作ってたからそこも考えていかないとだ。
ただーしリニューアル後のブログが1100pxだったりするのは秘密。
ブログリニューアル-その7
今日は月別アーカイブページの制作。
これもコピペでほぼ終了。
あとはその月別ページと昨日作ったカテゴリページで、センター上部の「このブログについて」ってのをはずして、各月orカテゴリ名を表示するように変更。
なーんかこのモニタじゃやる気でないなぁ～贅沢覚えると碌な事ないね。
代わりに今はむかーし使ってたCRTを引っ張り出してなんとかやってるけど、解像度が1024＊768（液晶は1280*1024）だったりサイズが2インチ小さかったりで全く別の世界を見ているよう・・。
特に何このブログ。
黒バックに白文字って。
見にくいったらありゃしない！作った人出てきなさい！
へぃ。
そっかー。見る人みんな環境が違うわけで、そういうこと考えるとホント大変な世界だね。正解ってモンがない。
今までブラウザの違いだけ意識してたけど、解像度とかコントラストとかも意識していくべきなんかなぁ。
サイトの横幅は800px辺りが適当、ってなんかの本に書いてあったけど確かにそうかもしんない。
いままで900～1000を目安に作ってたからそこも考えていかないとだ。
ただーしリニューアル後のブログが1100pxだったりするのは秘密。
ブログリニューアル-その7
今日は月別アーカイブページの制作。
これもコピペでほぼ終了。
あとはその月別ページと昨日作ったカテゴリページで、センター上部の「このブログについて」ってのをはずして、各月orカテゴリ名を表示するように変更。
なーんかこのモニタじゃやる気でないなぁ～贅沢覚えると碌な事ないね。
2007/06/24 19:45
head内をlink要素で飾る
昨日はだらだらと長文を書いてホンマもんの素人ということを露呈させてしまったわけですけども、いやはや失敗から学ぶ事ってのは大きいもんですなぁ。
ところで！
コーディングコンテストの最優秀作品を見させてもらったんだけど、<head>内に<link>要素がわらわら書いてある。
今までなんとなくCSSのファイル指定とかで使ってたけど、そういやこのlink要素って何の意味があるのかってのを全然知らない。
ちなみにリニューアル後のブログのlink要素は（昨日現在）
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
の5つ。
一番上はファビコン、次がCSSファイルのアドレス。
その下の3つはMovableTypeにデフォで記述されているもの。あんまり意味がわかんないけどRSSとかで配信するためのものだとおもふ。
一応調べます。検索大好き。いざぐぐれ！
参考は
しらぎくさいとさんの
rel属性/rev属性(リンク先/リンク元との関係)。
relで指定されているalternateは代替文書。
RSSもAtomもそれぞれのページで更新情報を配信してるから、って意味でこの属性を使ってるのかな？
最後のEditURIに関しては他も調べたけど良く分からず。そもそもRSD自体分かってないｗ
さて話は戻って最優秀作品のlink要素。
<link rer="chapter"～ />
というのを多用している。
チャプター？
しらぎくさいとさんに書かれている内容からすると“章”とのことだけど、章ってなんだろう。
で、またぐぐる。
glas-gatherさんのlink要素
The Web KANZAKIさんのlink要素によるナビゲーション
によれば、このchapterにサイト内の各アドレスを記述する事で、対応するブラウザでそのサイトを見ればツールバーから一発で該当ページへジャンプすることが出来る、ということかな？
まだあまり理解は出来てないけど、分かったつもりで新しいlink要素を書いてみた。
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="author" href="http://hobbyblog.biz/design/69/index_3.html" title="自己紹介" />（追加）
<link rel="index" href="http://hobbyblog.biz/design/" title="素人のWebデザイントップページ" />（追加）
<link rel="chapter" href="http://hobbyblog.biz/design/2007/03/000087.html" title="このブログについて" />（追加）
<link rev="made" href="mailto:design△hobbyblog.biz" title="管理人へのメールはこちらから" />（追加）
こんな感じかなぁ。
別に趣味のサイトでここまでやる必要ないじゃんという気がしないでもないけど・・他にもいろいろあるから覚えようとすると大変だこりゃ。
ブログリニューアル-その6
前置き（というかどっちがメインかわかんなくなってるｗ）が長くなったけど、今日はカテゴリのページを制作。
エントリーページ同様コピペメインだからあっちゅーまに完成。
ただしfirefoxやoperaで見ると、エントリーが少なくて縦に短いページの場合、右に10pxほどズレるバグ？が出現。でも長くすると戻る。
よくわかんないけどコリャ放置でいいやｗ
明日はアーカイブページ、あとは検索と印刷用で終わりかなー。
ところで！
コーディングコンテストの最優秀作品を見させてもらったんだけど、<head>内に<link>要素がわらわら書いてある。
今までなんとなくCSSのファイル指定とかで使ってたけど、そういやこのlink要素って何の意味があるのかってのを全然知らない。
ちなみにリニューアル後のブログのlink要素は（昨日現在）
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
の5つ。
一番上はファビコン、次がCSSファイルのアドレス。
その下の3つはMovableTypeにデフォで記述されているもの。あんまり意味がわかんないけどRSSとかで配信するためのものだとおもふ。
一応調べます。検索大好き。いざぐぐれ！
参考は
しらぎくさいとさんの
rel属性/rev属性(リンク先/リンク元との関係)。
relで指定されているalternateは代替文書。
RSSもAtomもそれぞれのページで更新情報を配信してるから、って意味でこの属性を使ってるのかな？
最後のEditURIに関しては他も調べたけど良く分からず。そもそもRSD自体分かってないｗ
さて話は戻って最優秀作品のlink要素。
<link rer="chapter"～ />
というのを多用している。
チャプター？
しらぎくさいとさんに書かれている内容からすると“章”とのことだけど、章ってなんだろう。
で、またぐぐる。
glas-gatherさんのlink要素
The Web KANZAKIさんのlink要素によるナビゲーション
によれば、このchapterにサイト内の各アドレスを記述する事で、対応するブラウザでそのサイトを見ればツールバーから一発で該当ページへジャンプすることが出来る、ということかな？
まだあまり理解は出来てないけど、分かったつもりで新しいlink要素を書いてみた。
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="author" href="http://hobbyblog.biz/design/69/index_3.html" title="自己紹介" />（追加）
<link rel="index" href="http://hobbyblog.biz/design/" title="素人のWebデザイントップページ" />（追加）
<link rel="chapter" href="http://hobbyblog.biz/design/2007/03/000087.html" title="このブログについて" />（追加）
<link rev="made" href="mailto:design△hobbyblog.biz" title="管理人へのメールはこちらから" />（追加）
こんな感じかなぁ。
別に趣味のサイトでここまでやる必要ないじゃんという気がしないでもないけど・・他にもいろいろあるから覚えようとすると大変だこりゃ。
ブログリニューアル-その6
前置き（というかどっちがメインかわかんなくなってるｗ）が長くなったけど、今日はカテゴリのページを制作。
エントリーページ同様コピペメインだからあっちゅーまに完成。
ただしfirefoxやoperaで見ると、エントリーが少なくて縦に短いページの場合、右に10pxほどズレるバグ？が出現。でも長くすると戻る。
よくわかんないけどコリャ放置でいいやｗ
明日はアーカイブページ、あとは検索と印刷用で終わりかなー。
2007/06/23 20:47
IEでテキストを選択できないバグ
昨日の続き。
テキストの一部を選択しようとしても何故か全体が選択されてしまうのは、position:absolute;を使った際のIE6特有のバグらしい・・。
参考になったのは
hxxk.jpさんのMovable Type で作成した記事の内容をマウスで選択できないという現象
何度も書いてるけど、リニューアル後のブログはCSSが非適用時でも本文が先頭にくるように、中→左→右カラムの順に記述して、それをabsoluteで現在の左→中→右のように見せてる。（一番下の画像1を参照）
で、このバグは
ADPさんのIE6のwidth解釈バグ対処法
によると、IE6の「標準準拠モード」やら「後方互換モード」やらの解釈の違いが絡んでいる問題だとの事。
つまりこのテキストを選択出来ないバグは、「標準準拠モード」にてabsoluteを使用している際に起こるIE6でのバグ。
てーことは「標準準拠モード」じゃなくて「後方互換モード」にすればいい訳だ。
で、編集。
訪問者に優しいWebサイト作りさんの文書型宣言とブラウザでの表示より
現在1行目に記述してあるDOCTYPE宣言「<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">」の前に、
XML宣言「<?xml version="1.0" encoding="UTF-8"?>」を入れるだけで「後方互換モード」に変身！（画像2）
結果は・・
おお、テキストが自由に選択できる！
んがっ！この「後方互換モード」というのはなかなかの曲者らしく、かなりのバグがあるらしい・・実際、おかしな事がいくつか起こってる。
そもそも本来は「標準準拠モード」で書くのがベター、なのにXML宣言は省略はしないほうがいいものみたい。
つまり1行目で必ずXML宣言をして、IE6では「後方互換モード」でやりなさいよと。
ただーし。
例外として省略をしても良い場合が3パターンあると、
行動記録さんのXHTML 1.0文書でXML宣言を省略できるときの条件に書かれているのを発見。
その3パターンある内の一つ、それは文字コードがUTF-8の場合。
このブログの文字コードはUTF-8。リニューアル後の文字コードもUTF-8。
おっ、省略してもOKじゃーん！（なんて軽く考えて良い事ではない気もするが）
てーことでいつも通り省略！
これで標準準拠モードに変換！
つまりテキストが選択できない！
あれっ、こんだけ長文書いときながら話が元に戻ってる。
ハイハイそんなわけでふつーにfloatで書き直しましたよ・・（画像3）
文字コードはUTF-8だからXML宣言を省略、つまり標準準拠モード。
だけどabsoluteを使ってないからテキストは自由に選択できる。
CSS非適用時にも中カラムが先頭に来る。
んー。最初からいつも通りfloatを使ってりゃなんら苦労することはなかったんだね。
でもこの失敗から学んだことはデカい。
XML宣言に標準準拠モードに後方互換モード、名前は知ってたけどそれが何なのかってのは全然知らなかったからなぁ。
しかしIEってのはとことん厄介な存在だわ。個人的にはOperaの方にいつも苦しめられてるんだけどさorz
画像1 画像2 画像3
テキストの一部を選択しようとしても何故か全体が選択されてしまうのは、position:absolute;を使った際のIE6特有のバグらしい・・。
参考になったのは
hxxk.jpさんのMovable Type で作成した記事の内容をマウスで選択できないという現象
何度も書いてるけど、リニューアル後のブログはCSSが非適用時でも本文が先頭にくるように、中→左→右カラムの順に記述して、それをabsoluteで現在の左→中→右のように見せてる。（一番下の画像1を参照）
で、このバグは
ADPさんのIE6のwidth解釈バグ対処法
によると、IE6の「標準準拠モード」やら「後方互換モード」やらの解釈の違いが絡んでいる問題だとの事。
つまりこのテキストを選択出来ないバグは、「標準準拠モード」にてabsoluteを使用している際に起こるIE6でのバグ。
てーことは「標準準拠モード」じゃなくて「後方互換モード」にすればいい訳だ。
で、編集。
訪問者に優しいWebサイト作りさんの文書型宣言とブラウザでの表示より
現在1行目に記述してあるDOCTYPE宣言「<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">」の前に、
XML宣言「<?xml version="1.0" encoding="UTF-8"?>」を入れるだけで「後方互換モード」に変身！（画像2）
結果は・・
おお、テキストが自由に選択できる！
んがっ！この「後方互換モード」というのはなかなかの曲者らしく、かなりのバグがあるらしい・・実際、おかしな事がいくつか起こってる。
そもそも本来は「標準準拠モード」で書くのがベター、なのにXML宣言は省略はしないほうがいいものみたい。
つまり1行目で必ずXML宣言をして、IE6では「後方互換モード」でやりなさいよと。
ただーし。
例外として省略をしても良い場合が3パターンあると、
行動記録さんのXHTML 1.0文書でXML宣言を省略できるときの条件に書かれているのを発見。
その3パターンある内の一つ、それは文字コードがUTF-8の場合。
このブログの文字コードはUTF-8。リニューアル後の文字コードもUTF-8。
おっ、省略してもOKじゃーん！（なんて軽く考えて良い事ではない気もするが）
てーことでいつも通り省略！
これで標準準拠モードに変換！
つまりテキストが選択できない！
あれっ、こんだけ長文書いときながら話が元に戻ってる。
ハイハイそんなわけでふつーにfloatで書き直しましたよ・・（画像3）
文字コードはUTF-8だからXML宣言を省略、つまり標準準拠モード。
だけどabsoluteを使ってないからテキストは自由に選択できる。
CSS非適用時にも中カラムが先頭に来る。
んー。最初からいつも通りfloatを使ってりゃなんら苦労することはなかったんだね。
でもこの失敗から学んだことはデカい。
XML宣言に標準準拠モードに後方互換モード、名前は知ってたけどそれが何なのかってのは全然知らなかったからなぁ。
しかしIEってのはとことん厄介な存在だわ。個人的にはOperaの方にいつも苦しめられてるんだけどさorz
画像1 画像2 画像3
2007/06/22 22:55
ブログリニューアル-その5
今日こそ本当にエントリーページの制作～。
まずはindexページのテンプレをそのままコピー。
そしてコメント欄やトラックバック欄も今のこのブログのテンプレからコピー。
これでほぼ終了ｗ
あとはCSSでレイアウトを整えるだけで完成！
やー、簡単だ。
しかーしここで問題発生。大問題発生。
トラックバックのアドレスをコピーしようとその部分をなぞろうとすると、選択範囲がブログ全体に及んでしまう。
いやいやそんな欲張んなくてもいいのに・・たった1行だけでいいのに・・。
しかもこの現象はエントリーの本文や左右のリストを選択しようとしても起きてしまう。
ただこれが起きるのはIEだけ。他のブラウザは大丈夫。
今は対症療法としてトラックバックアドレスをformの中に入れる事で選択できるようにしたけど、
何故こんな事態になってしまったのか、調べてみるとかなり根の深い問題なようで・・。
明日はこの辺を考えてみる。
まずはindexページのテンプレをそのままコピー。
そしてコメント欄やトラックバック欄も今のこのブログのテンプレからコピー。
これでほぼ終了ｗ
あとはCSSでレイアウトを整えるだけで完成！
やー、簡単だ。
しかーしここで問題発生。大問題発生。
トラックバックのアドレスをコピーしようとその部分をなぞろうとすると、選択範囲がブログ全体に及んでしまう。
いやいやそんな欲張んなくてもいいのに・・たった1行だけでいいのに・・。
しかもこの現象はエントリーの本文や左右のリストを選択しようとしても起きてしまう。
ただこれが起きるのはIEだけ。他のブラウザは大丈夫。
今は対症療法としてトラックバックアドレスをformの中に入れる事で選択できるようにしたけど、
<form name="tb">
<input type="text" name="copyAddress" size="80" value="<$MTEntryTrackbackLink$>" />
</form>
何故こんな事態になってしまったのか、調べてみるとかなり根の深い問題なようで・・。
明日はこの辺を考えてみる。
2007/06/21 23:49
ブログリニューアル-その4
今日からはエントリーページの制作～。
の前に！
やっぱりlist-style-imageをつけてみた。
けど・・ロールオーバー時のヒヨコ・・小さいよなぁ・・。
誰が見てもヒヨコと分かるような顔のドアップVer.も作ってみたけど、モロ生首で怖かったから即削除。
まぁここら辺はこんなもんでいっか。その内良い案が出てくるかもしれないし、最悪このままでもそれはそれで。
あとは月別アーカイブとカテゴリーリストにカウントの表示。
このカウントって今のブログには無かったんだね。Movable Typeのタグリファレンスをボケーっ見てたら気がついた。
別に無くちゃダメってモンでもないけど、作ったときは確実に存在を忘れてたもんなぁ。
ホント手抜きブログだわｗ
明日こそエントリーページへ行くべし。
の前に！
やっぱりlist-style-imageをつけてみた。
けど・・ロールオーバー時のヒヨコ・・小さいよなぁ・・。
誰が見てもヒヨコと分かるような顔のドアップVer.も作ってみたけど、モロ生首で怖かったから即削除。
まぁここら辺はこんなもんでいっか。その内良い案が出てくるかもしれないし、最悪このままでもそれはそれで。
あとは月別アーカイブとカテゴリーリストにカウントの表示。
このカウントって今のブログには無かったんだね。Movable Typeのタグリファレンスをボケーっ見てたら気がついた。
別に無くちゃダメってモンでもないけど、作ったときは確実に存在を忘れてたもんなぁ。
ホント手抜きブログだわｗ
明日こそエントリーページへ行くべし。
2007/06/20 21:36
ブログリニューアル-その3
今日は・・
画面上部の「このブログについて」とランキング（ダミー）のタブの3つを追加。
これも画像はCSS上で背景指定、text-indent: -9999px;で内のテキストも遠くにおさらば。
これでCSSをオフにすれば画像は表示されなくなって、代わりにテキストリンクが出てくる。
このやり方は基本として覚えておかにゃーね。
あとはRSS他のフィードアイコンとQRコード、おまけで別にどうでもよかったファビコンも追加。
そいで今まで分かり難かったblockquoteを装飾して、各リストも整形して、うん、とりあえずindex.htmlは終わりかなぁ。
まだやり残してる部分は結構あるけど、それは他のページとの兼ね合いでいろいろと変わってく所もあるだろうし。
明日からはエントリーページの制作～。
画面上部の「このブログについて」とランキング（ダミー）のタブの3つを追加。
これも画像はCSS上で背景指定、text-indent: -9999px;で内のテキストも遠くにおさらば。
これでCSSをオフにすれば画像は表示されなくなって、代わりにテキストリンクが出てくる。
このやり方は基本として覚えておかにゃーね。
あとはRSS他のフィードアイコンとQRコード、おまけで別にどうでもよかったファビコンも追加。
そいで今まで分かり難かったblockquoteを装飾して、各リストも整形して、うん、とりあえずindex.htmlは終わりかなぁ。
まだやり残してる部分は結構あるけど、それは他のページとの兼ね合いでいろいろと変わってく所もあるだろうし。
明日からはエントリーページの制作～。
2007/06/19 22:45
ブログリニューアル-その2
このブログのリニューアルを本格的に開始なのです。
ただここでやっちゃうと、何も知らない人が来たら「なんだこの崩れたレイアウトは！」とビックリさせてしまいそうなので、制作はこっちでやっとります。
最大のテーマはどのブラウザで見ても崩れることなく、且つ中身も綺麗である事。
そしてprint対応、更にCSSがオフの状態でも問題なく見れるように。
って当然のことなんだけどねぇ。
で、そのブラウザってのは
・WinIE4以上(4はCSS非適用)
・MacIE4以上(4と4.5はCSS非適用)
・firefox2以上
・Opera9以上
・NN4以上(4はCSS非適用)
・携帯(余裕があれば)
あたり。
一部ブラウザにCSSを適用させないためにはこんな感じで。
XHTML
<link ～ href="import.css" media="all" /> →ここでNN4.xを除外
CSS（import.css）
@import "import_base.css"; →ここでWin,MacIE4を除外
CSS（import_base.css）
@import url("base.css"); →ここでMacIE4.5を除外
base.cssを読み込ませるまでにCSSファイルを2つかますってのは良いのか悪いのか分からないけど、一応こんな感じで古いブラウザを除外しまくる。
ただ毎度の事WinIE6，firefox2，Opera9，NN7，携帯でしか確認できないから、それ以外のバージョンではどうなろうと知らんｗ
さてさてブログの構成は3カラム。
左と右に各種リスト、そして中央にエントリーという形。
この場合CSSがオフの状態だとまず最初に左カラムのリストが出てきてエントリーにたどり着くまでが大変だから、
XHTML上で中央カラム→左カラム→右カラムの順に書いて、あとはpositionで左カラム→中央カラム→右カラムと表示されるように絶対指定。
ほいで左上のロゴ<h1>とその下の文章<h2>、さらにヒヨコの画像も全て絶対指定。
ヒヨコの画像はXHTML上に<img～>で置いても良かったんだけど、そしたらCSSがオフの状況でも表示されて邪魔になるから、backgroundで背景に指定してみた。
それともう一つ、これまたCSSがオフの状況だと各エントリーがくっついてて見辛いから、エントリーの下側に<hr />を記述。
ただ通常はdisplay: none;で無き物に。
初日はこんな感じで～。
今のところ順調かなー。
ただここでやっちゃうと、何も知らない人が来たら「なんだこの崩れたレイアウトは！」とビックリさせてしまいそうなので、制作はこっちでやっとります。
最大のテーマはどのブラウザで見ても崩れることなく、且つ中身も綺麗である事。
そしてprint対応、更にCSSがオフの状態でも問題なく見れるように。
って当然のことなんだけどねぇ。
で、そのブラウザってのは
・WinIE4以上(4はCSS非適用)
・MacIE4以上(4と4.5はCSS非適用)
・firefox2以上
・Opera9以上
・NN4以上(4はCSS非適用)
・携帯(余裕があれば)
あたり。
一部ブラウザにCSSを適用させないためにはこんな感じで。
XHTML
<link ～ href="import.css" media="all" /> →ここでNN4.xを除外
CSS（import.css）
@import "import_base.css"; →ここでWin,MacIE4を除外
CSS（import_base.css）
@import url("base.css"); →ここでMacIE4.5を除外
base.cssを読み込ませるまでにCSSファイルを2つかますってのは良いのか悪いのか分からないけど、一応こんな感じで古いブラウザを除外しまくる。
ただ毎度の事WinIE6，firefox2，Opera9，NN7，携帯でしか確認できないから、それ以外のバージョンではどうなろうと知らんｗ
さてさてブログの構成は3カラム。
左と右に各種リスト、そして中央にエントリーという形。
この場合CSSがオフの状態だとまず最初に左カラムのリストが出てきてエントリーにたどり着くまでが大変だから、
XHTML上で中央カラム→左カラム→右カラムの順に書いて、あとはpositionで左カラム→中央カラム→右カラムと表示されるように絶対指定。
ほいで左上のロゴ<h1>とその下の文章<h2>、さらにヒヨコの画像も全て絶対指定。
ヒヨコの画像はXHTML上に<img～>で置いても良かったんだけど、そしたらCSSがオフの状況でも表示されて邪魔になるから、backgroundで背景に指定してみた。
それともう一つ、これまたCSSがオフの状況だと各エントリーがくっついてて見辛いから、エントリーの下側に<hr />を記述。
ただ通常はdisplay: none;で無き物に。
初日はこんな感じで～。
今のところ順調かなー。
2007/06/18 21:31
ブログリニューアル-その1
このブログを作ったときはDreamweaverでちまちま記述して、それをMovable Typeの管理画面にコピペして・・っていうやり方で作ってたんだけど、今回のリニューアルでは直接Dreamweaverからの編集。
結局更新の度に「再構築」しないといけないんだから、労力的にはどっちも同じじゃん？と前は思ってたんだけど、いやはや断然こっちの方が楽だったｗ
ただMTは専用のタグを使わなきゃいけないのに、いつもの癖でふつーにXHTML＆CSSで記述してて、アップロードした後に「あ、これMTだったんだ」と気づくと言う間抜けな事もしばしば。
さーてさて、今のところ頭に描いている構成だとpositonをかなり使っちゃいそうだなぁ～。
ブラウザによるpx単位の誤差とかで悩まされないか不安。
あと3日前にupし忘れたdesign13の完成予想図。
これはブログのリニューアルが終わってからかなーでも早く作りたいしなー。
結局更新の度に「再構築」しないといけないんだから、労力的にはどっちも同じじゃん？と前は思ってたんだけど、いやはや断然こっちの方が楽だったｗ
ただMTは専用のタグを使わなきゃいけないのに、いつもの癖でふつーにXHTML＆CSSで記述してて、アップロードした後に「あ、これMTだったんだ」と気づくと言う間抜けな事もしばしば。
さーてさて、今のところ頭に描いている構成だとpositonをかなり使っちゃいそうだなぁ～。
ブラウザによるpx単位の誤差とかで悩まされないか不安。
あと3日前にupし忘れたdesign13の完成予想図。
これはブログのリニューアルが終わってからかなーでも早く作りたいしなー。
2007/06/17 21:35
ブログリニューアル案4
おいらWebデザの素人！まだまだヒヨッコ！ってことでヒヨコ!
うん、いいかもしんないｗ
しつこく使い続けてきた卵のロゴもやっと活きたし、なによりシンプル。
各リンクはhover時に卵からちょこっとだけヒヨコが顔を出すようにbackground-imageを変更したり、上部の「このブログについて」もhover時に少し遊んでみたい。
「写真は使わない」っていう当初のアレはナニだけどｗ
気に入ったからこれにしよう！
うん、いいかもしんないｗ
しつこく使い続けてきた卵のロゴもやっと活きたし、なによりシンプル。
各リンクはhover時に卵からちょこっとだけヒヨコが顔を出すようにbackground-imageを変更したり、上部の「このブログについて」もhover時に少し遊んでみたい。
「写真は使わない」っていう当初のアレはナニだけどｗ
気に入ったからこれにしよう！
2007/06/16 23:02
ブログリニューアル案3
昨日のエントリーから始まった“デザイン13”も大事だけど、こっちも同時進行でやっていきますよー。
ここ最近エントリー単位でグーグルにインデックスされてきてるみたいで、先月と比べてアクセスが急増。
下にあるカウンターはトップページだけしかカウントされてないけど、実際には1日あたりその3倍前後。
これだけの人が見に来てくれている事を考えると身が引き締まりますなぁ。
これからは今まで以上に「なんじゃこりゃ！」って言うような恥ずかしいものをつくらないように気をつけないとね。
でも実際に恥ずかしいものを作ってしまったら、そんときゃ「だって素人だもん」と逃げｗ
そういう意味でこのブログ名は・・良いのか悪いのか。
ま、逃げてばかりじゃなーんも成長しないけどね。
てなわけでブログリニューアル案その3なのです。
画像はこれ。
写真は使わない＝OK！
シンプル＝OK!
左下のカーブしている部分は、position:absolute; left:0; bottom:0; でなんとかなるか、ならないかは未定。
で、これを作った後、例の本の中にあったいくつかのデザインに若干インスパイアを覚えたから、もう1つだけ作ってみる。だからこれは保留。
まぁあんまり気に入っちゃいないしね。次こそ良いのできるかなぁ。
ここ最近エントリー単位でグーグルにインデックスされてきてるみたいで、先月と比べてアクセスが急増。
下にあるカウンターはトップページだけしかカウントされてないけど、実際には1日あたりその3倍前後。
これだけの人が見に来てくれている事を考えると身が引き締まりますなぁ。
これからは今まで以上に「なんじゃこりゃ！」って言うような恥ずかしいものをつくらないように気をつけないとね。
でも実際に恥ずかしいものを作ってしまったら、そんときゃ「だって素人だもん」と逃げｗ
そういう意味でこのブログ名は・・良いのか悪いのか。
ま、逃げてばかりじゃなーんも成長しないけどね。
てなわけでブログリニューアル案その3なのです。
画像はこれ。
写真は使わない＝OK！
シンプル＝OK!
左下のカーブしている部分は、position:absolute; left:0; bottom:0; でなんとかなるか、ならないかは未定。
で、これを作った後、例の本の中にあったいくつかのデザインに若干インスパイアを覚えたから、もう1つだけ作ってみる。だからこれは保留。
まぁあんまり気に入っちゃいないしね。次こそ良いのできるかなぁ。
2007/06/15 22:52
design13-その1
このブログの本来の目的、それはプロに追いつけ追い越せ～なーんて事は言わないけど、少しでもそれに近づけるような見た目も中身も綺麗でステキなサイトを作ること。
そのために日々勉強して自分を磨いていきまっせ！というものだった気がするんだけど、なんか最近方向性がずれてきてるような気がする。
そこで今日はまた基本に立ち返って、プロの作ったサイトを教師として迎えて自分なりの解釈で作り上げていこう！ってことを久々やってみる。
うん？敢えて遠まわしな言い方にしているけどキニシナイ！
今回の教師さんはテンプレートモンスターのNo.15235。
大雑把にまとめてみると・・上部分も下部分も左右floatで回り込み。
ナビ部分は覚えたての画像1枚で作る方法で。
あと本家はFlashを使ってるみたいだけど、今回は全部HTMLだけにしてみる。
以上！
そんな難しそうな感じはしないけど・・どうかなー。
そのために日々勉強して自分を磨いていきまっせ！というものだった気がするんだけど、なんか最近方向性がずれてきてるような気がする。
そこで今日はまた基本に立ち返って、プロの作ったサイトを教師として迎えて自分なりの解釈で作り上げていこう！ってことを久々やってみる。
うん？敢えて遠まわしな言い方にしているけどキニシナイ！
今回の教師さんはテンプレートモンスターのNo.15235。
大雑把にまとめてみると・・上部分も下部分も左右floatで回り込み。
ナビ部分は覚えたての画像1枚で作る方法で。
あと本家はFlashを使ってるみたいだけど、今回は全部HTMLだけにしてみる。
以上！
そんな難しそうな感じはしないけど・・どうかなー。
2007/06/14 23:13
デザインセンス
今日はちょっとした一騒動があってあまりやる時間が・・というよりもやる気がそがれてまだ何もしてなかったり。
ま、やる気がないのはいつもの事だから特に今日が特別だと言う訳じゃないんだけどｗ
最近これ以外にも興味のあるものが出来たからそっちの勉強もやりたいし、あぁもう時間が足らない。やる気も足らない。
そういえばこのブログって月別アーカイブが無かったんだなぁ・・今日、開設3ヶ月目にして始めて気がついた。
リニューアルしたらそれもちゃんとつけとこ。
ていかそうなのよ、リニューアルなのよ！
デザインを考えるのってホント難しい。
本を参考に配色を考えたりだとかもしてるけど、結局はレイアウトありきだもんね。このセンスの無さを恨みたい。
ま、やる気がないのはいつもの事だから特に今日が特別だと言う訳じゃないんだけどｗ
最近これ以外にも興味のあるものが出来たからそっちの勉強もやりたいし、あぁもう時間が足らない。やる気も足らない。
そういえばこのブログって月別アーカイブが無かったんだなぁ・・今日、開設3ヶ月目にして始めて気がついた。
リニューアルしたらそれもちゃんとつけとこ。
ていかそうなのよ、リニューアルなのよ！
デザインを考えるのってホント難しい。
本を参考に配色を考えたりだとかもしてるけど、結局はレイアウトありきだもんね。このセンスの無さを恨みたい。
2007/06/13 20:39
Windows版safari
Windows版safariかぁ～。
今度からいちいちBrowsrCampで確認しなくて済むのは便利だね。
まぁ日本語にはまだ（正式には）対応してないみたいだから、まともに使えるのはまだまだ先なんだろうけどこれはちょっと楽しみ。
っていう感想になってしまうのは“素人”側に立ってるからなのだろうかｗ
IEみたいにWin版とMac版でCSSの解釈（というかバグ）が違うように、safariでも同じような事が起こればこれを生業としている人たちにしたら苦労が増えるわけで。
ん～、まぁとりあえず楽しみと言うスタンスでいようｗ
参考記事
ITmedia：Windows版SafariでmixiやYahoo！を表示してみると……
CNET Japan：Windows版「Safari」が登場、日本語は未対応
今度からいちいちBrowsrCampで確認しなくて済むのは便利だね。
まぁ日本語にはまだ（正式には）対応してないみたいだから、まともに使えるのはまだまだ先なんだろうけどこれはちょっと楽しみ。
っていう感想になってしまうのは“素人”側に立ってるからなのだろうかｗ
IEみたいにWin版とMac版でCSSの解釈（というかバグ）が違うように、safariでも同じような事が起こればこれを生業としている人たちにしたら苦労が増えるわけで。
ん～、まぁとりあえず楽しみと言うスタンスでいようｗ
参考記事
ITmedia：Windows版SafariでmixiやYahoo！を表示してみると……
CNET Japan：Windows版「Safari」が登場、日本語は未対応
2007/06/12 22:58
ブログリニューアル案2
今日のこのエントリーを書く前に昨日のエントリーを見返してみたら、
「白＝爽やか＝清流ってあまりにも短絡的」
「シンプルで行こうと思ってるのに、ここまで大々的に写真を使っちゃダメ」
って書いてあった。思い出した。
で、この第2案。
もうっ、アホ！
シンプルにシンプルにってのは覚えてたのに、もっと大事な事を忘れてたorz
ついさっきまでコレで行こうかな？と思ってたのに・・ダメだ却下。
「白＝爽やか＝清流ってあまりにも短絡的」
「シンプルで行こうと思ってるのに、ここまで大々的に写真を使っちゃダメ」
って書いてあった。思い出した。
で、この第2案。
もうっ、アホ！
シンプルにシンプルにってのは覚えてたのに、もっと大事な事を忘れてたorz
ついさっきまでコレで行こうかな？と思ってたのに・・ダメだ却下。
2007/06/11 23:25
ブログリニューアル案1
重い腰を上げ（？）ブログリニューアルに取り掛かってみる。
今のデザインが真っ黒だから、その真逆で白をメインとしたブログにしようと考えた第1案がコレ。
作ってるときは「これエエで これエエで サイコウちゃうん？」って思ってたのに、いざ出来上がってみるとなんだろうこれ・・。
白＝爽やか＝清流ってあまりにも短絡的過ぎる・・。
リニューアル後のデザインもシンプルで行こうと思ってるのに、ここまで大々的に写真を使っちゃダメじゃん、よって却下。
右側2カラムの配置もなんかおかしいし。
やっぱセンスだよなぁ。
ちなみにロゴの卵はヒヨッコとかそんな意味。
今のデザインが真っ黒だから、その真逆で白をメインとしたブログにしようと考えた第1案がコレ。
作ってるときは「これエエで これエエで サイコウちゃうん？」って思ってたのに、いざ出来上がってみるとなんだろうこれ・・。
白＝爽やか＝清流ってあまりにも短絡的過ぎる・・。
リニューアル後のデザインもシンプルで行こうと思ってるのに、ここまで大々的に写真を使っちゃダメじゃん、よって却下。
右側2カラムの配置もなんかおかしいし。
やっぱセンスだよなぁ。
ちなみにロゴの卵はヒヨッコとかそんな意味。
2007/06/10 20:24
各種ブラウザへの対応を学ぶ
眠いし何もやる気無いしボーっとするだけの日曜日・・。
住民税の増税と定率減税の廃止が痛すぎてテンション激降下・・。
でもこの間買ったCSSプロフェッショナルスタイルをちびちび読んでやっと読破。
うーん、面白い。各種ブラウザへの対応を、これでもかとしつこい位繰り返し書いてるから、その気は無くても自然に覚えてる。
CSSの裏技的な使い方とか、ハックとか、こりゃかなり勉強になった。
そういやこのブログはどうなってるんだっけかな～ってソースを見てみたら、ブラウザへの対処は何もしてなかったんだなぁ。
ま、そりゃそうだ、そんなもの全く知らないときに作ったんだもんね。
恐らくこのブログをまともに見られるのはWinIE6ぐらいかな？
Opera9.0，ff2.0でも崩れてるから、それ以前のバージョンとなると・・。
近々やる予定のリニューアルではそこんとこしっかり考えてやらないとねぇ。
もちろんprint対応で。
うん、でもやる気さんがどっか行っちゃったんだなぁ・・。
住民税の増税と定率減税の廃止が痛すぎてテンション激降下・・。
でもこの間買ったCSSプロフェッショナルスタイルをちびちび読んでやっと読破。
うーん、面白い。各種ブラウザへの対応を、これでもかとしつこい位繰り返し書いてるから、その気は無くても自然に覚えてる。
CSSの裏技的な使い方とか、ハックとか、こりゃかなり勉強になった。
そういやこのブログはどうなってるんだっけかな～ってソースを見てみたら、ブラウザへの対処は何もしてなかったんだなぁ。
ま、そりゃそうだ、そんなもの全く知らないときに作ったんだもんね。
恐らくこのブログをまともに見られるのはWinIE6ぐらいかな？
Opera9.0，ff2.0でも崩れてるから、それ以前のバージョンとなると・・。
近々やる予定のリニューアルではそこんとこしっかり考えてやらないとねぇ。
もちろんprint対応で。
うん、でもやる気さんがどっか行っちゃったんだなぁ・・。
2007/06/09 21:32
アハムービーを作ってみた。。
以前から作ってみたかったアハムービーぽいのに挑戦！
ちょっと画像の修正作業に時間を持ってかれたけど、flash上でやる事は意外と単純。
制作時間は45分ぐらいかな。
こういうのを見ることで脳が活性化？するんだっけか、確か。
でも作る側としては答え知っちゃってるからなんも意味なーし！
ちょっと画像の修正作業に時間を持ってかれたけど、flash上でやる事は意外と単純。
制作時間は45分ぐらいかな。
こういうのを見ることで脳が活性化？するんだっけか、確か。
でも作る側としては答え知っちゃってるからなんも意味なーし！
2007/06/08 21:45
番外編の続き-print2
こんな感じっかな・・。
印刷用だから、どこまでシンプルにすべきかと迷った挙句、結局使った画像はコンテンツのタイトル部分2箇所のみ。
ただソースを見ると
display: none;
background: none;
だらけで、いかにもやっつけって感じがしてしまうのが・・ここら辺は他のサイトを見て勉強しなければだなぁ。
それと最初からprint用も意識してサイト作りをしていく事も重要かな。
あとopera嫌い orz
印刷用だから、どこまでシンプルにすべきかと迷った挙句、結局使った画像はコンテンツのタイトル部分2箇所のみ。
ただソースを見ると
display: none;
background: none;
だらけで、いかにもやっつけって感じがしてしまうのが・・ここら辺は他のサイトを見て勉強しなければだなぁ。
それと最初からprint用も意識してサイト作りをしていく事も重要かな。
あとopera嫌い orz
2007/06/07 23:37
番外編の続き-print1
まだUpはしてないけど、print用のページを制作中。
不必要な画像やリンクを極力なくして、レイアウトも簡潔に。
と言う事はなんとなく分かるけど、どこまでシンプルにしていいのかが迷いどころ。
あまりシンプルすぎても物足りないし、かと言って・・いや、シンプル過ぎるぐらいのでいいのかも！？
とりあえずdisplay:none;は使いまくりの方向で。。
まだ確認はしてないけど、CSSで整形している以上ブラウザによっての違いが当然あるんだろうなぁ。
不必要な画像やリンクを極力なくして、レイアウトも簡潔に。
と言う事はなんとなく分かるけど、どこまでシンプルにしていいのかが迷いどころ。
あまりシンプルすぎても物足りないし、かと言って・・いや、シンプル過ぎるぐらいのでいいのかも！？
とりあえずdisplay:none;は使いまくりの方向で。。
まだ確認はしてないけど、CSSで整形している以上ブラウザによっての違いが当然あるんだろうなぁ。
2007/06/06 22:05
完了。。
完成した全ページをUP完了。
そしてチェック開始・・最初はやっぱり弄ったまま放っておいた検索CGIから。
そしたら予想通りというか予想以上というかエラー連発！
もう疲れたよぱとらしゅ。。
今日はこの辺でタイムアップ。切り上げ。おしまい。
でもリンクミスが怖いからその確認だけあとでやろう・・。
明日は例のコンテストページのprint用を作ってみる。
明日からはまた通常営業なのです。たぶん。
そしてチェック開始・・最初はやっぱり弄ったまま放っておいた検索CGIから。
そしたら予想通りというか予想以上というかエラー連発！
もう疲れたよぱとらしゅ。。
今日はこの辺でタイムアップ。切り上げ。おしまい。
でもリンクミスが怖いからその確認だけあとでやろう・・。
明日は例のコンテストページのprint用を作ってみる。
明日からはまた通常営業なのです。たぶん。
2007/06/05 23:28
Movable Type4
Movable Type3が31,500円で4にバージョンアップできる～ って高っ！
もっともこのブログは無料の個人ライセンスだから値段なんてどうでもいいんだけど、それなりの企業がそれなりのサイトを作ろうとするならこれでも安いんかなぁ。
4も個人ライセンスは無料らしいから評判が良かったら変えてみよかしら。
っと、ネタが無いときに飛び込んできたニュースでここぞとばかりに文字埋め！
さて、個人サイトのほうは一応完成。あとはリンクミスとか誤字脱字が無いかとかそこら辺の確認作業を明日して、明後日から通常営業に戻れる予定！
あぁ、思ったより長かった・・。
もっともこのブログは無料の個人ライセンスだから値段なんてどうでもいいんだけど、それなりの企業がそれなりのサイトを作ろうとするならこれでも安いんかなぁ。
4も個人ライセンスは無料らしいから評判が良かったら変えてみよかしら。
っと、ネタが無いときに飛び込んできたニュースでここぞとばかりに文字埋め！
さて、個人サイトのほうは一応完成。あとはリンクミスとか誤字脱字が無いかとかそこら辺の確認作業を明日して、明後日から通常営業に戻れる予定！
あぁ、思ったより長かった・・。
2007/06/04 21:15
ちょっと日記
おぉぉ。。
向こうの方でいっぱいいっぱい。
検索CGI（レンタル）の設定を変えたら訳わかんない事になって、その修正＆再改良にも手こずってるし、なんか作ってるうちにデザインが野暮ったく感じてきてまた作り直したくなってきたし・・いや、作り直さないけどね・・。
予定では今日当たりに出来上がるつもりだったんだけどなぁ・・この調子だと早くて水曜かな・・。
うーん、詳しく書けないのはきつい（ていうか別に書いてもいいんだけどねｗ）
普通の日記ならネタはたくさんあるんだけど。
やきゅつくのグチとかやきゅつくのグチとかやきゅつくのグチとかビリーズブートキャンプを買ったとかｗ
筋肉痛きつー。
向こうの方でいっぱいいっぱい。
検索CGI（レンタル）の設定を変えたら訳わかんない事になって、その修正＆再改良にも手こずってるし、なんか作ってるうちにデザインが野暮ったく感じてきてまた作り直したくなってきたし・・いや、作り直さないけどね・・。
予定では今日当たりに出来上がるつもりだったんだけどなぁ・・この調子だと早くて水曜かな・・。
うーん、詳しく書けないのはきつい（ていうか別に書いてもいいんだけどねｗ）
普通の日記ならネタはたくさんあるんだけど。
やきゅつくのグチとかやきゅつくのグチとかやきゅつくのグチとかビリーズブートキャンプを買ったとかｗ
筋肉痛きつー。
2007/06/03 22:57
コメントアウトの書き方2
続いてCSS。
goo
/*--------------------------------------head--------------------------------------*/
so-net
/*__________________________________________________
head
__________________________________________________*/
モスバーガー
/* ----------------------------------- */
/* head */
/* ----------------------------------- */
FC2
/************************************/
/* head要素 */
docomo
/* 1. head" タグ
----------------------------------------------- */
softbank
/* Head */
/**************************************/
W3C
/*
Head
*/
この中では個人的にso-netがいいかなぁ。1つで7行も使う潔さ、そして何より分かりやすい。あとブラウザの振り分けがかなり貪欲ｗ
こうやってみると、CSSってみな個性的。
大人数で作っているのなら当然だけど、一人で作る場合でもすぐにここはどの要素なのか、とかすぐ見分けるにはやっぱりこういう所にも気を使わなあかんのね～。
うん、これは意外と勉強になった。
goo
/*--------------------------------------head--------------------------------------*/
so-net
/*__________________________________________________
head
__________________________________________________*/
モスバーガー
/* ----------------------------------- */
/* head */
/* ----------------------------------- */
FC2
/************************************/
/* head要素 */
docomo
/* 1. head" タグ
----------------------------------------------- */
softbank
/* Head */
/**************************************/
W3C
/*
Head
*/
この中では個人的にso-netがいいかなぁ。1つで7行も使う潔さ、そして何より分かりやすい。あとブラウザの振り分けがかなり貪欲ｗ
こうやってみると、CSSってみな個性的。
大人数で作っているのなら当然だけど、一人で作る場合でもすぐにここはどの要素なのか、とかすぐ見分けるにはやっぱりこういう所にも気を使わなあかんのね～。
うん、これは意外と勉強になった。
2007/06/02 20:38
コメントアウトの書き方1
本やいろんなサイトのソースを見てると、コメントアウトの記述方法がいろいろあって興味深い。
で、他にも探ってみたら面白いものがあるかも？と、思いつきでいくつかの大手サイトをまわってみた。あぁ暇人ｗ
まずはHTMLから。
yahoo
<!-- HEAD -->
<!-- HEAD end -->
goo
<!--head-->
<!--/head-->
nifty
<!--#head-->
<!--/#head-->
infoseek
<!-- HEAD -->
<!-- END HEAD -->
so-net
<!--↓本体-->
<!--↑本体-->
ぷらら
<!-- ========= HEAD ========= -->
<!-- ========= /HEAD ========= -->
mixi
<!-- head : start -->
<!-- head : end -->
au
<!-- [HEAD] -->
<!-- /[HEAD] -->
W3C
<!-- end of "head" -->
ソースはほぼ小文字からなりたってるから、大文字のは目立ってわかりやすい。
ぷららみたいにガッツリ自己主張をしてくるのも一発で見分けつくからいいなぁ。
逆にW3Cは終了部分のみというシンプルさ。これはちょいと分かりにくいか・・。
次、CSS。は、明日！
で、他にも探ってみたら面白いものがあるかも？と、思いつきでいくつかの大手サイトをまわってみた。あぁ暇人ｗ
まずはHTMLから。
yahoo
<!-- HEAD -->
<!-- HEAD end -->
goo
<!--head-->
<!--/head-->
nifty
<!--#head-->
<!--/#head-->
infoseek
<!-- HEAD -->
<!-- END HEAD -->
so-net
<!--↓本体-->
<!--↑本体-->
ぷらら
<!-- ========= HEAD ========= -->
<!-- ========= /HEAD ========= -->
mixi
<!-- head : start -->
<!-- head : end -->
au
<!-- [HEAD] -->
<!-- /[HEAD] -->
W3C
<!-- end of "head" -->
ソースはほぼ小文字からなりたってるから、大文字のは目立ってわかりやすい。
ぷららみたいにガッツリ自己主張をしてくるのも一発で見分けつくからいいなぁ。
逆にW3Cは終了部分のみというシンプルさ。これはちょいと分かりにくいか・・。
次、CSS。は、明日！
2007/06/01 21:50
デザインセンス
プライベートサイトのリニューアル作業はぼちぼち継続中。
たぶん週明けごろには終わるかなぁ。全部で50ページも無い規模だし、やる気さえあればもっと早くできそうだけど、なにしろ毎日が眠くて眠くて、思った以上にはかどらない。
そんな中このブログの新しいデザインも考えちゃいるんだけど、いやいやセンスが無い。
そもそも今のこの真っ黒なデザインにしたのもただの手抜きだからなぁ。
いくらコーディングを勉強しようと、デザインやレイアウトってのは生まれ持ったセンスってのがかなり重要な位置を占めている気がしてならない。
ってのは言い訳っちゃぁ言い訳なんだけども。
はやくmedia="print"にとりかかりたいぞっと！
たぶん週明けごろには終わるかなぁ。全部で50ページも無い規模だし、やる気さえあればもっと早くできそうだけど、なにしろ毎日が眠くて眠くて、思った以上にはかどらない。
そんな中このブログの新しいデザインも考えちゃいるんだけど、いやいやセンスが無い。
そもそも今のこの真っ黒なデザインにしたのもただの手抜きだからなぁ。
いくらコーディングを勉強しようと、デザインやレイアウトってのは生まれ持ったセンスってのがかなり重要な位置を占めている気がしてならない。
ってのは言い訳っちゃぁ言い訳なんだけども。
はやくmedia="print"にとりかかりたいぞっと！
カテゴリリスト
- トップページ
- このブログについて
- これまで購入したテキスト類
- 無料配布テンプレート
- その他 (12)
- テンプレ制作 (66)
- フラッシュ制作 (20)
- ブログカスタマイズ (27)
月別アーカイブ
同一アーカイブ内エントリーリスト
- 印刷用CSSでバグ連発
- マルチディスプレイっっ
- ブログリニューアル-その9
- ブログリニューアル-その8
- モニタのスペックを意識したサイト作り
- head内をlink要素で飾る
- IEでテキストを選択できないバグ
- ブログリニューアル-その5
- ブログリニューアル-その4
- ブログリニューアル-その3
- ブログリニューアル-その2
- ブログリニューアル-その1
- ブログリニューアル案4
- ブログリニューアル案3
- design13-その1
- デザインセンス
- Windows版safari
- ブログリニューアル案2
- ブログリニューアル案1
- 各種ブラウザへの対応を学ぶ
- アハムービーを作ってみた。。
- 番外編の続き-print2
- 番外編の続き-print1
- 完了。。
- Movable Type4
- ちょっと日記
- コメントアウトの書き方2
- コメントアウトの書き方1
- デザインセンス