米が好き

凄い今更なのかもしれませんが、WordPressの管理画面でCSS3が使われている事を知りました。
『border-radius』と言う、ボーダーを角丸にするプロパティだけ知りましたが、何気に他にも使われていたりするかもしれません。

現在の最新版がベータを除き 2.9.2。
もしかしたら 2.9 の時から使われていたのかもしれません。
IEを無視するその姿勢、大好きです。ｗ

現在主流となっている5つのブラウザで見てみました。
以下に貼っている画像は、管理画面の左サイドのメニュー部分です。

Firefox 3.5.9	Opera 10.53	Google Chrome 4.1
Safari 4.0.5	Safari (iPhone)	Internet Explorer 6.0

さすがだIE、ちゃんと最後でオチてくれる。
iPhoneですら対応してるってのに、IE8になっても未対応なんて。
完全にみんなと違う方向向いてるだろIE。

ちなみに『Opera 9.**』もCSS3未対応です。
現在は 10.53 の最新版が出ているので、Opera使いの方はバージョンアップした方が良いかもです。

全世界のWEBデザイナーがIE6止めれば、シェアは10％切ると思うんですが。
しかし、私の勤めるスイミングは未だにIE6なので、勝手にバージョンアップしておこうかしら。

2009/8/8～8/15の目に付いた情報・ニュースなどをまとめてご紹介。
明日から旅行に行くので、今回は1日早めにアップしますです。

今後もやるかやらないか分からないとか言いつつ、結構スタンスが固まってきてます。ｗ
自分のちょいメモ代わりにも良いかもしれません。
続きを読む

2009/8/2～8/8の目に付いた情報・ニュースなどをまとめてご紹介。

今は忙しくて1つ1つ記事にする暇が無いからこの形式をとっていますが、今後も続けるかどうかは不明です。
1つの事に対して、じっくりレビューってのが好きな方なので、1行コメントって楽だけど何だか味気ないような気がします。
個人的主観なので他の人を批判しているのではありません、あしからず。
続きを読む

いやっほぅ～い！

いいぞ！　いいぞ！　YouTube！！

がんばれ！　がんばれ！　Google！！

こういった大手サイトが動いてくれると、IE6撲滅への道は早まると思います。
もうね、私歓喜！！ｗ

早く私もバージョンアップしたい。


作り手側なので、IE6のチェックの為バージョンアップしてません。
ちなみにこのブログは、IE6は無視してるのであしからず。

WordPressのプラグイン、『FeedList』を使ってニコニコ動画のマイリストを表示させる方法です。
ニコニコ動画のマイリストなどはRSS配信されているので、以前紹介した方法でやればOKです。
しかし配信先によって、タグ等が違います。
実際このブログの右サイドに表示している形式を元に、以下より説明いたします。

『FeedList』の設置の仕方は『【WordPress】Tumblrを表示させる方法』を参照してください。

以下は、ニコニコ動画のマイリストのRSSから配信されているコードです。

<div class="nico_box">
  <span class="rssLinkListItemTitle"><a href="http://www.nicovideo.jp/watch/sm***" rel="external"  title="動画UP者のコメント 動画時間｜投稿日 投稿時間 投稿">動画タイトル</a></span><br />
  <p class="nico-memo">自分で付けた動画メモ</p>
  <p class="nico-thumbnail"><img alt="動画タイトル" src="http://tn-skr4.smilevideo.jp/smile?i=***" width="94" height="70" border="0"/></p>
  <p class="nico-description">動画UP者のコメント</p>
  <p class="nico-info"><small><strong class="nico-info-length">動画時間</strong>｜<strong class="nico-info-date">投稿日 投稿時間</strong> 投稿</small></p>
</div>

赤字は動画によって変わる部分です。
上記のように、ニコニコ動画は細かくクラス分けされているので、後は自分好みにCSSに書くだけです。

<div class="nico_box">～</div>

各動画をブロック分けする為に、直接『feedlist.php』内に書いたコードです。

以下は私が書いたCSS。

/* ボックスにポジションを付けます。 */
.nico_box {
  position: relative;
  height: 110px;
  margin: 0 5px 10px;
}

/* 画像の位置決めと、94x70に縮小されているので元のサイズに戻します。　ついでに枠も付けてみる。 */
.nico_box .nico-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 130px;
  height: 100px;
  padding: 2px;
  border: solid 1px #ccc;
  background: #fff;
}

/* 動画タイトルの位置決め。 */
.nico_box .rssLinkListItemTitle {
  position: absolute;
  top: 0;
  left: 140px;
  padding: 2px 0 2px 5px;
  font-size: 12px;
}

/* メモは付けていませんが、一応隠します。 */
.nico_box .nico-memo {
  height: 0;
  overflow: hidden;
}

/* 動画UP者のコメントも隠します。 */
.nico_box .nico-description {
  height: 0;
  overflow: hidden;
}

/* 動画の時間や投稿日などの位置決め。 */
.nico_box .nico-info {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
}

/* 太字を普通にします。 */
.nico_box .nico-info strong {
  font-weight: normal;
}

/* strongをブロック化にし、右寄せにします。 */
.nico_box .nico-info-length {
  display: block;
  text-align: right;
}

実際四苦八苦した IE6での問題点。
動画のUP者コメント（多分）の内容によって、表示がおかしくなります。


ソース見ると、普段しない文字バケをおこしていました。
他の動画ではならなかったので、只単に「この動画のコメントが影響してる」としか言えません。
ちなみにこの崩れが起こるのは、案の定IEだけ。
何が原因かは掴めていないので、こればっかりはIEだけの悪口を言えないのでした・・・。


追記（6/12 23:20）
今日見たら、何もなく直ってました。
RSSの受信が上手くいってなかったのかな。
原因はさっぱりですが、直って良かった事に変わりはありません。

リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunascape（WebKit時以外）です。

デザイン的にも、これを出させない為にCSSを使ってみましょう。

話しはそれますが、画像の枠線を消すのは簡単ですよね。
CSSに以下のコードを付けるだけです。

CSS

img {
  border: none;
}

これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。

で、問題のリンク破線を消す方法です。
通常、以下の様に破線が出ます。（HOMEをクリックした時）


この破線を消すのは、CSSに以下のコードを書きます。

CSS

a:focus {
  outline: none;
}

はっはっはー、超簡単だぜー！
・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。
ちなみにSleipnirやLunascape（WebKit以外）にも効きません。
なん・・・だと・・・？

少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。

HTML

<a href="URL" onFocus="if(this.blur)this.blur()">リンク</a>

一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。

ポップアップをブロックした時とか、メニューバーの下に出る警告文。
IE6利用者に「いい加減IE6使うの止めて、7か8にバージョンアップしましょうよー」と言う文を出す事が出来るらしいです。


やり方は簡単で、(X)HTMLのBODYタグのすぐ下に以下のコードを記入するだけ。

<!--[if IE 6]>
<script type="text/javascript"> 
	/*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("<script type=\"text/javascript\"   src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>"); var __noconflict = true; } 
	var IE6UPDATE_OPTIONS = {
		icons_path: "http://static.ie6update.com/hosted/ie6update/images/"
	}
</script>
<script type="text/javascript" src="http://static.ie6update.com/hosted/ie6update/ie6update.js"></script>
<![endif]-->

インターネットするだけの人からして見れば、自分の勝手なんだからほっとけよ！
ってな気持ちかもしれませんが、WEBもどんどん新しくなってきてIE6では対応していない機能などもあります。
バージョンアップはしておいて損は無いと思いますよー。
と言うのは建前で、作る側からすればIE6なんて物はこの世から完全撲滅して欲しいのでありますよ。ｗ

未だにシェアが約20％のInternet Explorer 6.*（以下IE6）。
WEBデザイナー泣かせで有名なIE6。
私も今まで散々ぼやいてきた、アホアホのIE6。
そんな『IE6撲滅キャンペーン』が実施中との事。
うっはーーー！　やれやれーーー！！

3/20からIE8も公開される訳だし、これを機にIE6の人はバージョンアップをしましょう！
私は表示テストしなきゃいけないのでIE6のままなんですがね。ｗ
IE8正式版対応になったら、Internet Explorer Collection入れるかな。



私も是非参加しようと思ったけど、残念ながら英語が読めません。ｗ
ちなみにTwitterもしてません。
誰か日本語サイト作ってくれたら、間違いなく参加しますよ！

IEもバージョンアップしたら、ブラウザを開く度にアラートを表示するようにしたら良いのに。
ライトユーザーでバージョンアップするという概念すら無い人もいるんだから。
まぁアラート出たら、それはそれでウザイんですが…。

『IEとDocomoのバカさ加減は似ている・・・？』に続き、i-modeの超批判です。

『i-css』と言う俺ルールなドコモ仕様のCSS。
これを使って拡張子も『.xhtml』にして試してみた所、とんでもない事が発覚したんです。

それは・・・、
XHTMLにするとHTMLタグが使えない！

　　　　　　　　 ,. -‐””’”"¨¨¨ヽ
　　　　 　 　 (.＿＿_,,,… -ｧァﾌ|　　　　　　　　　　あ…ありのまま 起こった事を話すぜ！
　 　 　 　 　 |i i|　 　 }!　}} /／|
　　　　 　 　 |l､{　 　j}　/,,ｨ//｜　　　　　　　『XHTMLでHTMLのタグを使ってコードを書いていたら
　　　　　　　 i|:!ヾ､_ﾉ／ u {:}//ﾍ　　　　　　　　HTMLのタグが反映されないんだ』
　　　　　　　 |ﾘ u’ }　 ,ﾉ　_,!V,ﾊ |
　　 　 　 ／´fト､_{ﾙ{,ィ’ｅﾗ　, ﾀ人　　　　　　　　な…　何を言ってるのか　わからねーと思うが
　　　　 /’ 　 ヾ|宀| {´,)⌒`/ |<ヽﾄiゝ　　　　　　　　おれも何が起こったのかわからなかった…
　　　　,ﾞ　 ／ )ヽ iLﾚ 　u' |　| ヾｌﾄﾊ〉
　　 　 |／_／　 ﾊ !ニ⊇　'／:} 　V:::::ヽ　　　　　　　　頭がどうにかなりそうだった…
　　　 /／ 二二二7'T'' ／u'　__ /:::::::/｀ヽ
　　　/'´r　-―一ｧ‐ﾞＴ´　'"´ ／::::／-‐ 　＼　　　　催眠術だとかタグミスだとか
　　 / // 　 广¨´ 　/'　　 ／:::::／´￣｀ヽ ⌒ヽ　　　　そんなチャチなもんじゃあ　断じてねえ
　　ﾉ ' /　 ノ:::::`ー-､___／:::::／/ 　 　 　 ヽ　　}
_／｀丶　/::::::::::::::::::::::::::￣`ー-{:::...　　　 　　　ｲ　　　 i-modeのバカさ加減を味わったぜ…

・・・i-modeもIEも撲滅してくれないですかね。

PCサイトを作る時、必ずIEのチェックをしなければいけません。
携帯サイトを作る時、ドコモのi-モードのチェックをしなければいけません。

プライベートなサイトなら無視しようとも思いますが、それが仕事上ってんなら話しは別です。
未だにシェアが多いIEとドコモ。
シェアが一番多い所が一番バカってのも、どうかと思うんですが。
そんな仕事上での葛藤日記。

今までの記事で散々言っているように、IEはバカです。
特にIE6以下は散々たる物で、WEBデザイナー・プログラマー泣かせだと思います。
最近仕事上で携帯サイトを作っており、ドコモもバカだと実感しました。

まず、HTMLでCSSが使えない。
XHTMLにすれば多少は使えるようですが、それでも以下の制約があります。

1外部のCSSは読み込めない。
全てXHTML内のstyleで書かなければいけないらしい。
auとsoftbankはちゃんと読み込んでくれるらしいです。

2CSSじゃなく、『i-css』と言うドコモ独自のCSSらしい。
しかもDOCTYPE宣言に特別な記述がいるらしい。
何、その俺様ルール？
さすがドコモさん、時代の逆行を行ってますね。
この時点でドコモが大っ嫌いになりました。

3XHTMLにする時、拡張子を『.xhtml』にしなければいけない。
ちょｗｗｗおまｗｗｗ、拡張子を変えるって事がどんだけ大変な事か分かってんのか！？
『.htaccess』に魔法の呪文を記述すれば解決出来ますが。

4CSSに対応したといっても、使える数は微々たる物。
使えるといったら『background』ぐらい。
『span』なんて『font-size』だけって、HTMLタグで書いた方が量少ないっての。

<font size="2">フォントサイズ</font>
<span style="font-size:12px">フォントサイズ</span>

px指定が出来るかどうかは分かっていませんが。

とまぁ簡単に挙げただけですけど、兄曰く「シェアが多い分だけ冒険は出来ずに、確実な道を行っている」と言っていました。
分からなくもないんですけど、『i-css』だけは分からない。
更に兄曰く「IEとドコモって似てね？」と言っていました。
IEとドコモって言うより、Windows＝ドコモってな気が私はします。
そうなれば、Mac＝softbank、Linux＝auですかね。

IEとドコモのアホーーー！！

ちなみに、作る側からの視点ですのであしからず。
全員が全員新しい機種持っているとは限らないし、最低2年前までは視野に入れておかないといけないんですよね・・・、トホホ。